Skip to content

Two panes in German: selection bar stacks into six rows and pushes the list down 182 px #383

Closed

Description

@BeSovereign

Where
web/src/styles/app.css:660-672: the desktop rule .toolbar:has(.selection-bar) { flex-wrap: nowrap } keeps the bar beside the breadcrumbs (min-width: 8rem). It also applies inside a pane of .workspace.dual (app.css:1278-1285), where the pane is only ~550 px wide.

What happens
With two panes on (Settings → Folder layout) and German, selecting 2 items in the left pane at 1440×900 squeezes the bar's ten buttons into the ~400 px beside the 8rem title:

  • The bar becomes 6 rows, 256 px high.
  • The current crumb is cut to "Mein Speic…" and floats vertically centred beside the stack.
  • The list's header moves down 182 px.

Measured with Playwright: {barH:256, barRows:6, listMovedBy:182}. DESIGN.md "Selection bar" says a bar wider than the room beside the title "wraps onto a second row" and that the list moves "by its second row only". The #365 test (e2e/selection-bar.spec.ts:93) only covers one pane at 1280 px.

Steps

  1. Settings → "Zwei Bereiche nebeneinander" on, language Deutsch (Du).
  2. Use a window of 1440×900, open Mein Speicher, and tick two files in the left pane.

Expected
In a pane, the bar does not compete with the title for one line. When it does not fit beside the title, it takes its own full-width row(s) under the title, about 2 rows in a 550 px pane, and the title keeps its full width. The list moves by at most the bar's own height.

Fix
Inside .workspace.dual .pane, or with a container query on the toolbar, let .toolbar:has(.selection-bar) wrap. Give .selection-bar flex-basis: 100% there and justify it to the end, so the bar wraps under the title instead of beside it.

Test (Playwright, must fail without the fix)
In e2e/selection-bar.spec.ts (desktop only):

  1. Turn on two panes and de-du via PUT /api/v1/settings, set the viewport to 1440×900, open /home, and tick two rows in the first pane.
  2. Assert that the distinct button tops in the bar (group "Aktionen für die Auswahl") are ≤ 3.
  3. Assert that the current crumb's scrollWidth <= clientWidth (not cut).
  4. Reset the settings in finally.

Found by the automatic review round (claude-opus-5-5, c318221); per CLAUDE.md the fix starts with a failing behaviour test.

Activity

  1. added
    rebuildPart of the ground-up rebuild (spec 2026-10-14)
    qaFound by exploratory QA (dogfooding)
    on Oct 19, 2026
  2. added a commit that references this issue on Oct 20, 2026
  3. BeSovereign commented on Oct 20, 2026

    @BeSovereign
    ContributorAuthor

    Fixed: PR #395 squash-merged into main after green CI (one commit; git revert it to undo).

    • Suites: typecheck: 1 passed, 0 failed | lint: 1 passed, 0 failed | unit: 1176 passed, 0 failed | e2e: 590 passed, 0 failed
    • Declared tests fail without the production change and pass with it (output in the PR).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    qaFound by exploratory QA (dogfooding)rebuildPart of the ground-up rebuild (spec 2026-10-14)

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions