Merge branch 'master' into feat/web-diff-card

apps/web/tests/queue-actions.e2e.ts

@@ -96,6 +96,26 @@ describe('web e2e: queue row actions', () => {
       { timeout: 10_000 },
     ).toBe(2)
 
+    await page.setViewportSize({ width: 640, height: 1000 })
+    const queueBox = await page.locator('[data-queue-dock]').boundingBox()
+    const composerBox = await page.locator('[data-composer-card]').boundingBox()
+    expect(queueBox).not.toBeNull()
+    expect(composerBox).not.toBeNull()
+    expect(queueBox!.x).toBeGreaterThanOrEqual(composerBox!.x)
+    expect(queueBox!.x + queueBox!.width)
+      .toBeLessThanOrEqual(composerBox!.x + composerBox!.width)
+    const queueLeftInset = queueBox!.x - composerBox!.x
+    const queueRightInset = composerBox!.x + composerBox!.width - queueBox!.x - queueBox!.width
+    const composerMetrics = await page.locator('[data-composer-card]').evaluate((element) => {
+      const style = getComputedStyle(element)
+      return {
+        dockInset: Number.parseFloat(style.getPropertyValue('--dsh-composer-dock-inset')),
+      }
+    })
+    expect(queueLeftInset).toBeCloseTo(composerMetrics.dockInset, 1)
+    expect(queueRightInset).toBeCloseTo(composerMetrics.dockInset, 1)
+    await page.setViewportSize({ width: 1680, height: 1000 })
+
     const editRow = page.getByText(EDIT, { exact: true }).locator('..')
     await editRow.getByRole('button', { name: 'Edit queued message' }).click()
     const editor = page.getByRole('textbox', { name: 'Edit queued message' })

packages/client/ui-conversation/src/client/queue/QueueDock.module.css

@@ -1,10 +1,21 @@
-/* Figma .FileContainerText 1:791: 776px wrapper around the inset 752px panel. */
+/* Figma .FileContainerText 1:791: the wrapper uses the shared dock inset
+   inside the composer card around the inset panel. */
 
 .dock {
   box-sizing: border-box;
   flex: none;
-  width: 100%;
-  max-width: 776px;
+  width: calc(
+    100% -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
+  max-width: calc(
+    var(--dsh-composer-card-max-width) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
   /* Flex gap still applies after this item; subtract it together with the
      design's overlap so the later composer paints over the queue edge. */
   margin: 0 auto calc(

packages/client/ui-conversation/src/client/queue/QueueDock.tsx

@@ -73,7 +73,7 @@ export function QueueDock({ useSession, updateQueue, notify, t }: QueueDockProps
   }
 
   return (
-    <div className={css.dock}>
+    <div className={css.dock} data-queue-dock="">
       <div className={css.panel}>
         {queue.length > 1 && (
           <button

packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css

@@ -133,6 +133,12 @@
   --dsh-composer-stack-gap: 6px;
   --dsh-queue-composer-overlap: 5px;
 
+  /* InputBar and dock registrants derive their horizontal geometry from the
+     same card width, outer clearance, and dock inset. */
+  --dsh-composer-card-max-width: 800px;
+  --dsh-composer-side-clearance: 32px;
+  --dsh-composer-dock-inset: 12px;
+
   display: flex;
   flex-direction: column;
   gap: var(--dsh-composer-stack-gap);

packages/client/ui-conversation/src/client/skeleton/HeroShell.module.css

@@ -11,7 +11,7 @@
   padding: 0 24px;
 }
 
-/* Cap matches InputBar card width (800). Glow may paint past the sides. */
+/* Cap matches the InputBar card. Glow may paint past the sides. */
 .stack {
   display: flex;
   flex-direction: column;
@@ -19,7 +19,7 @@
   /* figma 75:8208: 12 between title block / workspace / card. */
   gap: 12px;
   width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
   overflow: visible;
 }
 

packages/client/ui-conversation/src/client/skeleton/InputBar.module.css

@@ -23,7 +23,7 @@
   /* figma Input_Bottom: pad L32/R32/B8; the bottom gradient mask is owned by
      the chat scroller. No top pad: the composer stack's gap owns the space
      above; error/status strips still carry their own margin. */
-  padding: 0 32px 8px;
+  padding: 0 var(--dsh-composer-side-clearance) 8px;
 }
 
 .hero {
@@ -33,7 +33,7 @@
 .error,
 .status {
   width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
   margin-bottom: 6px;
   padding: 4px 8px;
   border-radius: 8px;
@@ -48,7 +48,7 @@
 
 .notice {
   width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
   margin-bottom: 6px;
   padding: 4px 8px;
   border-radius: 8px;
@@ -69,6 +69,7 @@
 }
 
 .card {
+  box-sizing: border-box;
   position: relative; /* overlay anchor positioning context */
   display: flex;
   flex-direction: column;
@@ -76,7 +77,7 @@
      top pad on the card before .InputText. */
   gap: 12px;
   width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
   padding-top: 10px;
   /* Input stroke: black/0.10 light, white/0.06 dark (figma darkmode note says
      the input border is one notch weaker than buttons) — exactly the

packages/client/ui-conversation/src/client/skeleton/TodoPanel.module.css

@@ -1,13 +1,24 @@
 /* Todo strip in the composer context stack (Figma 9:959): tip surface,
-   14px radius, status icons + secondary item labels. */
+   14px radius, status icons + secondary item labels. It shares the composer
+   card geometry and adds the dock inset on both sides. */
 
 .root {
   box-sizing: border-box;
   flex: none;
   overflow: hidden;
   margin: 0 auto;
-  width: calc(100% - 88px);
-  max-width: 752px;
+  width: calc(
+    100% -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
+  max-width: calc(
+    var(--dsh-composer-card-max-width) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
   border: 1px solid var(--dsw-alias-border-l1);
   border-radius: 14px;
   background: var(--dsw-specific-tip);