style(react-ui): adjust max-width and padding for conversation starter component (#810)

* style(react-ui): adjust max-width and padding for conversation starter component

Updated the max-width of the conversation starter to align with the composer box across breakpoints, ensuring proper alignment of pills with the input. Adjusted padding for better spacing consistency.

* style(react-ui): remove outdated comments in conversation starter SCSS

Cleaned up the conversation starter component's SCSS by removing obsolete comments regarding alignment with the composer box, enhancing code clarity and maintainability.

* style(react-ui): track the composer column for conversation starters

Base the starter container on the composer's 768px column instead of the
880px thread column. The chips sit above the input, and once both hit
max-width they center independently — an 880 base left the row starting
56px outside the input's edge on wide screens. With the composer column
the chip row aligns with the input at every desktop width; the narrow-
width gutter fix is unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XECS4NLhz6BNd1TUYbWjfu

---------

Co-authored-by: ankit-thesys <i-ankit@thesys.dev>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: 3 people

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

@@ -3,9 +3,12 @@
 // Container styles
 .openui-agent-conversation-starter {
   width: 100%;
-  max-width: 880px;
+  // Starters sit above the composer input, so track the composer's 768px
+  // column (see components/composer.scss), not the 880px thread column —
+  // otherwise the row starts left of the input once both hit max-width.
+  max-width: calc(768px + cssUtils.$space-m-l * 2);
   margin: 0 auto;
-  padding: 0 0 cssUtils.$space-m;
+  padding: 0 cssUtils.$space-m-l cssUtils.$space-m;
   box-sizing: border-box;
   max-height: 480px;
   overflow: hidden;
@@ -16,7 +19,6 @@
     transform 0.2s ease,
     max-height 0.2s ease,
     padding-bottom 0.2s ease;
-
   // Short variant - horizontal pill buttons
   &--short {
     display: block;