experiments in a post-browser web
fix(ui): editor overlays fill to keyboard, tagset cards use tag chips
- EditorOverlay uses column flex so card fills from top to keyboard
- TagsSection expands to fill when no ResizableInput sibling (URL/tagset editors)
- Remove separator line below URL input in editor
- Tagset cards render tags as chip badges matching other item types
+25
-13
+20
-12
backend/tauri-mobile/src/App.css
+20
-12
backend/tauri-mobile/src/App.css
···
409
409
color: #007aff;
410
410
}
411
411
412
+
/* Tag chips in card header (tagset items) */
413
+
.card-title-tags {
414
+
flex: 1;
415
+
min-width: 0;
416
+
margin-left: 0.35rem;
417
+
}
418
+
412
419
.card-delete-btn {
413
420
flex-shrink: 0;
414
421
background: transparent;
···
2445
2452
background: rgba(0, 0, 0, 0.4);
2446
2453
z-index: 1000;
2447
2454
display: flex;
2448
-
align-items: flex-start;
2449
-
justify-content: center;
2455
+
flex-direction: column;
2456
+
align-items: center;
2450
2457
padding: 0.5rem;
2451
2458
padding-top: env(safe-area-inset-top, 4px);
2452
2459
/* Prevent iOS from scrolling the viewport when keyboard appears */
···
2462
2469
width: 100%;
2463
2470
max-width: 600px;
2464
2471
margin: 0;
2472
+
flex: 1;
2473
+
min-height: 0;
2465
2474
}
2466
2475
2467
2476
body.dark .edit-overlay {
···
2649
2658
2650
2659
/* URL editor wrapper */
2651
2660
.editor-url-wrapper {
2652
-
border-bottom: 1px solid #e0e0e0;
2653
-
}
2654
-
2655
-
.editor-url-wrapper .editor-url-input {
2656
-
border-bottom: none;
2661
+
flex-shrink: 0;
2657
2662
}
2658
2663
2659
2664
body.dark .editor-url-wrapper {
2660
-
border-bottom-color: #444;
2661
2665
}
2662
2666
2663
2667
body.dark .clear-btn {
···
2748
2752
background: #555;
2749
2753
}
2750
2754
2751
-
/* Tags Section - sizes to content, scrolls when exceeding max */
2755
+
/* Tags Section - expands to fill available space, scrolls when full */
2752
2756
.editor-tags-section {
2753
-
flex-shrink: 0;
2757
+
flex: 1 1 auto;
2758
+
min-height: 0;
2754
2759
overflow-y: auto;
2755
2760
-webkit-overflow-scrolling: touch;
2756
2761
padding: 0.25rem 1.15rem;
2762
+
}
2763
+
2764
+
/* When a ResizableInput is present, constrain tags so the textarea gets space */
2765
+
.resizable-input-wrapper ~ .editor-tags-section {
2766
+
flex: 0 0 auto;
2757
2767
max-height: 140px;
2758
2768
}
2759
2769
···
2769
2779
width: 100%;
2770
2780
padding: 0.85rem 1.15rem;
2771
2781
border: none;
2772
-
border-bottom: 1px solid #e0e0e0;
2773
2782
border-radius: 12px 12px 0 0;
2774
2783
font-size: 16px;
2775
2784
font-family: inherit;
···
2783
2792
2784
2793
body.dark .editor-url-input {
2785
2794
color: #f6f6f6;
2786
-
border-bottom-color: #444;
2787
2795
}
2788
2796
2789
2797
/* Image preview for editor */
+5
-1
backend/tauri-mobile/src/App.tsx
+5
-1
backend/tauri-mobile/src/App.tsx
···
2492
2492
<line x1="7" y1="7" x2="7.01" y2="7"></line>
2493
2493
</svg>
2494
2494
</div>
2495
-
<div className="card-title">{item.tags.join(', ')}</div>
2495
+
<div className="card-tags card-title-tags">
2496
+
{item.tags.map((tag) => (
2497
+
<span key={tag} className="card-tag">{tag}</span>
2498
+
))}
2499
+
</div>
2496
2500
<button
2497
2501
className="card-delete-btn"
2498
2502
onClick={(e) => {