search for standard sites
pub-search.waow.tech
search
zig
blog
atproto
fix: tag input mobile styling to match existing tags
- use same background/border/colors as .tag elements
- add flex: none to prevent expansion from global input[type="text"]
- add 44px touch targets on mobile and touch devices
- add hover state matching .tag:hover
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+19
-6
+19
-6
site/index.html
+19
-6
site/index.html
···
332
332
}
333
333
334
334
input.tag-input {
335
+
/* match .tag styling exactly */
335
336
font-size: 11px;
336
337
padding: 3px 8px;
337
-
background: #111;
338
+
background: #151515;
338
339
border: 1px solid #252525;
339
340
border-radius: 3px;
340
-
color: #888;
341
+
color: #777;
341
342
font-family: monospace;
342
-
width: 100px;
343
+
/* prevent flex expansion from global input[type="text"] */
344
+
flex: none;
345
+
width: 90px;
346
+
}
347
+
348
+
input.tag-input:hover {
349
+
background: #1a1a1a;
350
+
border-color: #333;
351
+
color: #aaa;
343
352
}
344
353
345
354
input.tag-input:focus {
346
355
outline: none;
347
356
border-color: #1B7340;
357
+
background: rgba(27, 115, 64, 0.1);
348
358
color: #ccc;
349
359
}
350
360
351
361
input.tag-input::placeholder {
352
362
color: #555;
353
-
font-style: italic;
354
363
}
355
364
356
365
.platform-filter {
···
424
433
}
425
434
426
435
/* ensure minimum 44px touch targets */
427
-
.tag, .platform-option, .suggestion {
436
+
.tag, .platform-option, .suggestion, input.tag-input {
428
437
min-height: 44px;
429
438
display: inline-flex;
430
439
align-items: center;
431
440
padding: 0.5rem 0.75rem;
432
441
}
433
442
443
+
input.tag-input {
444
+
width: 80px;
445
+
}
446
+
434
447
button {
435
448
min-height: 44px;
436
449
padding: 0.5rem 0.75rem;
···
498
511
499
512
/* ensure touch targets on tablets too */
500
513
@media (hover: none) and (pointer: coarse) {
501
-
.tag, .platform-option, .suggestion, .related-item {
514
+
.tag, .platform-option, .suggestion, .related-item, input.tag-input {
502
515
min-height: 44px;
503
516
display: inline-flex;
504
517
align-items: center;