gabriel / musehub public
_issues.scss
486 lines 9.2 KB
Raw
sha256:ce8f568638dfcfc85e52fcc1a1679fd997badd739dc817f3104b1a886619991d fix: footer-overlap regression from the two-column scroll fix Sonnet 5 patch 14 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Page: Issues (/*/issues + /*/issues/* + /*/issues/new)
3 // File: src/scss/pages/_issues.scss
4 //
5 // STRUCTURAL LAYOUT ONLY — zero colors, zero typography here.
6 // Visual rules live in components/_issues.scss.
7 // ─────────────────────────────────────────────────────────────────────────────
8
9 // ── Issue list page (.isl-*) ──────────────────────────────────────────────────
10
11 .isl-page {
12 display: flex;
13 flex-direction: column;
14 gap: var(--space-4);
15 }
16
17 // Bounded-height, independently-scrolling columns — not position: sticky.
18 // See _layout.scss's .layout-two-col/.layout-sidebar comment for why.
19 .isl-layout {
20 display: grid;
21 grid-template-columns: 1fr 220px;
22 gap: var(--space-4);
23 align-items: start;
24 min-height: 0;
25
26 @media (max-width: 900px) {
27 grid-template-columns: 1fr;
28 }
29 }
30
31 .isl-main {
32 min-width: 0;
33 min-height: 0;
34 max-height: calc(100dvh - var(--sticky-offset, var(--header-height)) - var(--space-4));
35 display: flex;
36 flex-direction: column;
37 gap: var(--space-3);
38 overflow-y: auto;
39 scrollbar-width: thin;
40 scrollbar-color: var(--border-default) transparent;
41
42 @media (max-width: 900px) { max-height: none; overflow-y: visible; }
43 }
44
45 .isl-sidebar {
46 display: flex;
47 flex-direction: column;
48 gap: 0;
49 min-height: 0;
50 max-height: calc(100dvh - var(--sticky-offset, var(--header-height)) - var(--space-4));
51 overflow-y: auto;
52 scrollbar-width: thin;
53 scrollbar-color: var(--border-default) transparent;
54
55 @media (max-width: 900px) {
56 max-height: none;
57 overflow-y: visible;
58 display: none;
59 }
60 }
61
62 .isl-list { display: flex; flex-direction: column; }
63
64 .isl-row-body {
65 flex: 1;
66 min-width: 0;
67 display: flex;
68 flex-direction: column;
69 gap: 5px;
70 }
71
72 .isl-row-title-line {
73 display: flex;
74 align-items: baseline;
75 gap: 8px;
76 }
77
78 .isl-row-meta-line {
79 display: flex;
80 align-items: center;
81 gap: 6px;
82 flex-wrap: wrap;
83 }
84
85 .isl-row-intel-line {
86 display: flex;
87 align-items: center;
88 gap: 5px;
89 flex-wrap: wrap;
90 }
91
92 .isl-row-right {
93 display: flex;
94 flex-direction: column;
95 align-items: flex-end;
96 gap: 4px;
97 flex-shrink: 0;
98 }
99
100 .isl-empty {
101 display: flex;
102 flex-direction: column;
103 align-items: center;
104 justify-content: center;
105 padding: var(--space-12) var(--space-6);
106 text-align: center;
107 gap: var(--space-3);
108 }
109
110 .isl-pagination {
111 display: flex;
112 align-items: center;
113 justify-content: center;
114 gap: var(--space-2);
115 padding: var(--space-4) 0;
116 }
117
118 .isl-tpl-grid {
119 display: grid;
120 grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
121 gap: var(--space-3);
122 padding: var(--space-3) var(--space-4);
123 }
124
125 .isl-sb-list {
126 display: flex;
127 flex-direction: column;
128 gap: 0;
129 }
130
131 .isl-sb-labels { display: flex; flex-direction: column; gap: 4px; }
132 .isl-sb-people { display: flex; flex-direction: column; gap: 4px; }
133
134 .isl-sb-intel-list {
135 display: flex;
136 flex-direction: column;
137 gap: 2px;
138 }
139
140 .isl-sb-intel-body {
141 display: flex;
142 flex-direction: column;
143 gap: 2px;
144 flex: 1;
145 min-width: 0;
146 }
147
148 .isl-sb-agent-list {
149 display: flex;
150 flex-direction: column;
151 gap: 4px;
152 }
153
154 .isl-stat-strip {
155 display: flex;
156 align-items: center;
157 justify-content: space-between;
158 gap: var(--space-3);
159 flex-wrap: wrap;
160 }
161
162 .isl-stat-counts {
163 display: flex;
164 align-items: center;
165 gap: 6px;
166 flex-wrap: wrap;
167 }
168
169 .isl-strip-filters {
170 display: flex;
171 align-items: center;
172 gap: var(--space-2);
173 flex-shrink: 0;
174 }
175
176 .isl-tabs {
177 display: flex;
178 align-items: center;
179 }
180
181 .isl-filters {
182 display: flex;
183 align-items: center;
184 gap: var(--space-2);
185 margin-left: auto;
186 flex-wrap: wrap;
187 padding: var(--space-2) 0;
188 }
189
190 // ── Issue detail page (.isd-*) ─────────────────────────────────────────────────
191
192 .isd-page { min-height: 100dvh; }
193
194 .isd-hero-inner {
195 position: relative;
196 max-width: 1200px;
197 margin: 0 auto;
198 padding: var(--space-8) var(--space-6) var(--space-5);
199 }
200
201 .isd-eyebrow {
202 display: flex;
203 align-items: center;
204 justify-content: space-between;
205 gap: var(--space-3);
206 flex-wrap: wrap;
207 margin-bottom: var(--space-4);
208 }
209
210 .isd-eyebrow-left {
211 display: flex;
212 align-items: center;
213 gap: var(--space-2);
214 flex-wrap: wrap;
215 }
216
217 .isd-eyebrow-right {
218 display: flex;
219 align-items: center;
220 gap: var(--space-2);
221 flex-shrink: 0;
222 }
223
224 .isd-wrap {
225 max-width: 1200px;
226 margin: 0 auto;
227 padding: var(--space-5) var(--space-6) var(--space-10);
228 }
229
230 // Bounded-height, independently-scrolling columns — not position: sticky.
231 // See _layout.scss's .layout-two-col/.layout-sidebar comment for why.
232 .isd-layout {
233 display: grid;
234 grid-template-columns: 1fr 280px;
235 gap: var(--space-6);
236 align-items: start;
237 min-height: 0;
238
239 @media (max-width: 900px) {
240 grid-template-columns: 1fr;
241 }
242 }
243
244 .isd-main {
245 min-width: 0;
246 min-height: 0;
247 max-height: calc(100dvh - var(--sticky-offset, var(--header-height)) - var(--space-4));
248 overflow-y: auto;
249 scrollbar-width: thin;
250 scrollbar-color: var(--border-default) transparent;
251
252 @media (max-width: 900px) { max-height: none; overflow-y: visible; }
253 }
254
255 .isd-sidebar {
256 display: flex;
257 flex-direction: column;
258 gap: 0;
259 min-height: 0;
260 max-height: calc(100dvh - var(--sticky-offset, var(--header-height)) - var(--space-4));
261 overflow-y: auto;
262 scrollbar-width: thin;
263 scrollbar-color: var(--border-default) transparent;
264
265 @media (max-width: 900px) { max-height: none; overflow-y: visible; }
266 }
267
268 .isd-panel-hd {
269 display: flex;
270 align-items: center;
271 gap: var(--space-2);
272 padding: var(--space-3) var(--space-4);
273 }
274
275 .isd-anchor-addr {
276 display: flex;
277 align-items: center;
278 gap: 0;
279 flex: 1;
280 min-width: 0;
281 }
282
283 .isd-anchor-stats {
284 display: flex;
285 align-items: center;
286 gap: var(--space-2);
287 flex-shrink: 0;
288 }
289
290 .isd-body-hd {
291 display: flex;
292 align-items: center;
293 gap: var(--space-2);
294 padding: var(--space-3) var(--space-4);
295 }
296
297 .isd-event-replies {
298 display: flex;
299 flex-direction: column;
300 gap: 0;
301 }
302
303 .isd-event-empty {
304 display: flex;
305 align-items: center;
306 justify-content: center;
307 padding: var(--space-6) var(--space-4);
308 }
309
310 .isd-release-bd {
311 display: flex;
312 flex-direction: column;
313 gap: 4px;
314 padding: var(--space-2) var(--space-3);
315 }
316
317 .isd-rel-commit-top {
318 display: flex;
319 align-items: center;
320 gap: 6px;
321 }
322
323 .isd-rel-landed-in {
324 display: flex;
325 align-items: center;
326 gap: 5px;
327 flex-wrap: wrap;
328 }
329
330 .isd-ic-section {
331 display: flex;
332 flex-direction: column;
333 gap: 7px;
334 padding: 9px 12px;
335 }
336
337 .isd-ic-section-label {
338 display: flex;
339 align-items: center;
340 justify-content: space-between;
341 }
342
343 .isd-ic-blast-hero {
344 display: flex;
345 flex-direction: column;
346 gap: 6px;
347 }
348
349 .isd-ic-blast-nums {
350 display: flex;
351 align-items: baseline;
352 gap: 5px;
353 }
354
355 .isd-ic-grav-wrap {
356 display: flex;
357 align-items: center;
358 gap: 7px;
359 }
360
361 .isd-ic-grav-track {
362 flex: 1;
363 height: 10px;
364 overflow: hidden;
365 }
366
367 .isd-ic-co-syms {
368 display: flex;
369 align-items: center;
370 flex-wrap: wrap;
371 gap: 4px;
372 }
373
374 .isd-ic-churn-line {
375 display: flex;
376 align-items: baseline;
377 flex-wrap: wrap;
378 gap: 4px;
379 }
380
381 .isd-ic-sparkline {
382 display: flex;
383 align-items: flex-end;
384 gap: 2px;
385 height: 36px;
386 }
387
388 .isd-ic-issue-list {
389 display: flex;
390 flex-wrap: wrap;
391 gap: 4px;
392 }
393
394 // ── New issue page (.isn-*) ────────────────────────────────────────────────────
395
396 .isn-page {
397 max-width: 960px;
398 margin: 0 auto;
399 padding: var(--space-4) var(--space-3);
400 }
401
402 .isn-layout {
403 display: grid;
404 grid-template-columns: 1fr 240px;
405 gap: var(--space-4);
406 align-items: start;
407
408 @media (max-width: 720px) { grid-template-columns: 1fr; }
409 }
410
411 .isn-main { min-width: 0; }
412
413 .isn-card-header {
414 display: flex;
415 align-items: center;
416 justify-content: space-between;
417 padding: var(--space-3) var(--space-4);
418 }
419
420 .isn-card-body {
421 padding: var(--space-4);
422 display: flex;
423 flex-direction: column;
424 gap: var(--space-5);
425 }
426
427 .isn-section {
428 display: flex;
429 flex-direction: column;
430 gap: var(--space-3);
431 }
432
433 .isn-section-header {
434 display: flex;
435 align-items: center;
436 gap: var(--space-2);
437 }
438
439 .isn-cli-block {
440 display: flex;
441 flex-direction: column;
442 gap: var(--space-3);
443 }
444
445 .isn-cli-step {
446 display: flex;
447 gap: var(--space-3);
448 align-items: flex-start;
449 }
450
451 .isn-cli-step-body {
452 display: flex;
453 flex-direction: column;
454 gap: 6px;
455 flex: 1;
456 min-width: 0;
457 }
458
459 .isn-anatomy {
460 display: flex;
461 flex-direction: column;
462 }
463
464 .isn-anatomy-row {
465 display: flex;
466 gap: var(--space-3);
467 padding: var(--space-2) var(--space-3);
468 }
469
470 .isn-sidebar {
471 display: flex;
472 flex-direction: column;
473 gap: var(--space-3);
474 }
475
476 .isn-sb-section {
477 display: flex;
478 flex-direction: column;
479 gap: var(--space-2);
480 }
481
482 .isn-sb-links {
483 display: flex;
484 flex-direction: column;
485 gap: 4px;
486 }
File History 1 commit
sha256:ce8f568638dfcfc85e52fcc1a1679fd997badd739dc817f3104b1a886619991d fix: footer-overlap regression from the two-column scroll fix Sonnet 5 patch 14 days ago