experiments in a post-browser web
refactor(mobile): shared EditorLayout, unified editor flex layout, image editor uses ResizableInput
+24
-16
+7
-1
backend/tauri-mobile/src/App.css
+7
-1
backend/tauri-mobile/src/App.css
···
2686
2686
padding-right: 32px;
2687
2687
}
2688
2688
2689
-
/* URL editor wrapper */
2689
+
/* URL editor content wrapper - matches resizable-input-wrapper flex behavior
2690
+
so the URL editor has the same DOM structure as note/image editors */
2691
+
.editor-url-content-wrapper {
2692
+
align-items: stretch;
2693
+
}
2694
+
2695
+
/* URL editor wrapper - inner row with input + clear button */
2690
2696
.editor-url-wrapper {
2691
2697
flex-shrink: 0;
2692
2698
}
+17
-15
backend/tauri-mobile/src/App.tsx
+17
-15
backend/tauri-mobile/src/App.tsx
···
2228
2228
onDelete: () => requestDelete(editingUrlId, "page"),
2229
2229
}}
2230
2230
>
2231
-
<div className="input-with-clear editor-url-wrapper">
2232
-
<input
2233
-
type="url"
2234
-
className="editor-url-input"
2235
-
value={editingUrlValue}
2236
-
onChange={(e) => setEditingUrlValue(e.target.value)}
2237
-
onFocus={() => {
2238
-
// Counter iOS viewport scroll on focus
2239
-
requestAnimationFrame(() => window.scrollTo(0, 0));
2240
-
}}
2241
-
placeholder="URL"
2242
-
autoCapitalize="none"
2243
-
autoCorrect="off"
2244
-
/>
2245
-
<ClearButton show={editingUrlValue.length > 0} onClear={() => setEditingUrlValue('')} />
2231
+
<div className="resizable-input-wrapper editor-url-content-wrapper">
2232
+
<div className="input-with-clear editor-url-wrapper">
2233
+
<input
2234
+
type="url"
2235
+
className="editor-url-input"
2236
+
value={editingUrlValue}
2237
+
onChange={(e) => setEditingUrlValue(e.target.value)}
2238
+
onFocus={() => {
2239
+
// Counter iOS viewport scroll on focus
2240
+
requestAnimationFrame(() => window.scrollTo(0, 0));
2241
+
}}
2242
+
placeholder="URL"
2243
+
autoCapitalize="none"
2244
+
autoCorrect="off"
2245
+
/>
2246
+
<ClearButton show={editingUrlValue.length > 0} onClear={() => setEditingUrlValue('')} />
2247
+
</div>
2246
2248
</div>
2247
2249
</EditorLayout>
2248
2250
);