fix(mobile): sheets above the keyboard, emoji picker, cleaner header
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:
sandrodachandClaude Opus 5.5 committed 2026-10-29 06:43:51 +01:00
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);
});
});