Search Endpoint Pagination Overflows Parent Div

[0xBEN]

Describe the Bug

Issue Synopsis

When navigating to the /search endpoint on either of my BookStack instances, the page count element overflows the parent <div class="card content-wrap"> container. I have two BookStack instances and this happens on both of them. Currently on BookStack 25.11.3. I don't recall exactly when I first started seeing this issue. I suspect this only happens on BookStack instances with a very large knowledge base, as this would return a large number pages when hitting the /search endpoint without any keywords or filters.

Steps to Reproduce

1. Use mobile device or mobile view in browser dev tools
2. Navigate to BookStack application (e.g. https://notes.benheater.com)
3. Click the "..." menu button > Click Search (no keywords / filters)
4. Note the primary <div class="card content-wrap"> container does not match the viewport
5. Scroll down to the bottom of the page and note the pagination overflows the parent div causing the issue

Expected Behaviour

The expected behavior is that when a user navigates to /search on a BookStack instance with a high page count in the search results, the pagination elements should be confined to the parent <div class="card content-wrap"> and not overflow.

Screenshots or Additional Context

Evidence

Shows pagination overflowing parent <div class="card content-wrap">

 

Element in question: document.querySelector("#search-system > div > div:nth-child(2) > div > nav > ul")

 

Current CSS for this element

ul.pagination {
    display: inline-flex;
    list-style: none;
    margin: 16px 0;
    padding-inline-start: 1px;
}

 

Temporary Fix

Note that I am not a web developer by trade, nor a UI/UX designer, nor in any capacity familiar with the style guides recommended by the BookStack project. There are probably much better ways to do this with JavaScript so that the number of pagination elements matches the viewport of the device._

 

Adds a flex-wrap: wrap; rule to cause the pagination to wrap within the parent <div>

ul.pagination {
    display: inline-flex;
    list-style: none;
    margin: 16px 0;
    padding-inline-start: 1px;
    flex-wrap: wrap;
}

 

Shows the pagination elements no longer overflowing the parent <div>

Browser Details

Chrome 142.0.7444.171 (Android)

Exact BookStack Version

25.11.3