From a4cc28055005c80596aa0928382564c3126f56f0 Mon Sep 17 00:00:00 2001
From: I Luk Kim <yirugi@gmail.com>
Date: Sun, 12 Apr 2026 19:13:57 -0700
Subject: [PATCH] Fix Strategies page layout for narrow windows and remove
 alias chips

- Remove alias chips next to strategy names
- Use clamp() for responsive padding
- Add flex-wrap to header so title/buttons wrap on narrow screens
- Add flexShrink:0 to button group
- Use min() for search input width

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/web_frontend/src/pages/Experiments.tsx | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/apps/web_frontend/src/pages/Experiments.tsx b/apps/web_frontend/src/pages/Experiments.tsx
index 925c066..f29f790 100644
--- a/apps/web_frontend/src/pages/Experiments.tsx
+++ b/apps/web_frontend/src/pages/Experiments.tsx
@@ -62,16 +62,6 @@ function ExpRow({
           <span style={{ fontFamily: 'var(--font-mono)', fontSize: 15, color: 'var(--text1)' }}>
             {exp.name}
           </span>
-          {exp.aliases?.map(a => (
-            <span key={a} style={{
-              fontSize: 12, fontFamily: 'var(--font-mono)',
-              background: 'var(--purple-dim)', color: 'var(--purple)',
-              border: '1px solid rgba(124,58,237,0.18)',
-              padding: '1px 6px', borderRadius: 4, letterSpacing: '0.03em',
-            }}>
-              {a}
-            </span>
-          ))}
         </div>
       </td>
       <td style={{ padding: '10px 12px', cursor: 'pointer' }} onClick={onClick}>
@@ -312,16 +302,16 @@ export function ExperimentsPage() {
   };
 
   return (
-    <div style={{ padding: '36px 40px' }} className="fade-up">
+    <div style={{ padding: 'clamp(16px, 4vw, 36px) clamp(12px, 4vw, 40px)' }} className="fade-up">
       {/* Header */}
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
+      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 24, gap: 12, flexWrap: 'wrap' }}>
         <div>
           <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.10em', color: 'var(--text3)', textTransform: 'uppercase', marginBottom: 5 }}>
             {data ? `${data.total} total` : ''}
           </div>
           <h1 style={{ fontSize: 28, fontWeight: 700, color: 'var(--text1)', letterSpacing: '-0.02em' }}>Strategies</h1>
         </div>
-        <div style={{ display: 'flex', gap: 8 }}>
+        <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
           <button
             onClick={() => navigate('/experiments/compose')}
             style={{
@@ -361,7 +351,7 @@ export function ExperimentsPage() {
             placeholder="Search strategies..."
             value={search}
             onChange={e => setSearch(e.target.value)}
-            style={{ paddingLeft: 34, paddingRight: search ? 28 : 10, width: 240 }}
+            style={{ paddingLeft: 34, paddingRight: search ? 28 : 10, width: 'min(240px, 100%)' }}
           />
           {search && (
             <button