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