fix(mobile): outline bar only while the keyboard is open
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m51s
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m51s
The indent/move bar above the keyboard stayed after the keyboard was closed (back button) because the bullet kept its focus, and covered the bottom navigation. useKeyboardInset now reports keyboardOpen by comparing the visible height with the height without keyboard, which works whether the browser shrinks the page or only the visual viewport. Release v0.27.1. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
9ed63281ed
commit
5982563579
7 files changed
+71
-13
No files matched your search
@@ -4,7 +4,7 @@ import { ArrowDown, ArrowUp, IndentDecrease, IndentIncrease } from 'lucide-react
|
||||
import { useKeyboardInset } from '../../lib/useKeyboardInset';
|
||||
|
||||
// Phones and tablets have no Tab key: while a bullet is being edited, a slim bar sits right above the
|
||||
// on-screen keyboard with outdent / indent and move up / down (the bullet takes its children along).
|
||||
// on-screen keyboard (only while it is open) with outdent / indent and move up / down (the bullet takes its children along).
|
||||
export const isTouchOnly =
|
||||
typeof window !== 'undefined' &&
|
||||
!!window.matchMedia?.('(hover: none) and (pointer: coarse)').matches &&
|
||||
@@ -19,7 +19,7 @@ interface MobileOutlineBarProps {
|
||||
|
||||
export const MobileOutlineBar: React.FC<MobileOutlineBarProps> = ({ onOutdent, onIndent, onMoveUp, onMoveDown }) => {
|
||||
// iOS keeps fixed elements behind the keyboard: lift the bar by the keyboard's height
|
||||
const { inset } = useKeyboardInset();
|
||||
const { inset, keyboardOpen } = useKeyboardInset();
|
||||
|
||||
const button = (label: string, icon: React.ReactNode, action: () => void) => (
|
||||
<button
|
||||
@@ -36,6 +36,9 @@ export const MobileOutlineBar: React.FC<MobileOutlineBarProps> = ({ onOutdent, o
|
||||
</button>
|
||||
);
|
||||
|
||||
// Keyboard closed (e.g. back button) while the bullet keeps its focus: no bar over the bottom navigation
|
||||
if (!keyboardOpen) return null;
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className="fixed left-0 right-0 z-[70] flex items-center justify-center gap-2 px-3 py-1.5 bg-panel/95 backdrop-blur-md border-t border-border"
|
||||
|
||||
Reference in new issue
Block a user