fix(mobile): hide infinite scroll sentinel on desktop

The sentinel div (h-4) added extra space below the pagination bar
on pages with a next page, making the pagination bar appear taller
than on the last page. Since infinite scroll only runs on mobile,
hide the sentinel on desktop with md:hidden.
This commit is contained in:
Jon Seager 2026-02-03 12:48:15 +00:00
parent 8213543ed3
commit 8fe88c8ff6
No known key found for this signature in database
6 changed files with 6 additions and 6 deletions

View file

@ -61,7 +61,7 @@
if (newNextUrl) {
container.setAttribute("data-next-url", newNextUrl);
var newSentinel = document.createElement("div");
newSentinel.className = "infinite-scroll-sentinel h-4";
newSentinel.className = "infinite-scroll-sentinel h-4 md:hidden";
newSentinel.setAttribute("aria-hidden", "true");
container.appendChild(newSentinel);
setupInfiniteScroll();

View file

@ -126,7 +126,7 @@
</div>
{% call table::pagination_header(bags, navigator, "#bag-list") %}
{% if bags.has_next() %}
<div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div>
<div class="infinite-scroll-sentinel h-4 md:hidden" aria-hidden="true"></div>
{% endif %}
</div>
</section>

View file

@ -112,7 +112,7 @@
{% call table::pagination_header(brews, navigator, "#brew-list") %}
{% if brews.has_next() %}
<div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div>
<div class="infinite-scroll-sentinel h-4 md:hidden" aria-hidden="true"></div>
{% endif %}
</div>
</div>

View file

@ -69,7 +69,7 @@
{% endif %}
{% call table::pagination_header(gear, navigator, "#gear-list") %}
{% if gear.has_next() %}
<div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div>
<div class="infinite-scroll-sentinel h-4 md:hidden" aria-hidden="true"></div>
{% endif %}
</div>
{% endif %}

View file

@ -93,7 +93,7 @@
{% endif %}
{% call table::pagination_header(roasts, navigator, "#roast-list") %}
{% if roasts.has_next() %}
<div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div>
<div class="infinite-scroll-sentinel h-4 md:hidden" aria-hidden="true"></div>
{% endif %}
</section>
{% endif %}

View file

@ -107,7 +107,7 @@
{% endif %}
{% call table::pagination_header(roasters, navigator, "#roaster-list") %}
{% if roasters.has_next() %}
<div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div>
<div class="infinite-scroll-sentinel h-4 md:hidden" aria-hidden="true"></div>
{% endif %}
</section>
{% endif %}