slices.network
Tools for the Atmosphere
tools.slices.network
quickslice
atproto
html
feat(bugs): add mobile responsive styles
Add responsive CSS for screens under 640px:
- Header stacks vertically with centered content
- Filter bar full-width with stacked controls
- Touch targets minimum 44px for accessibility
- Overlay covers full screen width
- Modals nearly full-screen with stacked form buttons
chadtmiller.com
+124
bugs.html
+124
bugs.html
···
798
798
font-size: 0.875rem;
799
799
white-space: pre-wrap;
800
800
}
801
+
802
+
/* =============================================================================
803
+
MOBILE RESPONSIVE STYLES
804
+
============================================================================= */
805
+
@media (max-width: 640px) {
806
+
/* Header - stack vertically */
807
+
header {
808
+
flex-direction: column;
809
+
gap: 0.75rem;
810
+
text-align: center;
811
+
}
812
+
813
+
.breadcrumb {
814
+
justify-content: center;
815
+
flex-wrap: wrap;
816
+
}
817
+
818
+
.user-status {
819
+
justify-content: center;
820
+
}
821
+
822
+
/* Filter bar - stack vertically */
823
+
.filter-bar {
824
+
flex-direction: column;
825
+
align-items: stretch;
826
+
}
827
+
828
+
.filter-group {
829
+
width: 100%;
830
+
}
831
+
832
+
.filter-group select {
833
+
width: 100%;
834
+
}
835
+
836
+
.filter-bar > .btn-primary {
837
+
width: 100%;
838
+
}
839
+
840
+
/* Touch targets - minimum 44px */
841
+
.btn {
842
+
padding: 0.75rem 1rem;
843
+
min-height: 44px;
844
+
}
845
+
846
+
.btn-info {
847
+
width: 44px;
848
+
height: 44px;
849
+
font-size: 1rem;
850
+
}
851
+
852
+
.btn-icon {
853
+
min-width: 44px;
854
+
min-height: 44px;
855
+
}
856
+
857
+
.overlay-close,
858
+
.modal-close {
859
+
width: 44px;
860
+
height: 44px;
861
+
display: flex;
862
+
align-items: center;
863
+
justify-content: center;
864
+
}
865
+
866
+
/* Overlay - full screen takeover */
867
+
#overlay {
868
+
max-width: 100%;
869
+
width: 100%;
870
+
box-shadow: none;
871
+
}
872
+
873
+
.overlay-header {
874
+
flex-direction: column;
875
+
align-items: flex-start;
876
+
gap: 0.75rem;
877
+
position: relative;
878
+
padding-right: 3.5rem;
879
+
}
880
+
881
+
.overlay-title {
882
+
margin-right: 0;
883
+
}
884
+
885
+
.overlay-actions {
886
+
width: 100%;
887
+
justify-content: flex-start;
888
+
flex-wrap: wrap;
889
+
}
890
+
891
+
.overlay-header > .overlay-actions > .overlay-close {
892
+
position: absolute;
893
+
top: 1rem;
894
+
right: 1rem;
895
+
}
896
+
897
+
/* Modal - nearly full screen */
898
+
#modal {
899
+
padding: 0.5rem;
900
+
}
901
+
902
+
.modal-content {
903
+
max-width: 100%;
904
+
width: 100%;
905
+
max-height: 100%;
906
+
border-radius: 0.5rem;
907
+
}
908
+
909
+
.modal-body {
910
+
padding: 1rem;
911
+
}
912
+
913
+
.form-actions {
914
+
flex-direction: column-reverse;
915
+
}
916
+
917
+
.form-actions .btn {
918
+
width: 100%;
919
+
}
920
+
921
+
.image-upload {
922
+
padding: 2rem 1rem;
923
+
}
924
+
}
801
925
</style>
802
926
</head>
803
927
<body>
+423
docs/plans/2025-12-16-bugs-mobile-responsive.md
+423
docs/plans/2025-12-16-bugs-mobile-responsive.md
···
1
+
# Mobile Responsive bugs.html Implementation Plan
2
+
3
+
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
4
+
5
+
**Goal:** Make bugs.html mobile-friendly with proper layout, touch targets, and full-screen overlays on small screens.
6
+
7
+
**Architecture:** Add a single `@media (max-width: 640px)` block at the end of the existing `<style>` section. All mobile styles contained in one place.
8
+
9
+
**Tech Stack:** Pure CSS media queries, no build tools or dependencies.
10
+
11
+
---
12
+
13
+
### Task 1: Add Mobile Header Styles
14
+
15
+
**Files:**
16
+
- Modify: `bugs.html:800` (end of `<style>` section, before `</style>`)
17
+
18
+
**Step 1: Add the media query block with header styles**
19
+
20
+
Insert before the closing `</style>` tag (around line 800):
21
+
22
+
```css
23
+
/* =============================================================================
24
+
MOBILE RESPONSIVE STYLES
25
+
============================================================================= */
26
+
@media (max-width: 640px) {
27
+
/* Header - stack vertically */
28
+
header {
29
+
flex-direction: column;
30
+
gap: 0.75rem;
31
+
text-align: center;
32
+
}
33
+
34
+
.breadcrumb {
35
+
justify-content: center;
36
+
flex-wrap: wrap;
37
+
}
38
+
39
+
.user-status {
40
+
justify-content: center;
41
+
}
42
+
}
43
+
```
44
+
45
+
**Step 2: Verify in browser**
46
+
47
+
Open bugs.html in browser, resize to <640px width. Header should stack:
48
+
- Title/breadcrumb centered on top
49
+
- User status centered below
50
+
51
+
**Step 3: Commit**
52
+
53
+
```bash
54
+
git add bugs.html
55
+
git commit -m "feat(bugs): add mobile header styles"
56
+
```
57
+
58
+
---
59
+
60
+
### Task 2: Add Mobile Filter Bar Styles
61
+
62
+
**Files:**
63
+
- Modify: `bugs.html` (inside the `@media` block from Task 1)
64
+
65
+
**Step 1: Add filter bar styles inside the media query**
66
+
67
+
Add after the `.user-status` rule, still inside the `@media` block:
68
+
69
+
```css
70
+
/* Filter bar - stack vertically */
71
+
.filter-bar {
72
+
flex-direction: column;
73
+
align-items: stretch;
74
+
}
75
+
76
+
.filter-group {
77
+
width: 100%;
78
+
}
79
+
80
+
.filter-group select {
81
+
width: 100%;
82
+
}
83
+
84
+
.filter-bar > .btn-primary {
85
+
width: 100%;
86
+
}
87
+
```
88
+
89
+
**Step 2: Verify in browser**
90
+
91
+
Navigate to a namespace (e.g., `?ns=social.grain`). At <640px:
92
+
- Severity dropdown should be full-width
93
+
- Report Bug button should be full-width below it
94
+
95
+
**Step 3: Commit**
96
+
97
+
```bash
98
+
git add bugs.html
99
+
git commit -m "feat(bugs): add mobile filter bar styles"
100
+
```
101
+
102
+
---
103
+
104
+
### Task 3: Add Mobile Touch Target Styles
105
+
106
+
**Files:**
107
+
- Modify: `bugs.html` (inside the `@media` block)
108
+
109
+
**Step 1: Add touch target styles inside the media query**
110
+
111
+
Add after the filter bar rules:
112
+
113
+
```css
114
+
/* Touch targets - minimum 44px */
115
+
.btn {
116
+
padding: 0.75rem 1rem;
117
+
min-height: 44px;
118
+
}
119
+
120
+
.btn-info {
121
+
width: 44px;
122
+
height: 44px;
123
+
font-size: 1rem;
124
+
}
125
+
126
+
.btn-icon {
127
+
min-width: 44px;
128
+
min-height: 44px;
129
+
}
130
+
131
+
.overlay-close,
132
+
.modal-close {
133
+
width: 44px;
134
+
height: 44px;
135
+
display: flex;
136
+
align-items: center;
137
+
justify-content: center;
138
+
}
139
+
```
140
+
141
+
**Step 2: Verify in browser**
142
+
143
+
At <640px:
144
+
- Info (?) button should be larger (44px)
145
+
- All buttons should have comfortable tap size
146
+
- Close buttons should be 44px square
147
+
148
+
**Step 3: Commit**
149
+
150
+
```bash
151
+
git add bugs.html
152
+
git commit -m "feat(bugs): add mobile touch target styles"
153
+
```
154
+
155
+
---
156
+
157
+
### Task 4: Add Mobile Overlay Styles
158
+
159
+
**Files:**
160
+
- Modify: `bugs.html` (inside the `@media` block)
161
+
162
+
**Step 1: Add overlay styles inside the media query**
163
+
164
+
Add after the touch target rules:
165
+
166
+
```css
167
+
/* Overlay - full screen takeover */
168
+
#overlay {
169
+
max-width: 100%;
170
+
width: 100%;
171
+
}
172
+
173
+
.overlay-header {
174
+
flex-direction: column;
175
+
align-items: flex-start;
176
+
gap: 0.75rem;
177
+
position: relative;
178
+
padding-right: 3.5rem;
179
+
}
180
+
181
+
.overlay-title {
182
+
margin-right: 0;
183
+
}
184
+
185
+
.overlay-actions {
186
+
width: 100%;
187
+
justify-content: flex-start;
188
+
flex-wrap: wrap;
189
+
}
190
+
191
+
.overlay-header > .overlay-actions > .overlay-close {
192
+
position: absolute;
193
+
top: 1rem;
194
+
right: 1rem;
195
+
}
196
+
```
197
+
198
+
**Step 2: Verify in browser**
199
+
200
+
Click on a bug to open the detail overlay. At <640px:
201
+
- Overlay should cover full screen width
202
+
- Badges and title should stack
203
+
- Close button should be in top-right corner
204
+
- Action buttons should wrap if needed
205
+
206
+
**Step 3: Commit**
207
+
208
+
```bash
209
+
git add bugs.html
210
+
git commit -m "feat(bugs): add mobile overlay styles"
211
+
```
212
+
213
+
---
214
+
215
+
### Task 5: Add Mobile Modal Styles
216
+
217
+
**Files:**
218
+
- Modify: `bugs.html` (inside the `@media` block)
219
+
220
+
**Step 1: Add modal styles inside the media query**
221
+
222
+
Add after the overlay rules, then close the media query:
223
+
224
+
```css
225
+
/* Modal - nearly full screen */
226
+
#modal {
227
+
padding: 0.5rem;
228
+
}
229
+
230
+
.modal-content {
231
+
max-width: 100%;
232
+
width: 100%;
233
+
max-height: 100%;
234
+
border-radius: 0.5rem;
235
+
}
236
+
237
+
.modal-body {
238
+
padding: 1rem;
239
+
}
240
+
241
+
.form-actions {
242
+
flex-direction: column-reverse;
243
+
}
244
+
245
+
.form-actions .btn {
246
+
width: 100%;
247
+
}
248
+
249
+
.image-upload {
250
+
padding: 2rem 1rem;
251
+
}
252
+
}
253
+
```
254
+
255
+
Note: `flex-direction: column-reverse` puts the primary action (Submit) on top, which is thumb-friendly.
256
+
257
+
**Step 2: Verify in browser**
258
+
259
+
Click "Report Bug" or "Login" to open a modal. At <640px:
260
+
- Modal should be nearly full-width (0.5rem margin)
261
+
- Form buttons should stack vertically
262
+
- Submit button should be above Cancel
263
+
264
+
**Step 3: Commit**
265
+
266
+
```bash
267
+
git add bugs.html
268
+
git commit -m "feat(bugs): add mobile modal styles"
269
+
```
270
+
271
+
---
272
+
273
+
### Task 6: Final Verification and Squash (Optional)
274
+
275
+
**Step 1: Full mobile test**
276
+
277
+
Test all screens at 375px width (iPhone SE):
278
+
- [ ] Landing page - namespace grid readable
279
+
- [ ] Bug list - filter bar stacked, cards readable
280
+
- [ ] Bug detail overlay - full screen, actions accessible
281
+
- [ ] Submit bug modal - form usable, buttons tappable
282
+
- [ ] Login modal - input and buttons usable
283
+
284
+
**Step 2: Squash commits (optional)**
285
+
286
+
If you want a single commit instead of incremental:
287
+
288
+
```bash
289
+
git rebase -i HEAD~5
290
+
# Mark commits 2-5 as "squash"
291
+
# Edit message to: "feat(bugs): add mobile responsive styles"
292
+
```
293
+
294
+
---
295
+
296
+
## Complete CSS Block Reference
297
+
298
+
For reference, the complete media query block should look like:
299
+
300
+
```css
301
+
/* =============================================================================
302
+
MOBILE RESPONSIVE STYLES
303
+
============================================================================= */
304
+
@media (max-width: 640px) {
305
+
/* Header - stack vertically */
306
+
header {
307
+
flex-direction: column;
308
+
gap: 0.75rem;
309
+
text-align: center;
310
+
}
311
+
312
+
.breadcrumb {
313
+
justify-content: center;
314
+
flex-wrap: wrap;
315
+
}
316
+
317
+
.user-status {
318
+
justify-content: center;
319
+
}
320
+
321
+
/* Filter bar - stack vertically */
322
+
.filter-bar {
323
+
flex-direction: column;
324
+
align-items: stretch;
325
+
}
326
+
327
+
.filter-group {
328
+
width: 100%;
329
+
}
330
+
331
+
.filter-group select {
332
+
width: 100%;
333
+
}
334
+
335
+
.filter-bar > .btn-primary {
336
+
width: 100%;
337
+
}
338
+
339
+
/* Touch targets - minimum 44px */
340
+
.btn {
341
+
padding: 0.75rem 1rem;
342
+
min-height: 44px;
343
+
}
344
+
345
+
.btn-info {
346
+
width: 44px;
347
+
height: 44px;
348
+
font-size: 1rem;
349
+
}
350
+
351
+
.btn-icon {
352
+
min-width: 44px;
353
+
min-height: 44px;
354
+
}
355
+
356
+
.overlay-close,
357
+
.modal-close {
358
+
width: 44px;
359
+
height: 44px;
360
+
display: flex;
361
+
align-items: center;
362
+
justify-content: center;
363
+
}
364
+
365
+
/* Overlay - full screen takeover */
366
+
#overlay {
367
+
max-width: 100%;
368
+
width: 100%;
369
+
}
370
+
371
+
.overlay-header {
372
+
flex-direction: column;
373
+
align-items: flex-start;
374
+
gap: 0.75rem;
375
+
position: relative;
376
+
padding-right: 3.5rem;
377
+
}
378
+
379
+
.overlay-title {
380
+
margin-right: 0;
381
+
}
382
+
383
+
.overlay-actions {
384
+
width: 100%;
385
+
justify-content: flex-start;
386
+
flex-wrap: wrap;
387
+
}
388
+
389
+
.overlay-header > .overlay-actions > .overlay-close {
390
+
position: absolute;
391
+
top: 1rem;
392
+
right: 1rem;
393
+
}
394
+
395
+
/* Modal - nearly full screen */
396
+
#modal {
397
+
padding: 0.5rem;
398
+
}
399
+
400
+
.modal-content {
401
+
max-width: 100%;
402
+
width: 100%;
403
+
max-height: 100%;
404
+
border-radius: 0.5rem;
405
+
}
406
+
407
+
.modal-body {
408
+
padding: 1rem;
409
+
}
410
+
411
+
.form-actions {
412
+
flex-direction: column-reverse;
413
+
}
414
+
415
+
.form-actions .btn {
416
+
width: 100%;
417
+
}
418
+
419
+
.image-upload {
420
+
padding: 2rem 1rem;
421
+
}
422
+
}
423
+
```