[graduta]

I have a JIRA ticket

• branch and/or PR name(s) include(s) JIRA ID
• issue has "Fix version" assigned
• issue "Status" is set to "In review"
• PR labels are selected

Notable changes for users:

• On tablets and phones (screens narrower than 1024px), the filters panel of the overview pages opens as a sheet below the navbar on the whole width of the screen, instead of a fixed-width popover running out of the screen.
• On phones (screens narrower than 768px), each filter label is displayed above its input in the filters panel.
• On phones, the header above the tables (filters button, active filters indicator, quick filters such as "No Anonymous" or "Physics only", and the page buttons) wraps on several lines instead of being squeezed and clipped.
• The filters button, the filters panel and the header above the tables use a smaller font (0.875rem), on every screen size.
• Screens of 1024px and above are unchanged, except for the smaller font.
• Pages whose table is wider than the screen no longer get a page that scrolls and a filters panel partly out of the screen: such a table now scrolls inside its own box.

Notable changes for developers:

• The changes are in the shared filtersPanelPopover component and in the header: the header-container class, and any row directly containing the filters button group (.flex-row:has(> .filters-toolbar)), as seven of the thirteen pages do not use header-container. So every page using them benefits (log overview, runs overview and runs per period, data pass or simulation pass, LHC fills, environments, LHC periods, simulation passes, data passes and QC flag types overviews). No page-specific code is needed.
• filtersPanelPopover has new class names: filters-toolbar on the filters button group, filters-panel on the panel content (replacing w-l), filter-row, filter-label and filter-input on each filter, and filters-popover as the popover class. The sheet layout overrides the position computed by the popover in javascript with !important in a media query.
• Below 1024px, table.table (except the log overview one, which has its own scroll wrapper) is displayed as a block scrolling horizontally. Otherwise a table wider than the screen widens the layout viewport of the phone, and the filters panel, which is fixed and positioned against it, is displayed partly out of the screen.
• Two tests (log overview) check on a phone viewport that the filters panel fits in the screen with its labels above the inputs (and with the labels beside the inputs on a tablet viewport), and that the header wraps. They were not run locally.
• The layout of the other pages was only checked by hand before this PR, on a phone viewport (runs, LHC fills, environments and LHC periods headers).

Changes made to the database:

• None

🤖 Generated with Claude Code

[codecov]

Codecov Report

❌ Patch coverage is 0% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 46.31%. Comparing base (09ee2e3) to head (8e51462).

Files with missing lines	Patch %	Lines
...c/components/Filters/common/filtersPanelPopover.js	0.00%	2 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2287   +/-   ##
=======================================
  Coverage   46.31%   46.31%           
=======================================
  Files        1056     1056           
  Lines       17440    17440           
  Branches     3183     3183           
=======================================
  Hits         8078     8078           
  Misses       9362     9362           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.