fix(web): adapt session launcher cards to narrow panes

Author: pallyoung

packages/web/src/styles/components.css

@@ -4694,12 +4694,14 @@ textarea.input {
 }
 
 .agent-draft-launcher {
+  container-type: inline-size;
   background:
     radial-gradient(circle at center, rgba(108, 182, 255, 0.08), transparent 30%), transparent;
 }
 
 .agent-draft-content {
   width: min(680px, calc(100% - 48px));
+  max-width: 100%;
   align-items: stretch;
   gap: var(--sp-4);
   padding: var(--sp-8) var(--sp-6);
@@ -4735,6 +4737,7 @@ textarea.input {
 
 .agent-provider-card {
   height: auto;
+  min-width: 0;
   align-items: flex-start;
   justify-content: flex-start;
   padding: var(--sp-4);
@@ -4777,6 +4780,7 @@ textarea.input {
 .agent-provider-card-body {
   display: flex;
   flex-direction: column;
+  width: 100%;
   gap: 6px;
   min-width: 0;
 }
@@ -4846,6 +4850,18 @@ textarea.input {
   margin-left: auto;
   align-self: center;
   color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+
+@container (max-width: 36rem) {
+  .agent-draft-content {
+    width: 100%;
+    padding-inline: var(--sp-4);
+  }
+
+  .agent-draft-providers {
+    grid-template-columns: 1fr;
+  }
 }
 
 .session-card {

packages/web/src/styles/components.theme.test.ts

@@ -154,6 +154,23 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(stylesheet).not.toContain("\n.agent-provider-card[disabled] {\n");
   });
 
+  it("keeps draft launcher provider cards adaptive inside narrow panes", () => {
+    const launcher = getLastRuleBlock(".agent-draft-launcher");
+    const content = getLastRuleBlock(".agent-draft-content");
+    const providerCard = getLastRuleBlock(".agent-provider-card");
+    const providerBody = getLastRuleBlock(".agent-provider-card-body");
+    const providerArrow = getLastRuleBlock(".agent-provider-card-arrow");
+
+    expect(launcher).toContain("container-type: inline-size");
+    expect(content).toContain("max-width: 100%");
+    expect(providerCard).toContain("min-width: 0");
+    expect(providerBody).toContain("width: 100%");
+    expect(providerArrow).toContain("flex-shrink: 0");
+    expect(stylesheet).toMatch(
+      /@container\s*\(max-width:\s*36rem\)\s*\{[\s\S]*?\.agent-draft-providers\s*\{[\s\S]*?grid-template-columns:\s*1fr;[\s\S]*?\}/
+    );
+  });
+
   it("keeps mobile sheet bodies as flex columns so sheet content can fill the viewport", () => {
     const sheetBody = getLastRuleBlock(".mobile-sheet__body");
     const sheetBodyChildren = getLastRuleBlock(".mobile-sheet__body > *");