Skip to content

Refine global Settings layout and mobile reflow - #49

Merged
Jellman86 merged 1 commit into
devfrom
refactor/global-settings-layout
Jul 29, 2026
Merged

Refine global Settings layout and mobile reflow#49
Jellman86 merged 1 commit into
devfrom
refactor/global-settings-layout

Conversation

@Jellman86

Copy link
Copy Markdown
Owner

What changed

  • Reworked every global Settings tab into the same numbered, task-oriented ConfigSection structure used by per-library configuration.
  • Moved Run setup again into Settings → Backup → First-run setup, alongside the related backup and restore controls.
  • Added proper tab semantics, arrow/Home/End keyboard navigation, mobile touch targets, and responsive action wrapping.
  • Hardened the Tools view so long executable paths, status badges, hardware capabilities, and encoder names remain inside narrow and short-landscape viewports.
  • Added all nine locale strings, refreshed the five Settings documentation screenshots with fabricated data, and corrected affected documentation.
  • Added Playwright regression coverage for section order, keyboard navigation, 375 px dark-mode reflow with 125% text, tool-card bounds, touch targets, and every tab at a short landscape viewport.

Why

Global Settings had accumulated unrelated cards without the clear progression already established by the library editor. In the Tools tab, the tool name, command, and status shared an unbounded flex row, allowing the VMAF status badge to be pushed beyond the mobile viewport.

Impact

Settings now has a consistent reading order across global and per-library configuration. Phone and tablet users can inspect tool and encoder capability details without horizontal page overflow, and keyboard users can navigate the tabs using the standard tab pattern.

Validation

  • dotnet build Optimisarr.slnx --configuration Release --no-restore -warnaserror — 0 warnings, 0 errors
  • python3 scripts/check_openapi.py --configuration Release --no-build
  • dotnet test Optimisarr.slnx --configuration Release --no-build — 1,487 passed
  • npm run check — 0 errors, 0 warnings; locale and setup tests passed
  • npm run build
  • npm run test:e2e — 44 passed
  • python3 scripts/check_docs.py
  • git diff --check
  • Visual QA at 375×812, 430×932, 768×1024, 812×375, 1024×768, and desktop; light/dark, reduced motion, and 125% text

The local Mac has no Docker command and ships Bash 3.2, so the unchanged Linux NVENC harness and Compose rendering are intentionally left to the mandatory CI docs job before merge.

@Jellman86
Jellman86 marked this pull request as ready for review July 29, 2026 09:48
@Jellman86
Jellman86 merged commit 939c939 into dev Jul 29, 2026
8 checks passed
@Jellman86
Jellman86 deleted the refactor/global-settings-layout branch July 29, 2026 09:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant