personal memory agent
a11y: responsive CSS for support workspace
Add tablet (768px) and mobile (375px) breakpoints with flex-wrap on
nav tabs, 44px touch targets on interactive elements, vertical
stacking for ticket headers and diagnostics rows, full-width buttons,
overflow-wrap on text-heavy elements, and overflow-x hidden at mobile.
+89
+89
apps/support/workspace.html
+89
apps/support/workspace.html
···
343
343
color: #c62828;
344
344
margin-top: 0.75rem;
345
345
}
346
+
347
+
/* ── Responsive: General ── */
348
+
.support-nav {
349
+
flex-wrap: wrap;
350
+
}
351
+
.support-ticket-subject,
352
+
.support-message,
353
+
.support-help-card p {
354
+
overflow-wrap: break-word;
355
+
word-break: break-word;
356
+
}
357
+
358
+
/* ── Responsive: Tablet (≤768px) ── */
359
+
@media (max-width: 768px) {
360
+
.support-nav button {
361
+
padding: 0.5rem 1rem;
362
+
min-height: 44px;
363
+
}
364
+
.support-detail-back {
365
+
min-height: 44px;
366
+
display: inline-flex;
367
+
align-items: center;
368
+
}
369
+
.support-ticket-header {
370
+
flex-wrap: wrap;
371
+
gap: 0.5rem;
372
+
}
373
+
.support-diagnostics-section summary {
374
+
min-height: 44px;
375
+
display: flex;
376
+
align-items: center;
377
+
}
378
+
.support-drop-zone {
379
+
padding: 1.25rem;
380
+
min-height: 44px;
381
+
}
382
+
}
383
+
384
+
/* ── Responsive: Mobile (≤375px) ── */
385
+
@media (max-width: 375px) {
386
+
#support-root {
387
+
overflow-x: hidden;
388
+
}
389
+
.support-nav {
390
+
flex-direction: column;
391
+
}
392
+
.support-nav button {
393
+
min-height: 44px;
394
+
width: 100%;
395
+
text-align: left;
396
+
padding: 0.625rem 1rem;
397
+
}
398
+
.support-ticket-header {
399
+
flex-direction: column;
400
+
align-items: flex-start;
401
+
gap: 0.25rem;
402
+
}
403
+
.support-btn,
404
+
.support-empty-action {
405
+
width: 100%;
406
+
}
407
+
.support-detail-back {
408
+
min-height: 44px;
409
+
}
410
+
.support-help-card {
411
+
padding: 0.75rem;
412
+
}
413
+
.support-diagnostics-section .support-diagnostics-body {
414
+
padding: 0.25rem 0.5rem 0.5rem;
415
+
}
416
+
.support-empty {
417
+
padding: 2rem 0.75rem;
418
+
}
419
+
.support-drop-zone {
420
+
padding: 1.5rem 1rem;
421
+
}
422
+
.support-keyboard-hint {
423
+
display: block;
424
+
margin-left: 0;
425
+
margin-top: 0.25rem;
426
+
}
427
+
.support-feedback-options {
428
+
flex-wrap: wrap;
429
+
}
430
+
.support-diagnostics-row {
431
+
flex-direction: column;
432
+
gap: 0.25rem;
433
+
}
434
+
}
346
435
</style>
347
436
348
437
<div class="workspace-content" id="support-root">