diff --git a/web/src/components/ChatControl.tsx b/web/src/components/ChatControl.tsx
index 6aa42e3..61bb3a2 100644
--- a/web/src/components/ChatControl.tsx
+++ b/web/src/components/ChatControl.tsx
@@ -675,7 +675,7 @@ export const ChatControl = ({ profiles, botState, onApplyProfile }: ChatControlP
             </div>
 
             {/* Messages */}
-            <div className="flex-1 overflow-y-auto px-4 py-4 space-y-4" style={{
+            <div className="copilot-body flex-1 overflow-y-auto px-4 py-4 space-y-4" style={{
                 background: 'var(--background)',
                 scrollbarWidth: 'thin',
                 scrollbarColor: 'var(--border) transparent',
@@ -984,33 +984,20 @@ export const ChatControl = ({ profiles, botState, onApplyProfile }: ChatControlP
 
                 {/* Suggested quick actions - shown when only welcome message exists */}
                 {messages.length <= 1 && !isLoading && (
-                    <div className="mt-2">
-                        <p style={{ fontSize: '9px', color: 'var(--muted-foreground)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700, marginBottom: '10px', paddingLeft: '4px' }}>Quick Actions</p>
-                        <div className="grid grid-cols-2 gap-2">
+                    <div className="copilot-quick-actions">
+                        <p className="copilot-quick-actions-label">Quick Actions</p>
+                        <div className="copilot-quick-actions-grid">
                             {quickActions.map((action, i) => (
-                                <Button
+                                <button
                                     type="button"
                                     key={i}
                                     onClick={() => sendMessage(action.prompt)}
-                                    variant="ghost"
-                                    className="text-left px-3.5 py-3 rounded-xl transition-all"
-                                    style={{
-                                        background: 'var(--card)',
-                                        border: '1px solid var(--border)',
-                                        cursor: 'pointer',
-                                    }}
-                                    onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => {
-                                        e.currentTarget.style.borderColor = 'var(--ring)';
-                                        e.currentTarget.style.background = 'var(--accent-soft)';
-                                    }}
-                                    onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => {
-                                        e.currentTarget.style.borderColor = 'var(--border)';
-                                        e.currentTarget.style.background = 'var(--card)';
-                                    }}
+                                    className="copilot-quick-action-card"
+                                    title={action.label}
                                 >
-                                    <span style={{ fontSize: '13px', display: 'block', marginBottom: '3px', color: 'var(--foreground)' }}>{action.label}</span>
-                                    <span style={{ fontSize: '10px', color: 'var(--muted-foreground)', lineHeight: '1.4', display: 'block' }}>{action.prompt.slice(0, 55)}...</span>
-                                </Button>
+                                    <span className="copilot-quick-action-title">{action.label}</span>
+                                    <span className="copilot-quick-action-prompt">{action.prompt}</span>
+                                </button>
                             ))}
                         </div>
                     </div>
diff --git a/web/src/layout-fixes.css b/web/src/layout-fixes.css
index 99c5e4e..fe9ae1a 100644
--- a/web/src/layout-fixes.css
+++ b/web/src/layout-fixes.css
@@ -388,3 +388,108 @@
 
 /* In the bottom-nav mobile state (≤560px), the sidebar becomes a horizontal
  * bar — the existing CSS hides the logo. Don't add anything that fights it. */
+
+/* ============================================================================
+ * 24. AI Trading Copilot modal — Quick Action cards layout
+ *
+ * The original quick actions used grid-cols-2 always, with two stacked
+ * <span style={display:block}> children inside a flex Button — which caused
+ * title/description overlap and overflow at narrow widths.
+ *
+ * New structure: native <button> with proper flex-column, responsive grid,
+ * title (truncate) + prompt (line-clamp-2). No overlap, no overflow.
+ * ============================================================================ */
+.copilot-body {
+  /* Bottom padding ensures the last quick action / message is reachable
+   * above the composer input. */
+  padding-bottom: 16px;
+  min-width: 0;
+}
+
+.copilot-quick-actions {
+  margin-top: 8px;
+  min-width: 0;
+}
+
+.copilot-quick-actions-label {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--muted-foreground);
+  margin: 0 0 10px 4px;
+}
+
+.copilot-quick-actions-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+  min-width: 0;
+}
+
+@media (min-width: 480px) {
+  .copilot-quick-actions-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.copilot-quick-action-card {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  text-align: left;
+  gap: 4px;
+  min-width: 0;
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--card);
+  color: var(--foreground);
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
+  font-family: inherit;
+  /* Keep full card height predictable so they line up in the grid */
+  min-height: 64px;
+  box-sizing: border-box;
+}
+
+.copilot-quick-action-card:hover {
+  border-color: var(--ring);
+  background: var(--accent-soft);
+}
+
+.copilot-quick-action-card:active {
+  transform: translateY(1px);
+}
+
+.copilot-quick-action-card:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+.copilot-quick-action-title {
+  display: block;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--foreground);
+  line-height: 1.2;
+  /* Truncate to a single line — full text is in title attribute */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.copilot-quick-action-prompt {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: 11px;
+  color: var(--muted-foreground);
+  line-height: 1.4;
+  min-width: 0;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}