zzstoatzz.io
make UI mobile-first with responsive breakpoints
- container stacks vertically on mobile, 3-col grid on desktop (768px+)
- message controls appear first on mobile (order: -1)
- buttons 2x2 grid with 44px touch targets on mobile
- state summary stacks vertically on mobile
- infrastructure cards single column on mobile (640px+)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+63
-14
+63
-14
src/routes/+page.svelte
+63
-14
src/routes/+page.svelte
···
336
336
h1 .by a:hover { color: #1b7340; }
337
337
338
338
.container {
339
-
display: grid;
340
-
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
339
+
display: flex;
340
+
flex-direction: column;
341
341
gap: 1rem;
342
342
max-width: 1000px;
343
343
margin: 0 auto;
344
-
align-items: stretch;
344
+
}
345
+
346
+
@media (min-width: 768px) {
347
+
.container {
348
+
display: grid;
349
+
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
350
+
align-items: stretch;
351
+
}
345
352
}
346
353
347
354
.center {
···
350
357
padding: 1rem;
351
358
overflow: hidden;
352
359
min-width: 0;
360
+
order: -1;
361
+
}
362
+
363
+
@media (min-width: 768px) {
364
+
.center {
365
+
order: 0;
366
+
}
353
367
}
354
368
.center h2 {
355
369
font-size: 11px;
···
411
425
}
412
426
413
427
.buttons {
414
-
display: flex;
428
+
display: grid;
429
+
grid-template-columns: 1fr 1fr;
415
430
gap: 0.5rem;
416
431
margin-bottom: 1rem;
417
432
}
418
-
.buttons > :global(*) {
419
-
flex: 1;
433
+
434
+
@media (min-width: 768px) {
435
+
.buttons {
436
+
display: flex;
437
+
}
438
+
.buttons > :global(*) {
439
+
flex: 1;
440
+
}
420
441
}
442
+
421
443
button {
422
444
width: 100%;
423
-
padding: 0.5rem;
445
+
padding: 0.75rem;
424
446
font-family: monospace;
425
-
font-size: 12px;
447
+
font-size: 14px;
426
448
background: #111;
427
449
border: 1px solid #222;
428
450
color: #888;
429
451
cursor: pointer;
452
+
min-height: 44px;
453
+
}
454
+
455
+
@media (min-width: 768px) {
456
+
button {
457
+
padding: 0.5rem;
458
+
font-size: 12px;
459
+
min-height: auto;
460
+
}
430
461
}
431
462
button:hover {
432
463
background: #1a1a1a;
···
531
562
text-transform: lowercase;
532
563
}
533
564
.state-grid {
534
-
display: grid;
535
-
grid-template-columns: 60px 160px auto;
536
-
gap: 0.4rem 0;
565
+
display: flex;
566
+
flex-direction: column;
567
+
gap: 0.75rem;
537
568
font-size: 11px;
538
569
}
570
+
571
+
@media (min-width: 768px) {
572
+
.state-grid {
573
+
display: grid;
574
+
grid-template-columns: 60px 160px auto;
575
+
gap: 0.4rem 0;
576
+
}
577
+
}
578
+
539
579
.state-grid .name {
540
580
color: #888;
581
+
font-weight: 500;
541
582
}
542
583
.state-grid .accepted {
543
584
color: #2a9d5c;
···
565
606
margin-bottom: 1rem;
566
607
}
567
608
.infra-grid {
568
-
display: grid;
569
-
grid-template-columns: repeat(2, 1fr);
570
-
gap: 1rem;
609
+
display: flex;
610
+
flex-direction: column;
611
+
gap: 0.75rem;
612
+
}
613
+
614
+
@media (min-width: 640px) {
615
+
.infra-grid {
616
+
display: grid;
617
+
grid-template-columns: repeat(2, 1fr);
618
+
gap: 1rem;
619
+
}
571
620
}
572
621
.infra-card {
573
622
display: flex;