Pagination text & buttons alignment

[gouravkhunger]

The pagination info text is not well aligned on the first and last pages where either of the previous / next buttons is absent.

[Akash1965]

Hi @gouravkhunger can you please assign this issue to me

[gouravkhunger]

Hey @Akash1965, sure! I'll elaborate the issue here:

As you can see: if the previous/next button is absent, the text "Page _ of _" moves from its position. This is because the div content is centered in the current logic of rendering:

theme-files/_pages/index.html

Lines 32 to 54 in 38ab035

	{% if paginator.total_pages > 1 %}
	<div class="flex justify-center items-center w-full">
	{% if paginator.previous_page %}
	<a
	href="{{ site.baseurl }}{{ paginator.previous_page_path }}"
	class="mr-2 px-2 py-0.5 hover:shadow-xl hover:shadow-slate-200 dark:hover:shadow-none rounded-md bg-background dark:bg-slate-100 dark:text-black text-white text-lg hover:scale-110 transition underline-none"
	>
	Previous
	</a>
	{% endif %}
	<span>Page {{ paginator.page }} of {{ paginator.total_pages }}</span>
	{% if paginator.next_page %}
	<a
	href="{{ site.baseurl }}{{ paginator.next_page_path }}"
	class="ml-2 px-2 py-0.5 hover:shadow-xl hover:shadow-slate-200 dark:hover:shadow-none rounded-md bg-background dark:bg-slate-100 dark:text-black text-white text-lg hover:scale-110 transition underline-none"
	>
	Next
	</a>
	{% endif %}
	</div>
	{% endif %}

A possible solution is to always have previous/next buttons by removing the if checks, but add the tailwind class invisible using the same conditional logic. So that the element is not shown, but takes up space it requires. This will preserve symmetry.

Let me know if you need further clarification.

Thanks!

[gouravkhunger]

Also, if you are on mac / linux you can follow the local setup guide to begin building locally.