Bug 41963

Summary: OPAC list view toolbar and action buttons consume most of the screen on mobile
Product: Koha Reporter: Paul Derscheid <paul.derscheid>
Component: ListsAssignee: Paul Derscheid <paul.derscheid>
Status: Needs Signoff --- QA Contact: Owen Leonard <oleonard>
Severity: enhancement    
Priority: P5 - low CC: dcook, m.de.rooy
Version: Main   
Hardware: All   
OS: All   
GIT URL: Initiative type: ---
Sponsorship status: --- Comma delimited list of Sponsors:
Crowdfunding goal: 0 Patch complexity: ---
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:
Attachments: Bug 41963: Improve OPAC list view mobile responsiveness
Bug 41963: (follow-up) Extend collapsible toolbar to search results
Bug 41963: Improve OPAC list view mobile responsiveness
Bug 41963: (follow-up) Extend collapsible toolbar to search results
Bug 41963: (follow-up) Extend collapsible toolbar to search results

Description Paul Derscheid 2026-03-02 12:02:36 UTC
On mobile devices, the OPAC virtual shelves/lists view (opac-shelves.pl) has two problems that make it hard to use:

1. The list actions toolbar (New list, Download, Send, Print, Edit, Delete, Share, Sort) and the selections toolbar (Select all, Clear all, Place hold, Remove) are always fully expanded and sticky, consuming 7+ rows of buttons before any list content is visible. There is no way I found to collapse or dismiss them.
2. The per-item action buttons (Place hold, Save to another list, Remove from list, Add to cart) render as full-width block elements with 120% font size, taking more vertical space than the bibliographic information itself.
Comment 1 Paul Derscheid 2026-03-02 13:21:11 UTC
Created attachment 194340 [details] [review]
Bug 41963: Improve OPAC list view mobile responsiveness

- On mobile devices, the OPAC virtual shelves/lists view has the
  toolbar and selections bar permanently expanded and sticky,
  consuming most of the viewport before any list content is visible
- Per-item action buttons render as full-width block elements with
  120% font size, taking more space than the content itself
- Add collapsible toolbar on mobile (<=608px) with a toggle bar,
  collapsed by default so list content is visible immediately
- Make per-item action buttons compact inline links instead of
  full-width block buttons on the shelves page
- Scope all responsive overrides to #opac-userlists/#opac-lists
  body IDs to avoid side effects on other OPAC pages
- Add aria-expanded and aria-controls for accessibility

Test plan:
- Go to the OPAC, create or open a list with several items
- Resize the browser to a mobile viewport (<=608px) or use a phone
- Observe the toolbar takes up most of the screen and cannot be
  collapsed, leaving little room for actual list content
- Observe per-item action buttons are oversized full-width blocks
- Apply patch
- Run: yarn css:build
- Run: koha-plack --reload kohadev
- Reload the list page at the same mobile viewport
- Verify the toolbar is now collapsed behind a "List actions" bar
- Click the toggle to expand the toolbar, verify all actions are
  still accessible, click again to collapse
- Verify per-item actions display as compact inline links
- Resize to desktop width (>608px) and verify the toolbar displays
  normally with no toggle button visible
- Verify aria-expanded attribute changes on toggle click
Comment 2 Paul Derscheid 2026-03-02 13:22:33 UTC
Hi Owen, would you take a look at this once we get an SO?
Comment 3 Owen Leonard 2026-03-02 17:56:08 UTC
I don't want to delay a good usability improvement but I also think that we should have a solution which works for both the list contents page and the catalog search results page.
Comment 4 Paul Derscheid 2026-03-02 18:49:14 UTC
Created attachment 194353 [details] [review]
Bug 41963: (follow-up) Extend collapsible toolbar to search results

- Extend the collapsible toolbar pattern to the catalog search
  results page (opac-results.tt) which has the same #floating
  sticky toolbar consuming the viewport on mobile
- Un-scope .toolbar-collapse-toggle and .toolbar-collapse CSS
  rules so they apply globally (safe: only pages with those HTML
  classes are affected)
- Add #results body ID to the per-item .actions-menu compact
  override alongside #opac-userlists and #opac-lists
- Move the toggle click handler from opac-shelves.tt inline script
  to global.js to avoid duplication across pages

Test plan:
- Apply patch on top of Bug 41963 base patch
- Run: yarn css:build
- Run: koha-plack --reload kohadev
- Perform a search that returns results
- At mobile viewport (<=608px), verify toolbar is collapsed behind
  a "Search controls" toggle bar
- Click the toggle to expand, verify pagination, sort, and batch
  controls are all accessible
- Verify per-item actions display as compact inline links
- Navigate to a list page and verify collapse still works
- At desktop width (>608px), verify both pages display toolbars
  normally with no toggle button visible
Comment 5 Paul Derscheid 2026-03-02 18:56:45 UTC
Created attachment 194355 [details] [review]
Bug 41963: Improve OPAC list view mobile responsiveness

- On mobile devices, the OPAC virtual shelves/lists view has the
  toolbar and selections bar permanently expanded and sticky,
  consuming most of the viewport before any list content is visible
- Per-item action buttons render as full-width block elements with
  120% font size, taking more space than the content itself
- Add collapsible toolbar on mobile (<=608px) with a toggle bar,
  collapsed by default so list content is visible immediately
- Make per-item action buttons compact inline links instead of
  full-width block buttons on the shelves page
- Scope all responsive overrides to #opac-userlists/#opac-lists
  body IDs to avoid side effects on other OPAC pages
- Add aria-expanded and aria-controls for accessibility

Test plan:
- Go to the OPAC, create or open a list with several items
- Resize the browser to a mobile viewport (<=608px) or use a phone
- Observe the toolbar takes up most of the screen and cannot be
  collapsed, leaving little room for actual list content
- Observe per-item action buttons are oversized full-width blocks
- Apply patch
- Run: yarn css:build
- Run: koha-plack --reload kohadev
- Reload the list page at the same mobile viewport
- Verify the toolbar is now collapsed behind a "List actions" bar
- Click the toggle to expand the toolbar, verify all actions are
  still accessible, click again to collapse
- Verify per-item actions display as compact inline links
- Resize to desktop width (>608px) and verify the toolbar displays
  normally with no toggle button visible
- Verify aria-expanded attribute changes on toggle click
Comment 6 Paul Derscheid 2026-03-02 18:56:47 UTC
Created attachment 194356 [details] [review]
Bug 41963: (follow-up) Extend collapsible toolbar to search results

- Add collapsible toolbar wrapper and toggle to opac-results.tt
- Move toggle click handler from opac-shelves.tt to global.js
  so it works on both pages
- Un-scope .toolbar-collapse-toggle and .toolbar-collapse CSS
  rules to apply globally
- Add #results to .actions-menu compact override

Test plan:
- Open the OPAC search results page on a mobile viewport (<=608px)
- Confirm the toolbar is collapsed with a toggle button visible
- Click the toggle to expand/collapse the toolbar
- Verify the list view (opac-shelves) still works as before
- On desktop (>608px), confirm no toggle button is visible and
  the toolbar displays normally
- yarn css:build
- koha-plack --reload kohadev
Comment 7 Paul Derscheid 2026-03-02 18:58:05 UTC
Added another patch to try it in search results.

The diff looks horrible from the indentation change, best to check with `--ignore-all-space`.
Comment 8 Paul Derscheid 2026-03-02 19:00:42 UTC
Created attachment 194359 [details] [review]
Bug 41963: (follow-up) Extend collapsible toolbar to search results

- Add collapsible toolbar wrapper and toggle to opac-results.tt
- Move toggle click handler from opac-shelves.tt to global.js
  so it works on both pages
- Un-scope .toolbar-collapse-toggle and .toolbar-collapse CSS
  rules to apply globally
- Add #results to .actions-menu compact override

Test plan:
- Open the OPAC search results page on a mobile viewport (<=608px)
- Observe the toolbar is permanently expanded and sticky,
  consuming viewport space before search results are visible
- Apply patch
- Run: yarn css:build
- Run: koha-plack --reload kohadev
- Reload the search results page at the same mobile viewport
- Confirm the toolbar is collapsed with a "Search controls" toggle
- Click the toggle to expand/collapse the toolbar
- Verify the list view (opac-shelves) still works as before
- On desktop (>608px), confirm no toggle button is visible and
  the toolbar displays normally