fix(mobile): outline bar only while the keyboard is open

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>

CHANGELOG.md

@@ -6,6 +6,11 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V
 
 ## [Unreleased]
 
+## [0.27.1] - 2026-10-31
+
+### Fixed
+- Notizen am Handy: Die Leiste zum Ein- und Ausrücken über der Tastatur blieb stehen, wenn man die Tastatur schloss (z. B. mit der Zurück-Taste), und verdeckte die untere Navigation. Sie erscheint jetzt nur, solange die Tastatur offen ist; ein Tipp in den Punkt holt beides zurück.
+
 ## [0.27.0] - 2026-10-31
 
 ### Changed
@@ -539,7 +544,8 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V
 - Geteilte Listen (Einkaufs-, Pack- und Checklisten) mit `#Kategorie`-Gruppierung, Mengenangaben und Echtzeit-Abhaken.
 - Benutzer-, Gruppen- und Admin-Verwaltung (Ersteinrichtungs-Assistent, Einladungscodes, Profilbilder, persönliche API-Keys & Webhook-Ingest `/api/v1/webhooks/ingest`, JSON-Datenexport) sowie CSS-Theme-Engine mit 4 Themes (`Dark`, `Light`, `High Contrast`, `Soft`) und PWA-Unterstützung.
 
-[Unreleased]: https://git.dsit.me/sandrodach/MindSift/compare/v0.27.0...dev
+[Unreleased]: https://git.dsit.me/sandrodach/MindSift/compare/v0.27.1...dev
+[0.27.1]: https://git.dsit.me/sandrodach/MindSift/compare/v0.27.0...v0.27.1
 [0.27.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.26.1...v0.27.0
 [0.26.1]: https://git.dsit.me/sandrodach/MindSift/compare/v0.26.0...v0.26.1
 [0.26.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.25.1...v0.26.0

README.md

@@ -6,7 +6,7 @@
 [![Self-Hosted](https://img.shields.io/badge/100%25-Self--Hosted-2563eb?style=flat-square)](#)
 [![Docker](https://img.shields.io/badge/Deployment-Single%20Container-2496ed?style=flat-square&logo=docker&logoColor=white)](#-schnellstart)
 [![SQLite](https://img.shields.io/badge/Daten-SQLite-003b57?style=flat-square&logo=sqlite&logoColor=white)](#-deine-daten-gehören-dir)
-[![Version](https://img.shields.io/badge/Version-v0.27.0-16a34a?style=flat-square)](CHANGELOG.md)
+[![Version](https://img.shields.io/badge/Version-v0.27.1-16a34a?style=flat-square)](CHANGELOG.md)
 
 **MindSift** ist eine selbst gehostete Schaltstelle für spontane Gedanken, Aufgaben mit Kanban-Board, hierarchische Outliner-Notizen, die mehrere Personen gleichzeitig bearbeiten können, und gemeinsame Listen. Alles läuft als ein einzelner Container mit eingebetteter SQLite-Datenbank, auf deinem eigenen Server.
 

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mindsift-frontend",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mindsift-frontend",
-      "version": "0.27.0",
+      "version": "0.27.1",
       "license": "Unlicense",
       "dependencies": {
         "@fontsource-variable/inter": "5.3.0",

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mindsift-frontend",
   "private": true,
-  "version": "0.27.0",
+  "version": "0.27.1",
   "license": "Unlicense",
   "type": "module",
   "scripts": {

frontend/src/features/workspace/MobileOutlineBar.tsx

@@ -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"

frontend/src/lib/__tests__/useKeyboardInset.test.tsx

@@ -26,10 +26,30 @@ describe('useKeyboardInset', () => {
     const vv = mockVisualViewport(844);
     const { result } = renderHook(() => useKeyboardInset());
     expect(result.current.inset).toBe(0);
+    expect(result.current.keyboardOpen).toBe(false);
     act(() => vv.open(336));
     expect(result.current.inset).toBe(336);
     expect(result.current.visibleHeight).toBe(508);
+    expect(result.current.keyboardOpen).toBe(true);
     act(() => vv.open(0));
     expect(result.current.inset).toBe(0);
+    expect(result.current.keyboardOpen).toBe(false);
+  });
+
+  it('notices the keyboard also when the page shrinks instead (no inset)', () => {
+    const vv = mockVisualViewport(844);
+    const { result } = renderHook(() => useKeyboardInset());
+    act(() => {
+      Object.defineProperty(window, 'innerHeight', { value: 508, configurable: true });
+      vv.open(336);
+    });
+    expect(result.current.inset).toBe(0);
+    expect(result.current.keyboardOpen).toBe(true);
+    // Browser bars appearing are not a keyboard
+    act(() => {
+      Object.defineProperty(window, 'innerHeight', { value: 788, configurable: true });
+      vv.open(56);
+    });
+    expect(result.current.keyboardOpen).toBe(false);
   });
 });

frontend/src/lib/useKeyboardInset.ts

@@ -1,13 +1,42 @@
 import { useEffect, useState } from 'react';
 
-// Space the on-screen keyboard takes at the bottom (0 without keyboard) and the height that stays
+// Tallest visible height seen at the current width, i.e. the height without keyboard. Tracked from app
-// visible. Fixed bottom sheets use it to sit right above the keyboard instead of behind it (iOS keeps
+// start, so it is known before the first field is focused; a new width (rotation) starts over.
-// fixed elements on the layout viewport; on Android the inset is usually 0 because the page shrinks).
+let fullHeight = 0;
-export function useKeyboardInset(): { inset: number; visibleHeight: number } {
+let fullWidth = 0;
+function noteFullHeight() {
+  const vv = window.visualViewport;
+  if (!vv) return;
+  if (window.innerWidth !== fullWidth) {
+    fullWidth = window.innerWidth;
+    fullHeight = 0;
+  }
+  fullHeight = Math.max(fullHeight, Math.round(vv.height));
+}
+if (typeof window !== 'undefined' && window.visualViewport) {
+  noteFullHeight();
+  window.visualViewport.addEventListener('resize', noteFullHeight);
+}
+
+// More than browser bars appearing or disappearing (about 60 px)
+const KEYBOARD_MIN_PX = 150;
+
+// Space the on-screen keyboard takes at the bottom (0 without keyboard), the height that stays visible
+// and whether a keyboard is open. Fixed bottom sheets use the inset to sit right above the keyboard
+// instead of behind it (iOS keeps fixed elements on the layout viewport; on Android the inset is usually
+// 0 because the page shrinks). keyboardOpen compares with the height without keyboard, so it works in
+// both cases; without visualViewport it is unknown and reported as open.
+export function useKeyboardInset(): { inset: number; visibleHeight: number; keyboardOpen: boolean } {
   const read = () => {
     const vv = typeof window !== 'undefined' ? window.visualViewport : null;
-    if (!vv) return { inset: 0, visibleHeight: typeof window !== 'undefined' ? window.innerHeight : 0 };
+    if (!vv) return { inset: 0, visibleHeight: typeof window !== 'undefined' ? window.innerHeight : 0, keyboardOpen: true };
-    return { inset: Math.max(0, Math.round(window.innerHeight - vv.height - vv.offsetTop)), visibleHeight: Math.round(vv.height) };
+    noteFullHeight();
+    const visibleHeight = Math.round(vv.height);
+    return {
+      inset: Math.max(0, Math.round(window.innerHeight - vv.height - vv.offsetTop)),
+      visibleHeight,
+      keyboardOpen: visibleHeight < fullHeight - KEYBOARD_MIN_PX,
+    };
   };
   const [state, setState] = useState(read);