naps62/maestro
Archived
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(maestro): keep the composer's one-row layout

Browse Source 
Reverts the stacked control strip from f78aa13. The floating card is still
gone — flush band, one hairline against the transcript that doubles as the
focus indicator — but the composer keeps its own `--surface` fill so it
still reads as distinct from the pane, and the draft, gear and Send stay on
one bottom-aligned row.

At phone width that row cannot hold a draft plus three controls, so it
wraps: the draft takes a full line and the controls drop below it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Miguel Palhas
2026-09-07 10:23:15 +01:00
co-authored by Claude Opus 5
parent f78aa13b36
commit b4d4b0712c
2 changed files with 46 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/structured.ts
+9 -11
View File
@@ -97,19 +97,17 @@ export function createStructuredConnection(
autocomplete="off" aria-autocomplete="list" aria-expanded="false"
aria-controls="structured-command-menu-${sessionId}"></textarea>
</div>
<div class="structured-actions">
<div class="structured-config" hidden>
<button type="button" class="structured-config-trigger" aria-haspopup="true"
aria-expanded="false" aria-label="Session settings" title="Session settings">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h10M18 7h2M4 17h2M10 17h10M14 4v6M6 14v6"/></svg>
</button>
<div class="structured-config-menu" role="group" aria-label="Session settings" hidden></div>
</div>
<button type="button" class="btn structured-cancel" hidden>Cancel turn</button>
<button type="submit" class="btn btn-primary structured-send"><span>Send</span>
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="m7 5 5 5-5 5M12 10H3"/></svg>
<div class="structured-config" hidden>
<button type="button" class="structured-config-trigger" aria-haspopup="true"
aria-expanded="false" aria-label="Session settings" title="Session settings">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h10M18 7h2M4 17h2M10 17h10M14 4v6M6 14v6"/></svg>
</button>
<div class="structured-config-menu" role="group" aria-label="Session settings" hidden></div>
</div>
<button type="submit" class="btn btn-primary structured-send"><span>Send</span>
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="m7 5 5 5-5 5M12 10H3"/></svg>
</button>
<button type="button" class="btn structured-cancel" hidden>Cancel turn</button>
</form>
</div>
</div>
web/src/styles.css
+37 -45
View File
@@ -2176,14 +2176,12 @@ input.leaf-rename:focus {
.structured-config {
position: relative;
flex: 0 0 32px;
width: 32px;
height: 32px;
flex: 0 0 40px;
}
.structured-config-trigger {
width: 100%;
height: 100%;
width: 40px;
height: 40px;
display: inline-flex;
justify-content: center;
align-items: center;
@@ -2221,7 +2219,7 @@ input.leaf-rename:focus {
position: absolute;
z-index: 20;
bottom: calc(100% + var(--sp-2));
left: 0;
right: 0;
width: min(320px, 86vw);
padding: var(--sp-2);
border: 1px solid var(--border-strong);
@@ -3065,18 +3063,18 @@ input.leaf-rename:focus {
/* The composer is a sibling of the scrolling transcript, not part of it: it
stays reachable at the pane edge without changing transcript scroll math.
It is a flush band at the foot of the pane rather than a floating card —
one hairline separates it from the transcript, and that hairline is also
the focus indicator. Input and controls stack, so the send button keeps a
fixed place at the composer's foot however tall the draft grows. */
It is a flush band at the foot of the pane rather than a floating card: its
own `--surface` fill is what separates it from the transcript, over a
hairline that doubles as the focus indicator. Inner metrics line the draft
up with the transcript's own 12px gutter. */
.structured-composer {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: var(--sp-1);
padding: var(--sp-2) var(--sp-3) max(var(--sp-2), env(safe-area-inset-bottom));
padding: var(--sp-1) var(--sp-1) max(var(--sp-1), env(safe-area-inset-bottom));
border-top: 1px solid var(--border);
background: var(--bg);
background: var(--surface);
display: flex;
align-items: flex-end;
gap: var(--sp-1);
transition: border-color var(--dur-fast) var(--ease-out);
}
@@ -3086,6 +3084,7 @@ input.leaf-rename:focus {
.structured-input-wrap {
position: relative;
flex: 1 1 auto;
min-width: 0;
}
@@ -3094,11 +3093,12 @@ input.leaf-rename:focus {
width: 100%;
min-width: 0;
max-height: 160px;
min-height: 20px;
min-height: 40px;
resize: none;
overflow-y: hidden;
padding: 0;
padding: 10px var(--sp-2);
border: 0;
border-radius: var(--r-2);
background: transparent;
color: var(--ink);
font-size: var(--fs-13);
@@ -3109,25 +3109,12 @@ input.leaf-rename:focus {
outline: none;
}
.structured-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--sp-1);
min-height: 32px;
}
.structured-actions .structured-config {
margin-right: auto;
}
.structured-composer .structured-send,
.structured-composer .structured-cancel {
height: 32px;
min-height: 32px;
height: 40px;
min-height: 40px;
border-radius: var(--r-2);
font-family: var(--font-sans);
font-size: var(--fs-12);
}
.structured-composer .structured-send {
@@ -3148,8 +3135,8 @@ input.leaf-rename:focus {
}
.structured-composer .structured-send svg {
width: 15px;
height: 15px;
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
@@ -3179,21 +3166,26 @@ input.leaf-rename:focus {
}
@media (max-width: 520px) {
.structured-composer .structured-send,
.structured-composer .structured-cancel {
height: var(--tap);
min-height: var(--tap);
font-size: var(--fs-13);
/* One row cannot hold a draft plus three controls at phone width — the
draft gets a line of its own and the controls drop below it. */
.structured-composer {
flex-wrap: wrap;
justify-content: flex-end;
padding-left: var(--sp-2);
padding-right: var(--sp-2);
}
.structured-actions {
min-height: var(--tap);
.structured-input-wrap {
flex: 1 1 100%;
}
.structured-config,
.structured-config-trigger {
width: var(--tap);
height: var(--tap);
.structured-composer .structured-config {
margin-right: auto;
}
.structured-config-menu {
left: 0;
right: auto;
}
}