experiments in a post-browser web
fix(mobile): editor layout — full-screen height, working resizers, URL editor flex
+17
-12
+1
-1
backend/tauri-mobile/src-tauri/Cargo.toml
+1
-1
backend/tauri-mobile/src-tauri/Cargo.toml
···
12
12
# to make the lib name unique and wouldn't conflict with the bin name.
13
13
# This seems to be only an issue on Windows, see https://github.com/rust-lang/cargo/issues/8519
14
14
name = "peek_save_lib"
15
-
crate-type = ["staticlib", "rlib"]
15
+
crate-type = ["staticlib", "cdylib", "rlib"]
16
16
17
17
[build-dependencies]
18
18
tauri-build = { version = "2", features = [] }
+5
-2
backend/tauri-mobile/src/App.css
+5
-2
backend/tauri-mobile/src/App.css
···
2486
2486
align-items: center;
2487
2487
padding: 0.5rem;
2488
2488
padding-top: env(safe-area-inset-top, 4px);
2489
+
/* Ensure safe area padding at bottom when keyboard is hidden */
2490
+
padding-bottom: max(env(safe-area-inset-bottom, 0px), 0.5rem);
2489
2491
/* Prevent iOS from scrolling the viewport when keyboard appears */
2490
2492
overflow: hidden;
2491
2493
overscroll-behavior: contain;
···
2686
2688
padding-right: 32px;
2687
2689
}
2688
2690
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
+
/* URL editor content wrapper - fixed size, does not flex-grow.
2692
+
Tags section fills remaining space below. */
2691
2693
.editor-url-content-wrapper {
2694
+
flex-shrink: 0;
2692
2695
align-items: stretch;
2693
2696
}
2694
2697
+11
-9
backend/tauri-mobile/src/App.tsx
+11
-9
backend/tauri-mobile/src/App.tsx
···
157
157
const SWIPE_THRESHOLD = 80;
158
158
159
159
const EditorOverlay: React.FC<EditorOverlayProps> = ({ children, onDismiss, keyboardHeight, className = '' }) => {
160
-
// Use actual keyboard height when available, fall back to fixed estimate
161
-
const effectiveKeyboardPadding = keyboardHeight > 0 ? keyboardHeight + 4 : 350;
160
+
// Use actual keyboard height when available; when keyboard is hidden, only pad for safe area
161
+
const effectiveKeyboardPadding = keyboardHeight > 0 ? keyboardHeight + 4 : 0;
162
162
163
163
// Swipe-down-to-close state
164
164
const [swipeOffset, setSwipeOffset] = useState(0);
···
209
209
return (
210
210
<div
211
211
className={`edit-overlay ${className}`}
212
-
style={{ paddingBottom: `${effectiveKeyboardPadding}px` }}
212
+
style={effectiveKeyboardPadding > 0 ? { paddingBottom: `${effectiveKeyboardPadding}px` } : undefined}
213
213
onClick={(e) => e.target === e.currentTarget && onDismiss()}
214
214
>
215
215
<div
···
471
471
}
472
472
};
473
473
474
-
// Use actual keyboard height when available, fall back to fixed estimate
475
-
const FIXED_KEYBOARD_HEIGHT = keyboardHeight > 0 ? keyboardHeight : 350;
474
+
// Use actual keyboard height when available; when keyboard is hidden, no keyboard offset
475
+
const FIXED_KEYBOARD_HEIGHT = keyboardHeight > 0 ? keyboardHeight : 0;
476
476
477
477
// Calculate default height (initial size) and min height (resize floor)
478
478
const headerHeight = 56;
···
567
567
useEffect(() => {
568
568
const handleMouseMove = (e: MouseEvent) => handleDragMove(e.clientY);
569
569
const handleTouchMove = (e: TouchEvent) => {
570
+
if (isDraggingRef.current && e.cancelable) e.preventDefault();
570
571
if (e.touches.length === 1) handleDragMove(e.touches[0].clientY);
571
572
};
572
573
const handleEnd = () => handleDragEnd();
573
574
574
575
document.addEventListener('mousemove', handleMouseMove);
575
576
document.addEventListener('mouseup', handleEnd);
576
-
document.addEventListener('touchmove', handleTouchMove, { passive: true });
577
+
document.addEventListener('touchmove', handleTouchMove, { passive: false });
577
578
document.addEventListener('touchend', handleEnd);
578
579
579
580
return () => {
···
619
620
<div
620
621
className="resizable-input-wrapper"
621
622
ref={wrapperRef}
622
-
style={height != null ? { height: `${currentHeight}px`, minHeight: `${minHeight}px` } : { minHeight: `${minHeight}px` }}
623
+
style={height != null ? { height: `${currentHeight}px`, minHeight: `${minHeight}px`, flex: 'none' } : { minHeight: `${minHeight}px` }}
623
624
>
624
625
<textarea
625
626
ref={textareaRef}
···
873
874
};
874
875
const handleMouseMove = (e: MouseEvent) => handleMove(e.clientY);
875
876
const handleTouchMove = (e: TouchEvent) => {
877
+
if (filterTagsDraggingRef.current && e.cancelable) e.preventDefault();
876
878
if (e.touches.length === 1) handleMove(e.touches[0].clientY);
877
879
};
878
880
const handleEnd = () => {
···
887
889
888
890
document.addEventListener('mousemove', handleMouseMove);
889
891
document.addEventListener('mouseup', handleEnd);
890
-
document.addEventListener('touchmove', handleTouchMove, { passive: true });
892
+
document.addEventListener('touchmove', handleTouchMove, { passive: false });
891
893
document.addEventListener('touchend', handleEnd);
892
894
return () => {
893
895
document.removeEventListener('mousemove', handleMouseMove);
···
2228
2230
onDelete: () => requestDelete(editingUrlId, "page"),
2229
2231
}}
2230
2232
>
2231
-
<div className="resizable-input-wrapper editor-url-content-wrapper">
2233
+
<div className="editor-url-content-wrapper">
2232
2234
<div className="input-with-clear editor-url-wrapper">
2233
2235
<input
2234
2236
type="url"