diff --git a/web/src/spawnForm.ts b/web/src/spawnForm.ts index b5e20fe..356b938 100644 --- a/web/src/spawnForm.ts +++ b/web/src/spawnForm.ts @@ -152,20 +152,20 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle { -
- Name -
- -
-
-
+
- - -
+
diff --git a/web/src/styles.css b/web/src/styles.css index dc3bcc7..7857ac2 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -3443,14 +3443,9 @@ input.leaf-rename:focus { overflow-y: visible; } - /* Rides the bottom of the scroll box: reachable at any scroll position, and - `margin-top: auto` keeps it at the screen's foot when the form is short. */ .spawn-modal .form-actions { - position: sticky; - bottom: 0; margin-top: auto; - padding: var(--sp-2) 0 calc(var(--sp-2) + env(safe-area-inset-bottom, 0px)); - background: var(--surface); + padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 12px -8px oklch(0 0 0 / 0.5); } @@ -3532,20 +3527,16 @@ input.leaf-rename:focus { flex: 0 0 auto; } -.worktree { - border: 1px solid var(--border); - border-radius: var(--r-2); - padding: 0 var(--sp-3); - margin: 0; +.advanced { display: flex; flex-direction: column; - background: color-mix(in oklab, var(--surface-2) 50%, transparent); } -.worktree .wt-toggle { - margin: 0 calc(var(--sp-3) * -1); - padding-left: var(--sp-3); - width: calc(100% + var(--sp-3) * 2); +.advanced .wt-toggle { + border-top: 1px solid var(--border); + border-radius: 0; + padding-top: var(--sp-2); + padding-bottom: var(--sp-2); } .wt-summary { @@ -3557,13 +3548,27 @@ input.leaf-rename:focus { display: flex; flex-direction: column; gap: var(--sp-3); - padding-bottom: var(--sp-3); + padding: var(--sp-2) 0 var(--sp-1); } .wt-collapsible[hidden] { display: none; } +/* Worktree sub-group: left accent border when expanded, visually nested. */ +.adv-group { + display: flex; + flex-direction: column; + gap: var(--sp-3); + padding-left: var(--sp-3); + border-left: 2px solid var(--border); + margin-top: var(--sp-1); +} + +.adv-group:has(input[name="worktree_enabled"]:checked) { + border-left-color: var(--accent); +} + .form-error { color: var(--danger); margin: 0; @@ -3881,6 +3886,11 @@ input.leaf-rename:focus { gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-2); + position: sticky; + bottom: 0; + padding: var(--sp-2) 0; + background: var(--surface); + z-index: 1; } .reroll {