Search Endpoint Pagination Overflows Parent Div #5522

New Issue

OVERLORD · 2026-02-05T10:08:34+03:00

OVERLORD commented

2026-02-05 10:08:34 +03:00

Originally created by @0xBEN on GitHub (Nov 26, 2025).

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

Use mobile device or mobile view in browser dev tools
Navigate to BookStack application (e.g. https://notes.benheater.com)
Click the "..." menu button > Click Search (no keywords / filters)
Note the primary <div class="card content-wrap"> container does not match the viewport
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

Originally created by @0xBEN on GitHub (Nov 26, 2025). ### 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">`_ <img width="2202" height="430" alt="Image" src="https://github.com/user-attachments/assets/c8f668dc-836e-4418-a099-a90edd3fd0c0" />   _Element in question: `document.querySelector("#search-system > div > div:nth-child(2) > div > nav > ul")`_ <img width="2206" height="430" alt="Image" src="https://github.com/user-attachments/assets/eb65fa3f-3d4c-40e3-b141-7327e5d309e1" />   _Current CSS for this element_ ```css 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>`_ ```css 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>`_ <img width="2319" height="836" alt="Image" src="https://github.com/user-attachments/assets/5e4619bd-621e-4689-93b4-3bfa63ab82af" /> ### Browser Details Chrome 142.0.7444.171 (Android) ### Exact BookStack Version 25.11.3

OVERLORD added the 🐛 Bug label 2026-02-05 10:08:34 +03:00

OVERLORD closed this issue

2026-02-05 10:08:35 +03:00

OVERLORD commented

2026-02-05 10:08:37 +03:00

@ssddanbrown commented on GitHub (Dec 7, 2025):

Thanks for reporting this @0xBEN!

This has now been addressed within 1ee5711435, which will be part of the next feature release.

@ssddanbrown commented on GitHub (Dec 7, 2025): Thanks for reporting this @0xBEN! This has now been addressed within 1ee57114353887420d1dcf0366876d92f554c7ec, which will be part of the next feature release.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#5522