1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Cramped Padding — Should Flag vs Should Pass</title>
7 <style>
8 /* Comprehensive fixture for the cramped-padding rule.
9 Both columns include a wide variety of cases so we can verify the
10 rule scales sensibly with font-size and treats the two axes
11 independently (vertical can be tighter because line-height already
12 provides built-in breathing room; horizontal has no equivalent). */
13 body { font-family: system-ui, sans-serif; background: #fafafa; padding: 24px; margin: 0; color: #0f172a; line-height: 1.5; }
14 .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1400px; margin: 0 auto; }
15 .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }
16 .col h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; margin: 28px 0 10px; color: #64748b; }
17 .case { margin-bottom: 14px; padding: 14px 16px; background: white; border: 1px solid #e2e8f0; border-radius: 10px; }
18 .case-label { display: block; font-size: 12px; color: #64748b; margin-bottom: 8px; font-style: italic; }
19
20 /* ── FLAG: cramped body in cards ── */
21 .flag-card-4 { padding: 4px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; }
22 .flag-card-2 { padding: 2px; background: #f1f5f9; border-radius: 6px; font-size: 14px; }
23 .flag-card-bg4 { padding: 4px; background: #fef3c7; border-radius: 6px; font-size: 16px; }
24
25 /* ── FLAG: asymmetric cramping ── */
26 .flag-asym-v { padding: 1px 16px; background: #f1f5f9; border-radius: 6px; font-size: 14px; }
27 .flag-asym-h { padding: 12px 4px; background: #f1f5f9; border-radius: 6px; font-size: 14px; }
28
29 /* ── FLAG: cramped large text (currently MISSED by the 8px floor) ── */
30 .flag-heading-tight { padding: 8px; background: #f1f5f9; border-radius: 6px; font-size: 24px; font-weight: 600; line-height: 1.2; }
31 .flag-hero-tight { padding: 6px 16px; background: #f1f5f9; border-radius: 6px; font-size: 32px; font-weight: 700; line-height: 1.2; }
32
33 /* ── FLAG: cramped multi-line code block ── */
34 .flag-pre-tight { padding: 2px; background: #1e293b; color: #e2e8f0; border-radius: 6px; font-family: ui-monospace, monospace; font-size: 14px; line-height: 1.5; }
35
36 /* ── PASS: small inline pills (the .detection-cmd category) ── */
37 .pass-cmd {
38 display: inline-block;
39 font-family: ui-monospace, SFMono-Regular, monospace;
40 font-size: 13px;
41 line-height: 1.625;
42 color: #0f172a;
43 background: #f5f5f7;
44 padding: 6px 14px;
45 border-radius: 6px;
46 white-space: nowrap;
47 }
48 .pass-cmd::before { content: '➜ '; color: #ec4899; }
49 .pass-badge {
50 display: inline-block;
51 font-size: 11px;
52 line-height: 1.6;
53 padding: 4px 8px;
54 background: #dbeafe;
55 color: #1e40af;
56 border-radius: 999px;
57 font-weight: 600;
58 }
59 .pass-chip {
60 display: inline-block;
61 font-size: 12px;
62 line-height: 1.6;
63 padding: 4px 10px;
64 background: #fef3c7;
65 color: #92400e;
66 border-radius: 4px;
67 font-weight: 500;
68 }
69
70 /* ── PASS: cards at current standards ── */
71 .pass-card-min { padding: 8px; background: #f1f5f9; border-radius: 6px; font-size: 16px; line-height: 1.6; }
72 .pass-card-good { padding: 16px; background: #f1f5f9; border-radius: 8px; font-size: 14px; line-height: 1.6; }
73 .pass-card-large { padding: 12px; background: #f1f5f9; border-radius: 8px; font-size: 18px; line-height: 1.6; }
74
75 /* ── PASS: comfortable code blocks ── */
76 .pass-pre-min { padding: 8px; background: #1e293b; color: #e2e8f0; border-radius: 6px; font-family: ui-monospace, monospace; font-size: 14px; line-height: 1.5; }
77 .pass-pre-good { padding: 12px; background: #1e293b; color: #e2e8f0; border-radius: 6px; font-family: ui-monospace, monospace; font-size: 14px; line-height: 1.5; }
78
79 /* ── PASS: interactive elements ── */
80 .pass-button-std { padding: 8px 16px; background: #3b82f6; color: white; border: 0; border-radius: 6px; font-size: 14px; cursor: pointer; }
81 .pass-input-std { padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 16px; width: 100%; box-sizing: border-box; }
82
83 /* ── PASS: big text with proportional padding ── */
84 .pass-heading-good { padding: 16px; background: #f1f5f9; border-radius: 8px; font-size: 24px; font-weight: 600; line-height: 1.2; }
85 .pass-hero-good { padding: 20px 32px; background: #f1f5f9; border-radius: 8px; font-size: 32px; font-weight: 700; line-height: 1.2; }
86 </style>
87</head>
88<body>
89 <div class="grid">
90
91 <!-- ════════════════════════════════════════════════════════════
92 LEFT COLUMN: should flag
93 ═══════════════════════════════════════════════════════════ -->
94 <div class="col" data-col="flag">
95 <h2>Should flag</h2>
96
97 <h3>Cramped body in cards</h3>
98 <div class="case">
99 <span class="case-label">14px body, 4px padding all sides</span>
100 <div class="flag-card-4">This text is crammed against the border with only 4px padding. It feels claustrophobic and hard to read because the eye has nowhere to rest.</div>
101 </div>
102 <div class="case">
103 <span class="case-label">14px body, 2px padding all sides</span>
104 <div class="flag-card-2">Two pixels of padding is essentially nothing — body text needs room to breathe inside its container, especially across multiple lines.</div>
105 </div>
106 <div class="case">
107 <span class="case-label">16px body, 4px padding, background only</span>
108 <div class="flag-card-bg4">A colored background containment with only 4px padding around 16px body text. The colored edge feels like it's pressing in.</div>
109 </div>
110
111 <h3>Asymmetric cramping</h3>
112 <div class="case">
113 <span class="case-label">1px vertical / 16px horizontal, 14px body</span>
114 <div class="flag-asym-v">Generous horizontal padding doesn't save you when the vertical padding is just one pixel. Lines stack on top of each other against the container edge.</div>
115 </div>
116 <div class="case">
117 <span class="case-label">12px vertical / 4px horizontal, 14px body</span>
118 <div class="flag-asym-h">Comfortable vertical padding can't fix horizontal text running right up against the side edges. Words feel like they're falling off the container.</div>
119 </div>
120
121 <h3>Currently missed: cramped large text</h3>
122 <div class="case">
123 <span class="case-label">24px heading, 8px padding (passes the 8px floor but is too tight for the text size)</span>
124 <div class="flag-heading-tight">Tight Heading Container Label</div>
125 </div>
126 <div class="case">
127 <span class="case-label">32px hero, 6px vertical / 16px horizontal padding</span>
128 <div class="flag-hero-tight">Hero Section With Tight Vertical Padding</div>
129 </div>
130
131 <h3>Cramped multi-line code block</h3>
132 <div class="case">
133 <span class="case-label"><pre>, 2px padding, 14px monospace</span>
134 <pre class="flag-pre-tight">function example() {
135 const value = "cramped";
136 return value;
137}</pre>
138 </div>
139 </div>
140
141 <!-- ════════════════════════════════════════════════════════════
142 RIGHT COLUMN: should pass
143 ═══════════════════════════════════════════════════════════ -->
144 <div class="col" data-col="pass">
145 <h2>Should pass</h2>
146
147 <h3>Small inline pills</h3>
148 <div class="case">
149 <span class="case-label">.detection-cmd replica: 13px font, 6px / 14px padding (the homepage case)</span>
150 <code class="pass-cmd">npx impeccable detect src/</code>
151 </div>
152 <div class="case">
153 <span class="case-label">small badge: 11px font, 4px / 8px padding</span>
154 <span class="pass-badge">FEATURED ITEM BADGE</span>
155 </div>
156 <div class="case">
157 <span class="case-label">tag chip: 12px font, 4px / 10px padding</span>
158 <span class="pass-chip">design system tag chip</span>
159 </div>
160
161 <h3>Cards at current standards</h3>
162 <div class="case">
163 <span class="case-label">16px body, 8px padding (the original 8px floor)</span>
164 <div class="pass-card-min">Standard card with 8px padding around 16px body text. Comfortable and within current conventions.</div>
165 </div>
166 <div class="case">
167 <span class="case-label">14px body, 16px padding (generous)</span>
168 <div class="pass-card-good">Generous 16px padding around 14px body text. The eye has plenty of room from the container edge.</div>
169 </div>
170 <div class="case">
171 <span class="case-label">18px body, 12px padding (proportional)</span>
172 <div class="pass-card-large">Larger body text gets proportionally more padding. 12px around 18px text feels balanced.</div>
173 </div>
174
175 <h3>Comfortable code blocks</h3>
176 <div class="case">
177 <span class="case-label">multi-line <pre>, 8px padding, 14px font</span>
178 <pre class="pass-pre-min">function example() {
179 const value = "ok";
180 return value;
181}</pre>
182 </div>
183 <div class="case">
184 <span class="case-label">multi-line <pre>, 12px padding, 14px font</span>
185 <pre class="pass-pre-good">function example() {
186 const value = "comfortable";
187 return value;
188}</pre>
189 </div>
190
191 <h3>Interactive elements</h3>
192 <div class="case">
193 <span class="case-label">button: 14px font, 8px / 16px padding</span>
194 <button class="pass-button-std">Standard sized button</button>
195 </div>
196 <div class="case">
197 <span class="case-label">form input: 16px font, 8px / 12px padding</span>
198 <input type="text" class="pass-input-std" value="Standard input with adequate padding">
199 </div>
200
201 <h3>Big text with proportional padding</h3>
202 <div class="case">
203 <span class="case-label">24px heading, 16px padding</span>
204 <div class="pass-heading-good">Heading With Room To Breathe</div>
205 </div>
206 <div class="case">
207 <span class="case-label">32px hero, 20px / 32px padding</span>
208 <div class="pass-hero-good">Hero With Big Padding</div>
209 </div>
210 </div>
211 </div>
212 <script src="/js/detect-antipatterns-browser.js"></script>
213</body>
214</html>