Ability to set List/Grid View for different Screen Sizes #5106

New Issue

OVERLORD · 2026-02-05T09:40:53+03:00

OVERLORD commented

2026-02-05 09:40:53 +03:00

Originally created by @whoamiafterall on GitHub (Jan 6, 2025).

Describe the feature you'd like

It would be very nice if we could set the view in the "Books" and "Shelves" Sections to List for Mobile Phones (small screens) and to Grid for bigger Screens (Laptops).
It could be just an additional toggle for small screens in the config.env
But it's probably also nicer to be able to set it in Admin Settings in the UI at some point.

Describe the benefits this would bring to existing BookStack users

It would enhance the responsiveness of the site even more.

Can the goal of this request already be achieved via other means?

No. Right now we can only set it in config.env for the whole instance.

Have you searched for an existing open/closed issue?

I have searched for existing issues and none cover my fundamental request

How long have you been using BookStack?

3 months to 1 year

Additional context

No response

Originally created by @whoamiafterall on GitHub (Jan 6, 2025). ### Describe the feature you'd like It would be very nice if we could set the view in the "Books" and "Shelves" Sections to List for Mobile Phones (small screens) and to Grid for bigger Screens (Laptops). It could be just an additional toggle for small screens in the config.env But it's probably also nicer to be able to set it in Admin Settings in the UI at some point. ### Describe the benefits this would bring to existing BookStack users It would enhance the responsiveness of the site even more. ### Can the goal of this request already be achieved via other means? No. Right now we can only set it in config.env for the whole instance. ### Have you searched for an existing open/closed issue? - [X] I have searched for existing issues and none cover my fundamental request ### How long have you been using BookStack? 3 months to 1 year ### Additional context _No response_

OVERLORD added the 🔨 Feature Request label 2026-02-05 09:40:53 +03:00

OVERLORD closed this issue

2026-02-05 09:40:56 +03:00

OVERLORD commented

2026-02-05 09:40:58 +03:00

@DiscordDigital commented on GitHub (Jan 7, 2025):

That's a cool idea, I wrote a script which can be added to Settings > Customization > Custom HTML Head Content, which automatically toggles between these views, based on the screen width:

<style>
    button[name="view"] {
        display: none;
    }
</style>
<script>
    // Standard debounce function
    const debounce = (f, w = 50) => {
        // Initialize timeout variable in scope
        let t;

        // Return a function that takes a rest parameter
        return (...a) => {
            // Clear timeout each time the returned function is called
            clearTimeout(t);

            // Set a new timeout to execute function with arguments collected using delay
            t = setTimeout(() => f.apply(this, a), w);
        }
    }

    // Add a resize event listener to the window and pass a debounce function
    window.addEventListener("resize", debounce(() => {
        // Obtain the innerWidth of the window
        let w = window.innerWidth;

        // Get the button to toggle the layout
        let b = document.querySelector('button[name="view"]');

        // If the button exists
        if (b) {
            // Get value from button, which can be list or grid
            let m = b.value;

            // If the window size is smaller or equal than 1024 and the button has list as value
            if (w <= 1024 && m == "list") {
                // Click the layout button
                b.click();
            }
            
            // If the window size is greater than 1024, and the button has grid as value
            if (w > 1024 && m == "grid") {
                // Click the layout button
                b.click();        
            }
        }
    }, 20));
    window.dispatchEvent(new Event('resize'));
</script>

@DiscordDigital commented on GitHub (Jan 7, 2025): That's a cool idea, I wrote a script which can be added to **Settings > Customization > Custom HTML Head Content**, which automatically toggles between these views, based on the screen width: ```html <style> button[name="view"] { display: none; } </style> <script> // Standard debounce function const debounce = (f, w = 50) => { // Initialize timeout variable in scope let t; // Return a function that takes a rest parameter return (...a) => { // Clear timeout each time the returned function is called clearTimeout(t); // Set a new timeout to execute function with arguments collected using delay t = setTimeout(() => f.apply(this, a), w); } } // Add a resize event listener to the window and pass a debounce function window.addEventListener("resize", debounce(() => { // Obtain the innerWidth of the window let w = window.innerWidth; // Get the button to toggle the layout let b = document.querySelector('button[name="view"]'); // If the button exists if (b) { // Get value from button, which can be list or grid let m = b.value; // If the window size is smaller or equal than 1024 and the button has list as value if (w <= 1024 && m == "list") { // Click the layout button b.click(); } // If the window size is greater than 1024, and the button has grid as value if (w > 1024 && m == "grid") { // Click the layout button b.click(); } } }, 20)); window.dispatchEvent(new Event('resize')); </script> ```

OVERLORD commented

2026-02-05 09:41:01 +03:00

@whoamiafterall commented on GitHub (Jan 9, 2025):

Very Nice! Thanks a lot :)

@whoamiafterall commented on GitHub (Jan 9, 2025): Very Nice! Thanks a lot :)

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#5106