Skip to content

Commit c88eb08

Browse files
amirhkclaude
amirhk
and
claude
committed
ui: tighten demo spacing, embed method toggles in radar chart
Reduce vertical padding/gaps throughout the interactive demo (section padding, control blocks, toggle list, math panel). Move BenchRadar method toggle buttons from the sidebar into the chart card as compact pill chips below the radar; sidebar now shows only the metric guide, and the chart column is wider. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 5402643 commit c88eb08

2 files changed

Lines changed: 58 additions & 56 deletions

File tree

‎src/components/BenchRadar.jsx‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useState } from 'react';
22
import {
33
RadarChart, Radar, PolarGrid, PolarAngleAxis,
4-
PolarRadiusAxis, Tooltip, ResponsiveContainer, Legend,
4+
PolarRadiusAxis, Tooltip, ResponsiveContainer,
55
} from 'recharts';
66

77
// Normalised scores 0-100 across 5 axes (higher = better on all)
@@ -94,8 +94,9 @@ export default function BenchRadar() {
9494
</div>
9595

9696
<div className="bench-layout">
97+
{/* ── Chart card with embedded method toggles ── */}
9798
<div className="bench-chart-wrap">
98-
<ResponsiveContainer width="100%" height={380}>
99+
<ResponsiveContainer width="100%" height={360}>
99100
<RadarChart data={BENCH_DATA} outerRadius="72%">
100101
<PolarGrid stroke="#ded7cb" />
101102
<PolarAngleAxis
@@ -119,35 +120,33 @@ export default function BenchRadar() {
119120
/>
120121
))}
121122
<Tooltip content={<CustomTooltip />} />
122-
<Legend
123-
wrapperStyle={{ display: 'none' }} // we render our own
124-
/>
125123
</RadarChart>
126124
</ResponsiveContainer>
127-
</div>
128125

129-
<div className="bench-sidebar">
130-
<p className="demo-block-label" style={{ marginBottom: '1rem' }}>Toggle methods</p>
131-
<div className="bench-method-list">
126+
{/* Method toggle chips — embedded in chart card */}
127+
<div className="bench-method-chips">
132128
{METHODS.map(m => {
133129
const on = active.has(m.key);
134130
return (
135131
<button
136132
key={m.key}
137133
type="button"
138-
className={`bench-method-btn${on ? ' active' : ''}`}
139-
style={{ '--mc': m.color, '--ms': `${m.color}22` }}
134+
className={`bench-method-chip${on ? ' active' : ''}`}
135+
style={{ '--mc': m.color }}
140136
onClick={() => toggle(m.key)}
141137
>
142-
<span className="bench-method-dot" style={{ background: on ? m.color : '#ded7cb' }} />
138+
<span className="bench-method-dot" style={{ background: on ? m.color : '#cfc4b4' }} />
143139
{m.label}
144140
</button>
145141
);
146142
})}
147143
</div>
144+
</div>
148145

149-
<div className="bench-metric-legend">
150-
<p className="demo-block-label" style={{ marginBottom: '0.75rem' }}>Metric guide</p>
146+
{/* ── Sidebar: metric guide only ── */}
147+
<div className="bench-sidebar">
148+
<p className="demo-block-label" style={{ marginBottom: '0.75rem' }}>Metric guide</p>
149+
<div className="bench-metric-legend" style={{ borderTop: 'none', paddingTop: 0 }}>
151150
{Object.entries(METRIC_NOTES).map(([k, v]) => (
152151
<div key={k} className="bench-metric-row">
153152
<span className="bench-metric-name">{k}</span>

‎src/index.css‎

Lines changed: 45 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -96,14 +96,14 @@ select { font-family: inherit; }
9696

9797
.section-heading {
9898
max-width: 720px;
99-
margin-bottom: 2rem;
99+
margin-bottom: 1.5rem;
100100
}
101101

102102
.section-heading h2 {
103103
font-size: clamp(2rem, 3.4vw, 3.1rem);
104104
line-height: 1.05;
105105
letter-spacing: -0.04em;
106-
margin-bottom: 0.9rem;
106+
margin-bottom: 0.6rem;
107107
}
108108

109109
.section-heading p {
@@ -516,14 +516,14 @@ select { font-family: inherit; }
516516
INTERACTIVE DEMO
517517
══════════════════════════════════════════════════════════════ */
518518
.demo-section {
519-
padding-top: 4.5rem;
519+
padding-top: 3rem;
520520
padding-bottom: 1rem;
521521
}
522522

523523
.demo-layout {
524524
display: grid;
525525
grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
526-
gap: 1.5rem;
526+
gap: 1.25rem;
527527
align-items: start;
528528
}
529529

@@ -533,20 +533,20 @@ select { font-family: inherit; }
533533
border: 1px solid var(--line);
534534
box-shadow: var(--shadow);
535535
overflow: hidden;
536-
padding: 0.75rem;
536+
padding: 0.6rem;
537537
}
538538

539539
.demo-controls {
540540
display: flex;
541541
flex-direction: column;
542-
gap: 1rem;
542+
gap: 0.65rem;
543543
}
544544

545545
.demo-control-block {
546546
background: rgba(255, 253, 249, 0.92);
547547
border: 1px solid var(--line);
548548
border-radius: 20px;
549-
padding: 1.1rem 1.2rem;
549+
padding: 0.85rem 1rem;
550550
}
551551

552552
.demo-block-label {
@@ -555,7 +555,7 @@ select { font-family: inherit; }
555555
letter-spacing: 0.1em;
556556
text-transform: uppercase;
557557
color: var(--muted);
558-
margin-bottom: 0.75rem;
558+
margin-bottom: 0.5rem;
559559
}
560560

561561
.demo-block-sub {
@@ -601,15 +601,15 @@ select { font-family: inherit; }
601601
.demo-action-list {
602602
display: flex;
603603
flex-direction: column;
604-
gap: 0.5rem;
604+
gap: 0.38rem;
605605
}
606606

607607
.demo-action {
608608
display: flex;
609609
align-items: center;
610610
gap: 0.6rem;
611611
width: 100%;
612-
padding: 0.6rem 0.8rem;
612+
padding: 0.5rem 0.7rem;
613613
border-radius: 12px;
614614
border: 1.5px solid var(--line);
615615
background: transparent;
@@ -655,7 +655,7 @@ select { font-family: inherit; }
655655
.demo-toggle-list {
656656
display: flex;
657657
flex-direction: column;
658-
gap: 0.65rem;
658+
gap: 0.5rem;
659659
}
660660

661661
.demo-toggle {
@@ -726,12 +726,12 @@ select { font-family: inherit; }
726726
/* Math formulation */
727727
.demo-math {
728728
font-family: 'Georgia', 'Times New Roman', serif;
729-
font-size: 0.88rem;
730-
line-height: 1.9;
729+
font-size: 0.86rem;
730+
line-height: 1.8;
731731
color: var(--text);
732732
background: var(--bg);
733733
border-radius: 10px;
734-
padding: 0.9rem 1rem;
734+
padding: 0.7rem 0.9rem;
735735
border: 1px solid var(--line);
736736
}
737737

@@ -1022,8 +1022,8 @@ select { font-family: inherit; }
10221022

10231023
.bench-layout {
10241024
display: grid;
1025-
grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
1026-
gap: 1.5rem;
1025+
grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.45fr);
1026+
gap: 1.25rem;
10271027
align-items: start;
10281028
}
10291029

@@ -1032,55 +1032,57 @@ select { font-family: inherit; }
10321032
border: 1px solid var(--line);
10331033
border-radius: 24px;
10341034
box-shadow: var(--shadow);
1035-
padding: 1rem 0.5rem 0.5rem;
1035+
padding: 1rem 0.5rem 0.85rem;
10361036
}
10371037

1038-
.bench-sidebar {
1039-
background: rgba(255, 253, 249, 0.92);
1040-
border: 1px solid var(--line);
1041-
border-radius: 24px;
1042-
box-shadow: var(--shadow);
1043-
padding: 1.3rem 1.3rem;
1044-
}
1045-
1046-
.bench-method-list {
1038+
/* Method toggle chips inside the chart card */
1039+
.bench-method-chips {
10471040
display: flex;
1048-
flex-direction: column;
1049-
gap: 0.5rem;
1050-
margin-bottom: 1.4rem;
1041+
flex-wrap: wrap;
1042+
gap: 0.45rem;
1043+
justify-content: center;
1044+
padding: 0 1rem 0.15rem;
10511045
}
10521046

1053-
.bench-method-btn {
1054-
display: flex;
1047+
.bench-method-chip {
1048+
display: inline-flex;
10551049
align-items: center;
1056-
gap: 0.6rem;
1057-
width: 100%;
1058-
padding: 0.55rem 0.8rem;
1059-
border-radius: 10px;
1050+
gap: 0.4rem;
1051+
padding: 0.32rem 0.7rem;
1052+
border-radius: 999px;
10601053
border: 1.5px solid var(--line);
10611054
background: transparent;
10621055
font-family: inherit;
1063-
font-size: 0.82rem;
1056+
font-size: 0.75rem;
10641057
font-weight: 700;
10651058
color: var(--muted);
10661059
cursor: pointer;
10671060
transition: all 0.18s;
1061+
white-space: nowrap;
10681062
}
10691063

1070-
.bench-method-btn.active {
1064+
.bench-method-chip.active {
10711065
border-color: var(--mc, #2453a6);
1072-
background: var(--ms, #dbe7ff22);
1073-
color: var(--text);
1066+
color: var(--mc, #2453a6);
1067+
background: color-mix(in srgb, var(--mc, #2453a6) 8%, transparent);
10741068
}
10751069

10761070
.bench-method-dot {
1077-
width: 9px;
1078-
height: 9px;
1071+
width: 7px;
1072+
height: 7px;
10791073
border-radius: 50%;
10801074
flex-shrink: 0;
10811075
transition: background 0.2s;
10821076
}
10831077

1078+
.bench-sidebar {
1079+
background: rgba(255, 253, 249, 0.92);
1080+
border: 1px solid var(--line);
1081+
border-radius: 24px;
1082+
box-shadow: var(--shadow);
1083+
padding: 1.2rem 1.2rem;
1084+
}
1085+
10841086
.bench-metric-legend {
10851087
border-top: 1px solid var(--line);
10861088
padding-top: 1.1rem;
@@ -1118,7 +1120,8 @@ select { font-family: inherit; }
11181120
@media (max-width: 1024px) {
11191121
.hero-grid { grid-template-columns: 1fr; }
11201122
.hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
1121-
.demo-layout, .bench-layout { grid-template-columns: 1fr; }
1123+
.demo-layout { grid-template-columns: 1fr; }
1124+
.bench-layout { grid-template-columns: 1fr; }
11221125
.why-boxes { grid-template-columns: 1fr; }
11231126
.ideas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
11241127
.bench-section-header { flex-direction: column; align-items: flex-start; gap: 1rem; }

0 commit comments

Comments
 (0)