fix(react-ui): align conversation starters with composer

packages/react-ui/src/components/AgentInterface/conversationStarter.scss

@@ -20,13 +20,15 @@
   // Short variant - horizontal pill buttons
   &--short {
     display: block;
+    max-width: 768px;
   }
 
   // Long variant - vertical stacked list
   &--long {
     display: flex;
     flex-direction: column;
     gap: 0;
+    max-width: 768px;
     margin-bottom: cssUtils.$space-m;
   }
 
@@ -53,6 +55,12 @@
   }
 }
 
+.openui-agent-container:not(.openui-agent-container--mobile)
+  .openui-agent-composer-slot
+  > .openui-agent-conversation-starter {
+  width: calc(100% - #{cssUtils.$space-m-l} - #{cssUtils.$space-m-l});
+}
+
 // Short variant item (pill-style buttons)
 .openui-agent-conversation-starter-item-short {
   display: flex;

packages/react-ui/src/components/AgentInterface/stories/AgentInterface.stories.tsx

@@ -217,13 +217,24 @@ export const WithWelcome = {
 
 /** Composer-only starters (no Welcome) — chips above the input. */
 export const ComposerStarters = {
-  render: () => (
+  args: {
+    starterVariant: "short",
+  },
+  argTypes: {
+    starterVariant: {
+      control: "select",
+      options: ["short", "long"],
+      description: "Switch between pill and list-style conversation starters.",
+    },
+  },
+  render: ({ starterVariant }: { starterVariant: "short" | "long" }) => (
     <AgentInterface
       storage={emptyStorage}
       llm={echoLLM}
       logoUrl={logoUrl}
       agentName="OpenUI"
       starters={COMPOSER_STARTERS}
+      starterVariant={starterVariant}
     />
   ),
 };

packages/react-ui/src/components/AgentInterface/welcomeScreen.scss

@@ -124,10 +124,6 @@ $center-align-spacing: calc(32px + cssUtils.$space-s);
     .openui-agent-conversation-starter--short {
       justify-content: center;
     }
-
-    .openui-agent-conversation-starter--long {
-      max-width: 770px;
-    }
   }
 
   // When welcome screen has the desktop composer variant