From 77fef603b5e09378b6b0763feb8086aa970a9a35 Mon Sep 17 00:00:00 2001
From: mubashir1osmani <mubashir.osmani777@gmail.com>
Date: Thu, 6 Aug 2026 16:03:46 -0700
Subject: [PATCH] style(ui): size chat suggestions to match the composer width

Use a full-width 3-column grid above the textarea with slightly larger
chip padding and type so prompts stay readable
---
 .../playground/components/chat_ui/ChatComposer.tsx         | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatComposer.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatComposer.tsx
index 46c30cbc777..f4f69bf1f8b 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatComposer.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatComposer.tsx
@@ -50,15 +50,12 @@ export function ChatComposer({
   return (
     <div className={cn("relative flex w-full flex-col gap-3", className)}>
       {showSuggestions && suggestions.length > 0 && (
-        <div
-          className="mx-auto grid w-full max-w-xl grid-cols-3 gap-2"
-          data-testid="chat-suggested-actions"
-        >
+        <div className="grid w-full grid-cols-3 gap-2" data-testid="chat-suggested-actions">
           {suggestions.map((suggestion) => (
             <button
               key={suggestion}
               type="button"
-              className="rounded-lg border border-border/50 bg-card/30 px-2.5 py-2 text-left text-[11px] leading-snug text-muted-foreground transition-all duration-200 hover:-translate-y-0.5 hover:bg-card/60 hover:text-foreground"
+              className="rounded-xl border border-border/50 bg-card/30 px-3 py-2.5 text-left text-[12px] leading-snug text-muted-foreground transition-all duration-200 hover:-translate-y-0.5 hover:bg-card/60 hover:text-foreground"
               onClick={() => onSuggestionSelect?.(suggestion)}
             >
               {suggestion}