fix(mobile): sheets above the keyboard, emoji picker, cleaner header
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m25s
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m25s
- FormSheet: create dialogs (task list, shopping list, folder) as bottom sheet right above the on-screen keyboard (visualViewport), large fields; centred or anchored dialog on desktop - Emoji picker: category icons keep their sprite size (no doubled icons, round highlight), one 'Zuletzt verwendet' (library category, German names), sheet and picker height follow the keyboard - Mobile header no longer repeats the current section next to the logo Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
108d166990
commit
eaabe469d5
10 files changed
+249
-217
No files matched your search
@@ -0,0 +1,35 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { act, renderHook } from '@testing-library/react';
|
||||
import { useKeyboardInset } from '../useKeyboardInset';
|
||||
|
||||
// Simulates iOS: the layout viewport keeps its height, the visual viewport shrinks by the keyboard
|
||||
function mockVisualViewport(height: number) {
|
||||
const listeners: Record<string, (() => void)[]> = {};
|
||||
const vv = {
|
||||
height,
|
||||
offsetTop: 0,
|
||||
addEventListener: (t: string, fn: () => void) => (listeners[t] = [...(listeners[t] || []), fn]),
|
||||
removeEventListener: (t: string, fn: () => void) => (listeners[t] = (listeners[t] || []).filter((f) => f !== fn)),
|
||||
};
|
||||
Object.defineProperty(window, 'visualViewport', { value: vv, configurable: true });
|
||||
Object.defineProperty(window, 'innerHeight', { value: 844, configurable: true });
|
||||
return {
|
||||
open(keyboard: number) {
|
||||
vv.height = 844 - keyboard;
|
||||
(listeners.resize || []).forEach((fn) => fn());
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
describe('useKeyboardInset', () => {
|
||||
it('reports the keyboard height so sheets can sit above it', () => {
|
||||
const vv = mockVisualViewport(844);
|
||||
const { result } = renderHook(() => useKeyboardInset());
|
||||
expect(result.current.inset).toBe(0);
|
||||
act(() => vv.open(336));
|
||||
expect(result.current.inset).toBe(336);
|
||||
expect(result.current.visibleHeight).toBe(508);
|
||||
act(() => vv.open(0));
|
||||
expect(result.current.inset).toBe(0);
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user