Skip to content

The Done button sits on top of the Port setting when a Settings tab grows #565

Description

@thcp

The problem

The Settings dialog is a fixed height so that switching tabs never resizes it, and each pane is flex: 1 to fill it. Only the General pane was given overflow-y.

That was a bet that no other tab would ever outgrow the dialog's 540px. The Network tab did, once it gained a secure-origin warning and one QR card per network interface.

A pane with no overflow does not clip. It runs on underneath, so the content simply carries on past the bottom of the dialog and the footer is drawn over the top of it. The visible result is the Done button sitting on top of the Port setting, with the settings below it unreachable.

It looks like a broken layout rather than content that ran out of room, and there is no scroll to discover.

Constraints on any fix

  • The dialog must stay one size on every tab. A dialog that resizes as you switch tabs is the other bad outcome, and is why the panes are flex: 1 in the first place.
  • The footer must never be the thing that gets squeezed.
  • Any scrollbar has to have a reserved gutter, or it overlaps the right-aligned controls (Compute device, Out of sync tracks) that already sit at the pane's edge.

Note for whoever tests this

Measuring bounding boxes does not distinguish the broken case from the fixed one. A pane that overflows keeps its own constrained box and merely paints its children outside it; a pane that scrolls correctly has children below the fold whose rects also sit past the bottom. Both look identical to getBoundingClientRect. What separates them is whether the pane clips.

Activity

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

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions