Repository navigation
[O2B-1634] Adapt the header to multiple screen sizes - #2273
Merged
graduta merged 8 commits intoOct 22, 2026
Merged
Conversation
- Collapse the page tabs into a menu button below 1280px, keep the header height identical on every screen size - Always display the Bookkeeping title, move the account menu to the left and shrink the create button to a "+" on phones - Highlight the current page in the menu and close the navbar menus on outside click or Escape - Merge the "Log" and "EoS report" buttons into a single "Add an entry" menu listing the log types and the EoS report shift types - Remove the EoS report shift type selection page: opening the creation page without a shift type redirects to the home page
- New "Header" UI suite covering the full and collapsed navigation bar, the "Add an entry" menu and the account menu on phone, tablet, laptop and desktop screen sizes - Register the suite in the CI matrix and in the local parallel test runner - Set a big viewport in the existing navbar tabs test as tabs are collapsed on small screens
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #2273 +/- ##
==========================================
- Coverage 46.46% 46.39% -0.07%
==========================================
Files 1053 1053
Lines 17359 17384 +25
Branches 3162 3168 +6
==========================================
Hits 8065 8065
- Misses 9294 9319 +25 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
…wports The header tabs are collapsed below 1280px, so the envs and runs overview tests (700px and 1200px wide) cannot click them with a real click anymore.
There was a problem hiding this comment.
🟡 Changes recommended
Menu accessibility and the collapsed ALI FLP link’s navigation behavior need correction.
3 open issues
What changed in this PR
Adapts Bookkeeping’s header for smaller screens and consolidates entry creation into one menu.
Changes:
- Adds responsive navigation and moves the account menu left.
- Combines log and EoS report creation; removes the shift-selection page.
- Adds header UI tests and registers them in local and CI runners.
| File | Description |
|---|---|
| test/scripts/test-header.js | Adds standalone header test runner. |
| test/scripts/parallel-local/main.js | Registers header tests locally. |
| test/public/runs/overview.test.js | Adjusts navigation interactions. |
| test/public/logs/create.test.js | Opens the creation menu before navigation. |
| test/public/index.js | Registers the header suite. |
| test/public/header/navBar.test.js | Tests responsive layout and menu behavior. |
| test/public/header/index.js | Groups header tests. |
| test/public/envs/overview.test.js | Adjusts navigation interaction. |
| test/public/components/navBar.test.js | Uses a desktop viewport for tabs. |
| lib/public/views/EosReport/EosReportModel.js | Redirects creation without a shift type. |
| lib/public/views/EosReport/create/EosReportCreationPage.js | Removes shift-selection UI. |
| lib/public/Model.js | Adds outside-click and Escape dismissal. |
| lib/public/components/NavBar/index.js | Implements responsive navigation and creation menus. |
| lib/public/app.css | Adds responsive navbar styles. |
| .github/workflows/bookkeeping.yml | Adds header tests to CI. |
Review effort: Balanced
- Give the focus back to the opened menu's button when closing it with Escape - Expose aria-expanded and aria-haspopup on the navbar menu buttons - Open the ALI FLP link of the collapsed menu in a new tab like the desktop one - Test the three behaviours in the header suite
graduta
deleted the
improv/O2B-1634/adapt-header-to-multiple-screen-sizes
branch
October 22, 2026 07:38
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
I have a JIRA ticket
Notable changes for users:
Notable changes for developers:
HeaderUI test suite (test/public/header) covering the full and collapsed navigation bar, the "Add an entry" menu and the account menu on phone, tablet, laptop and desktop viewports; registered in the CI matrix and in the local parallel runner.app.css(navbar-*), no inline styles.Changes made to the database:
Tests: the new
headersuite (23 tests) passes locally with the same docker setup as CI, as do the impacted existing tests (navbar tabs, log creation, tag creation, ECS EoS report creation).