From 7b1196d48a371ace3abd98d41aa52a7598934d8d Mon Sep 17 00:00:00 2001 From: Owen McGirr Date: Wed, 7 Oct 2026 12:24:01 +0100 Subject: [PATCH 1/2] Open maximised and lay pages out for wide windows The main window opens maximised. Pages drop the fixed 1100px column (now up to 1760px), and from 1200px of page width settings sections put their title beside their controls, lists of rows (Home, Help, Switch Forwarding) become two columns of tiles, the Account page sets What syncs beside its actions, and tabs stop stretching. Paragraphs keep their reading width, and smaller windows keep the single-column layout. Refs #999 Co-Authored-By: Claude Opus 5.5 (1M context) --- src-tauri/tauri.conf.json | 3 ++- src/settings/AccountSection.tsx | 2 +- src/ui/app.css | 29 ++++++++++++++++++++++++++++- 3 files changed, 31 insertions(+), 3 deletions(-) diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index a5a0b5a2..bd5d0810 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -20,7 +20,8 @@ "minHeight": 520, "resizable": true, "zoomHotkeysEnabled": true, - "fullscreen": false + "fullscreen": false, + "maximized": true } ], "security": { diff --git a/src/settings/AccountSection.tsx b/src/settings/AccountSection.tsx index eb411262..e99a74a9 100644 --- a/src/settings/AccountSection.tsx +++ b/src/settings/AccountSection.tsx @@ -29,7 +29,7 @@ function Band({ tone, ok, icon, title, children, action }: { tone: "ready" | "at } function WhatSyncs() { - return
+ return

What syncs

{whatSyncs}

; } diff --git a/src/ui/app.css b/src/ui/app.css index 377a8c68..2d91ec65 100644 --- a/src/ui/app.css +++ b/src/ui/app.css @@ -188,7 +188,7 @@ h1, h2, h3, p { margin: 0; letter-spacing: 0; } .sidebar-footer { margin-top: auto; padding: 12px 16px 0; color: var(--muted); } main { min-width: 0; } -.view { width: min(100%, 1100px); margin: 0 auto; padding: 32px; container-type: inline-size; } +.view { width: min(100%, 1760px); margin: 0 auto; padding: 32px clamp(32px, 3vw, 56px); container-type: inline-size; } .page-header, .section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; } .page-header { margin-bottom: 24px; } .page-header h1 { font-size: 30px; line-height: 1.2; font-weight: 700; } @@ -443,6 +443,7 @@ fieldset:disabled :is(.color-options, .scanner-colours) label:not(:has(input:che /* --- Scanning ---------------------------------------------------------------- */ .scanner-settings { max-width: 920px; } +@container (min-width: 1200px) { .scanner-settings { max-width: none; } } .scanner-status { margin-bottom: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px 20px; background: var(--surface-muted); } .scanner-help { margin: 24px 0 16px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--muted); } .scanner-help summary { justify-content: space-between; gap: 12px; padding: 12px 20px; color: var(--text); list-style: none; } @@ -700,3 +701,29 @@ fieldset:disabled :is(.color-options, .scanner-colours) label:not(:has(input:che keeps its width instead of wrapping beside them. */ .status-list > article.stacked-row { grid-auto-flow: row; } .status-list > article.stacked-row > .row-actions { grid-column: 2; justify-self: start; } + +/* --- Wide windows ---------------------------------------------------------- + A maximised window gives pages far more width than one column can use + well. From 1200px of page width: settings sections put their title beside + their controls, lists of rows become two columns of tiles, and tabs stop + stretching. Paragraphs keep their reading width throughout. */ +@container (min-width: 1200px) { + .tab-bar .btn { flex: 0 1 auto; min-width: 160px; } + + .setting-group { grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr); align-items: start; column-gap: 48px; } + .setting-group > header { position: sticky; top: 24px; } + .setting-group > .setting-controls { max-width: 1040px; } + + :is(.status-list, .task-list, .profile-list):has(> :nth-child(2)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } + :is(.status-list, .task-list) > article:nth-child(odd), + .profile-list > .profile-row:nth-child(odd) { border-right: 1px solid var(--border); } + :is(.status-list, .task-list) > article:nth-last-child(2):nth-child(odd), + .profile-list > .profile-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; } + + .account-page { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } + .account-page > .connection-band { grid-column: 1 / -1; } + /* What syncs sits beside the actions instead of leaving a ragged gap. */ + .account-page > .what-syncs { grid-column: 2; grid-row: 2 / span 2; } + .scanner-panel-heading > p { max-width: 80ch; } + .account-page > .field-error { grid-column: 1 / -1; } +} From 6263520438e4f8664046164a4db04d4a76563389 Mon Sep 17 00:00:00 2001 From: Owen McGirr Date: Wed, 7 Oct 2026 12:29:58 +0100 Subject: [PATCH 2/2] Keep wide-window content readable and aligned Address review on the wide layout: - Name the page container so every wide rule (including tile borders inside lists) measures the page, not an inner list. - Notes outside setting groups keep an 80ch reading width, and Scanning's More options content keeps a usable width. - Align the Account cards, and only stretch What syncs across two rows when there are two cards beside it. - Drop a rule that never matched. Co-Authored-By: Claude Opus 5.5 (1M context) --- src/ui/app.css | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/src/ui/app.css b/src/ui/app.css index 2d91ec65..3a616107 100644 --- a/src/ui/app.css +++ b/src/ui/app.css @@ -188,7 +188,7 @@ h1, h2, h3, p { margin: 0; letter-spacing: 0; } .sidebar-footer { margin-top: auto; padding: 12px 16px 0; color: var(--muted); } main { min-width: 0; } -.view { width: min(100%, 1760px); margin: 0 auto; padding: 32px clamp(32px, 3vw, 56px); container-type: inline-size; } +.view { width: min(100%, 1760px); margin: 0 auto; padding: 32px clamp(32px, 3vw, 56px); container: page / inline-size; } .page-header, .section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; } .page-header { margin-bottom: 24px; } .page-header h1 { font-size: 30px; line-height: 1.2; font-weight: 700; } @@ -443,7 +443,7 @@ fieldset:disabled :is(.color-options, .scanner-colours) label:not(:has(input:che /* --- Scanning ---------------------------------------------------------------- */ .scanner-settings { max-width: 920px; } -@container (min-width: 1200px) { .scanner-settings { max-width: none; } } +@container page (min-width: 1200px) { .scanner-settings { max-width: none; } } .scanner-status { margin-bottom: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px 20px; background: var(--surface-muted); } .scanner-help { margin: 24px 0 16px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--muted); } .scanner-help summary { justify-content: space-between; gap: 12px; padding: 12px 20px; color: var(--text); list-style: none; } @@ -706,8 +706,9 @@ fieldset:disabled :is(.color-options, .scanner-colours) label:not(:has(input:che A maximised window gives pages far more width than one column can use well. From 1200px of page width: settings sections put their title beside their controls, lists of rows become two columns of tiles, and tabs stop - stretching. Paragraphs keep their reading width throughout. */ -@container (min-width: 1200px) { + stretching. Paragraphs keep their reading width throughout. Measured + against the page itself (the named container), not inner lists. */ +@container page (min-width: 1200px) { .tab-bar .btn { flex: 0 1 auto; min-width: 160px; } .setting-group { grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr); align-items: start; column-gap: 48px; } @@ -715,15 +716,20 @@ fieldset:disabled :is(.color-options, .scanner-colours) label:not(:has(input:che .setting-group > .setting-controls { max-width: 1040px; } :is(.status-list, .task-list, .profile-list):has(> :nth-child(2)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } - :is(.status-list, .task-list) > article:nth-child(odd), - .profile-list > .profile-row:nth-child(odd) { border-right: 1px solid var(--border); } - :is(.status-list, .task-list) > article:nth-last-child(2):nth-child(odd), - .profile-list > .profile-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; } + :is(.status-list, .task-list):has(> :nth-child(2)) > article:nth-child(odd), + .profile-list:has(> :nth-child(2)) > .profile-row:nth-child(odd) { border-right: 1px solid var(--border); } + :is(.status-list, .task-list):has(> :nth-child(2)) > article:nth-last-child(2):nth-child(odd), + .profile-list:has(> :nth-child(2)) > .profile-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; } + + /* Content outside setting groups keeps a usable width. */ + .setting-note { max-width: 80ch; } + .scanner-preferences > .more-options > .more-options-content { max-width: 1040px; } .account-page { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .account-page > .connection-band { grid-column: 1 / -1; } /* What syncs sits beside the actions instead of leaving a ragged gap. */ - .account-page > .what-syncs { grid-column: 2; grid-row: 2 / span 2; } + .account-page > .connection-band + .status-list { margin-top: 0; } + .account-page > .what-syncs { grid-column: 2; grid-row: 2; } + .account-page:has(> .status-list:nth-child(4)) > .what-syncs { grid-row: 2 / span 2; } .scanner-panel-heading > p { max-width: 80ch; } - .account-page > .field-error { grid-column: 1 / -1; } }