diff --git a/AGENTS.md b/AGENTS.md
index a5dcc63..2d68f31 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -85,7 +85,7 @@ Fremde Branches (z. B. von anderen Agenten) werden vor dem Mergen geprüft.
 ## Oberfläche
 
 - **Einheitliche Bedienelemente:** Personen-Suche, Profilbild-Stapel, Zähler und weitere Muster stehen in [Doku/ui-patterns.md](Doku/ui-patterns.md). Vorhandene Komponenten verwenden statt neuer Varianten; neue gemeinsame Muster dort ergänzen.
-- **Handy und Desktop:** Unter `sm` ist Handy-Layout, ab `lg` die volle Desktop-Ansicht (z. B. Seitenleiste neben der Notiz). Wird nur das Handy geändert, bleiben die Werte ab `sm`/`lg` exakt wie vorher.
+- **Handy und Desktop:** Unter `sm` ist Handy-Layout, ab `lg` die volle Desktop-Ansicht (z. B. Seitenleiste neben der Notiz). `sm` liegt bei **768 px**, nicht bei Tailwinds 640 px (Handys quer und kleine Tablets bekommen das Handy-Layout); `md` ist gleich `sm`. Im Code dafür `isPhoneWidth()` aus `lib/breakpoints.ts` verwenden, keine feste Pixelzahl. Wird nur das Handy geändert, bleiben die Werte ab `sm`/`lg` exakt wie vorher.
 - **Antippen am Handy:** Ziele mindestens 44 px hoch (`h-11 sm:h-…`). Auf reinen Touch-Geräten gibt es kein HTML5-Drag-&-Drop; Kanban nutzt dafür `useKanbanTouchDrag`, die Notizen die Leiste über der Tastatur (`MobileOutlineBar`).
 - **Themes:** Farben nur über die Theme-Variablen bzw. Klassen (`bg-panel`, `bg-canvas`, `text-main`, `text-muted`, `border-border`, `bg-accent` …), keine festen Farben. Rahmen mit `bg-panel`/`bg-canvas` bekommen die Ecken des Themes automatisch; liegt darin ein Kopfbereich mit eigenem Hintergrund, braucht der Rahmen `overflow-hidden`, sonst ragen bei runden Ecken die Kanten heraus.
 - **Installierte App (PWA):** Manifest-Änderungen (Farben, Verknüpfungen) übernimmt Android erst, wenn es die App aktualisiert (bis etwa einen Tag) oder nach Neuinstallation; normaler App-Code kommt beim nächsten Start. Ändert sich der Cache-Inhalt des Service Workers, `VERSION` in `frontend/public/sw.js` erhöhen.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31dded0..8c83c02 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,14 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V
 
 ## [Unreleased]
 
+## [0.57.0] - 2026-11-02
+
+### Changed
+- Die Handy-Ansicht gilt jetzt bis 767 px Breite (bisher bis 639 px). Handys im Querformat, kleine Tablets im Hochformat (z. B. iPad mini) und schmale Fenster bekommen damit die Ansicht mit großen Tippzielen und unterer Navigation statt einer gedrängten Desktop-Ansicht.
+
+### Fixed
+- Desktop: Die Quick-Dump-Leiste steht genau mittig im Kopf und bleibt stehen, wenn der Verbindungsstatus wechselt (z. B. von „online“ zu „eingeschränkt“) oder der Name lang ist.
+
 ## [0.56.0] - 2026-11-02
 
 ### Added
@@ -828,7 +836,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.56.0...dev
+[Unreleased]: https://git.dsit.me/sandrodach/MindSift/compare/v0.57.0...dev
+[0.57.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.56.0...v0.57.0
 [0.56.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.55.0...v0.56.0
 [0.55.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.54.0...v0.55.0
 [0.54.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.53.0...v0.54.0
diff --git a/README.md b/README.md
index 24d6051..949fdcc 100644
--- a/README.md
+++ b/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.56.0-16a34a?style=flat-square)](CHANGELOG.md)
+[![Version](https://img.shields.io/badge/Version-v0.57.0-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.
 
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index fcc30a7..75e688a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "mindsift-frontend",
-  "version": "0.56.0",
+  "version": "0.57.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mindsift-frontend",
-      "version": "0.56.0",
+      "version": "0.57.0",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@fontsource-variable/inter": "5.3.0",
diff --git a/frontend/package.json b/frontend/package.json
index 0cc5c76..aecf55a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mindsift-frontend",
   "private": true,
-  "version": "0.56.0",
+  "version": "0.57.0",
   "license": "AGPL-3.0-only",
   "type": "module",
   "scripts": {
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 6e8c3c8..5b5416b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -82,6 +82,7 @@ import { consumePendingShares, formatSharedThought } from './lib/shareTarget';
 import { APP_VERSION } from './version';
 import { readViewSession, writeViewSession } from './lib/viewSession';
 import { setVoicePreference } from './lib/voice';
+import { isPhoneWidth } from './lib/breakpoints';
 
 // Connection status at the profile (useConnectionState); full class names for Tailwind
 const CONNECTION_STATUS = {
@@ -302,7 +303,7 @@ export const App: React.FC = () => {
     // pendingShortcut above re-runs this effect and must not cancel the timer)
     window.setTimeout(() => {
       if (target === 'triage') handleTriggerAddButton();
-      else if (window.innerWidth < 640 || target === 'lists') primaryActionRef.current?.();
+      else if (isPhoneWidth() || target === 'lists') primaryActionRef.current?.();
     }, 400);
   }, [pendingShortcut, user?.id, activeTab]);
 
@@ -465,7 +466,7 @@ export const App: React.FC = () => {
   // Immediately offer Web-App installation on mobile if not yet running as installed standalone app
   useEffect(() => {
     if (!user || isStandaloneApp) return;
-    if (window.innerWidth < 640 && !sessionStorage.getItem('mindsift_pwa_dismissed')) {
+    if (isPhoneWidth() && !sessionStorage.getItem('mindsift_pwa_dismissed')) {
       setShowPwaInstallModal(true);
     }
   }, [user?.id, isStandaloneApp]);
@@ -828,7 +829,7 @@ export const App: React.FC = () => {
 
   const handleTriggerAddButton = () => {
     triggerHaptic(20);
-    if (window.innerWidth < 640) {
+    if (isPhoneWidth()) {
       openMobileTriageCapture();
     } else {
       window.scrollTo({ top: 0, behavior: 'smooth' });
@@ -1008,15 +1009,16 @@ export const App: React.FC = () => {
           </div>
         </div>
 
-        {/* Desktop Header: 3-column Layout (Logo, InstantCaptureBar, Profile Pill) */}
-        <div className="hidden sm:flex max-w-6xl mx-auto px-4 py-2 items-start justify-between gap-6">
+        {/* Desktop Header: 3-column grid (Logo, InstantCaptureBar, Profile Pill) with equal outer columns, so
+            the capture bar stays exactly centred whatever name or status stands on the right */}
+        <div className="hidden sm:grid grid-cols-[minmax(12rem,1fr)_minmax(0,36rem)_minmax(12rem,1fr)] max-w-6xl mx-auto px-4 py-2 items-start gap-6">
           {/* Logo & Headline */}
           <div
             onClick={() => {
               setActiveTab('triage');
               handleTriggerAddButton();
             }}
-            className="h-9 flex items-center gap-2.5 cursor-pointer group select-none flex-shrink-0"
+            className="h-9 flex items-center gap-2.5 cursor-pointer group select-none flex-shrink-0 justify-self-start"
           >
             <div className="w-7 h-7 bg-accent text-on-accent rounded-btn flex items-center justify-center">
               <Brain className="w-4 h-4" />
@@ -1039,7 +1041,7 @@ export const App: React.FC = () => {
           </div>
 
           {/* Quick-Capture Input Bubble directly in Header (above Tabs) */}
-          <div className="flex-1 max-w-xl mx-auto flex items-center gap-2">
+          <div className="w-full max-w-xl mx-auto flex items-center gap-2">
             <div className="flex-1">
               <InstantCaptureBar
                 onCaptured={handleCaptured}
@@ -1059,7 +1061,7 @@ export const App: React.FC = () => {
           </div>
 
           {/* User Profile Pill & Dropdown Menu */}
-          <div className="relative h-9 flex items-center gap-2 flex-shrink-0" ref={dropdownRef}>
+          <div className="relative h-9 flex items-center gap-2 flex-shrink-0 justify-self-end" ref={dropdownRef}>
             <button
               onClick={() => {
                 triggerHaptic(10);
@@ -1069,7 +1071,8 @@ export const App: React.FC = () => {
               title="Benutzermenü öffnen"
             >
               <UserAvatar user={user} size="sm" />
-              <span className="flex flex-col items-start leading-tight">
+              {/* Wide enough for the longest status ("eingeschränkt"), so switching status moves nothing */}
+              <span className="flex flex-col items-start leading-tight min-w-[5.5rem]">
                 <span className="max-w-[130px] truncate hidden sm:inline text-main font-medium">
                   {user.displayName}
                 </span>
diff --git a/frontend/src/features/lists/SharedListsView.tsx b/frontend/src/features/lists/SharedListsView.tsx
index 0114d29..88752d8 100644
--- a/frontend/src/features/lists/SharedListsView.tsx
+++ b/frontend/src/features/lists/SharedListsView.tsx
@@ -18,6 +18,7 @@ import { AvatarStack, AvatarPerson } from '../../components/AvatarStack';
 import { CountBadge } from '../../components/CountBadge';
 import { ListSwitcher } from '../../components/ListSwitcher';
 import { LivePill } from '../../components/LivePill';
+import { isPhoneWidth } from '../../lib/breakpoints';
 import { OriginBadge } from '../../components/OriginBadge';
 import { VoiceInputButton } from '../../components/VoiceInputButton';
 import { FormSheet } from '../../components/FormSheet';
@@ -126,10 +127,10 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
   const inputRef = useRef<HTMLInputElement | null>(null);
 
   // Phones: the add form lives in a sheet opened by "+" instead of taking room above the list
-  const [isPhone, setIsPhone] = useState(() => typeof window !== 'undefined' && window.innerWidth < 640);
+  const [isPhone, setIsPhone] = useState(isPhoneWidth);
   const [showAddSheet, setShowAddSheet] = useState(false);
   useEffect(() => {
-    const onResize = () => setIsPhone(window.innerWidth < 640);
+    const onResize = () => setIsPhone(isPhoneWidth());
     window.addEventListener('resize', onResize);
     return () => window.removeEventListener('resize', onResize);
   }, []);
@@ -838,7 +839,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
   }, [openItems]);
 
   const focusNewItemInput = () => {
-    if (window.innerWidth < 640) {
+    if (isPhoneWidth()) {
       setShowAddSheet(true);
       return;
     }
diff --git a/frontend/src/features/workspace/EmojiPickerModal.tsx b/frontend/src/features/workspace/EmojiPickerModal.tsx
index dc3ba4e..d84c0d7 100644
--- a/frontend/src/features/workspace/EmojiPickerModal.tsx
+++ b/frontend/src/features/workspace/EmojiPickerModal.tsx
@@ -4,6 +4,7 @@ import { X, Trash2, Loader2 } from 'lucide-react';
 import type { EmojiClickData } from 'emoji-picker-react';
 import { Categories, EmojiStyle, Theme, SuggestionMode } from 'emoji-picker-react';
 import { useKeyboardInset } from '../../lib/useKeyboardInset';
+import { isPhoneWidth } from '../../lib/breakpoints';
 
 // Lazy-load emoji-picker-react so the main bundle size stays small
 const EmojiPicker = React.lazy(() => import('emoji-picker-react'));
@@ -38,7 +39,7 @@ export const EmojiPickerModal: React.FC<EmojiPickerModalProps> = ({
   anchor,
 }) => {
   const { inset, visibleHeight } = useKeyboardInset();
-  const isPhone = typeof window !== 'undefined' && window.innerWidth < 640;
+  const isPhone = isPhoneWidth();
   // On phones the picker shrinks with the keyboard so search field and results stay visible
   const pickerHeight = isPhone ? Math.max(200, Math.min(350, visibleHeight - 110)) : 300;
   const [isDark, setIsDark] = useState<boolean>(() =>
@@ -105,14 +106,14 @@ export const EmojiPickerModal: React.FC<EmojiPickerModalProps> = ({
 
   const picker = (
     <>
-      {/* Mobile Backdrop (< 640px) */}
+      {/* Mobile Backdrop (below sm) */}
       <div
         className={`fixed inset-0 bg-black/60 sm:hidden backdrop-blur-xs ${anchor ? 'z-[60]' : 'z-40'}`}
         onClick={onClose}
         aria-hidden="true"
       />
 
-      {/* Main Container: Mobile Bottom-Sheet (<640px) & Desktop Popover (>=640px) */}
+      {/* Main Container: Mobile Bottom-Sheet (below sm) & Desktop Popover (from sm) */}
       <div
         ref={containerRef}
         className={`
diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index 298b136..9708483 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -60,6 +60,7 @@ import { CountBadge } from '../../components/CountBadge';
 import { EmojiIconButton } from '../../components/EmojiIconButton';
 import { LazyMount } from '../../components/LazyMount';
 import { extractHashtags } from '../../lib/hashtags';
+import { isPhoneWidth } from '../../lib/breakpoints';
 
 interface WorkspaceViewProps {
   currentUser?: User | null;
@@ -624,7 +625,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   const [newNoteIcon, setNewNoteIcon] = useState('🗒️');
   const openNewNote = useCallback(
     (folderPath = '') => {
-      if (window.innerWidth >= 640) {
+      if (!isPhoneWidth()) {
         void handleCreateDocument(folderPath);
         return;
       }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 42c4c6d..c1c62f2 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -563,7 +563,7 @@ body {
   --epr-dark-category-icon-active-color: var(--accent-primary);
 }
 
-@media (max-width: 639px) {
+@media (max-width: 767px) {
   /* Prevent iOS auto-zoom on input focus */
   .mindsift-emoji-picker .EmojiPickerReact input.epr-search-input {
     font-size: 1rem !important;
@@ -584,7 +584,7 @@ body {
   }
 }
 
-@media (min-width: 640px) {
+@media (min-width: 768px) {
   /* Desktop: compact like a context menu, in step with the app's small type (the sprite of the category
      icons scales with its size variable) */
   .mindsift-emoji-picker .EmojiPickerReact {
@@ -630,7 +630,7 @@ fieldset:disabled :is(button, input, select, textarea) {
   --outline-indent: 14px;
   --outline-min-text: 14rem;
 }
-@media (min-width: 640px) {
+@media (min-width: 768px) {
   :root {
     --outline-indent: 22px;
     --outline-min-text: 0px;
diff --git a/frontend/src/lib/breakpoints.ts b/frontend/src/lib/breakpoints.ts
new file mode 100644
index 0000000..0bb9d07
--- /dev/null
+++ b/frontend/src/lib/breakpoints.ts
@@ -0,0 +1,5 @@
+// Width below which the app uses its phone layout; the same value as Tailwind's sm (tailwind.config.js)
+// and the media queries in index.css.
+export const PHONE_MAX_WIDTH = 768;
+
+export const isPhoneWidth = (): boolean => typeof window !== 'undefined' && window.innerWidth < PHONE_MAX_WIDTH;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index b722fd1..f8d72f5 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -12,6 +12,16 @@ export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   darkMode: 'class',
   theme: {
+    // Phone layout below sm, desktop from sm (see AGENTS.md). sm is 768 px, not Tailwind's 640, so phones in
+    // landscape and small tablets (iPad mini upright) get the touch layout too; keep PHONE_MAX_WIDTH in
+    // src/lib/breakpoints.ts and the media queries in index.css in step.
+    screens: {
+      sm: '768px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      '2xl': '1536px',
+    },
     extend: {
       colors: {
         canvas: v('--bg-app'),