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>
main
I Luk Kim 4 months ago
parent 426de9038d
commit a4cc280550

@ -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

Loading…
Cancel
Save