Merge dev into main (v0.59.2)

CHANGELOG.md

@@ -6,6 +6,11 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V
 
 ## [Unreleased]
 
+## [0.59.2] - 2026-11-02
+
+### Fixed
+- Desktop: Rechts neben der Kopfleiste war seit 0.59.1 ein Stück in der Seitenfarbe zu sehen (der freigehaltene Platz für den Scrollbalken). Die Kopfleiste reicht dort jetzt farblich bis an den Fensterrand.
+
 ## [0.59.1] - 2026-11-02
 
 ### Fixed
@@ -859,7 +864,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.59.1...dev
+[Unreleased]: https://git.dsit.me/sandrodach/MindSift/compare/v0.59.2...dev
+[0.59.2]: https://git.dsit.me/sandrodach/MindSift/compare/v0.59.1...v0.59.2
 [0.59.1]: https://git.dsit.me/sandrodach/MindSift/compare/v0.59.0...v0.59.1
 [0.59.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.58.0...v0.59.0
 [0.58.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.57.0...v0.58.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.59.1-16a34a?style=flat-square)](CHANGELOG.md)
+[![Version](https://img.shields.io/badge/Version-v0.59.2-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.59.1",
+  "version": "0.59.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mindsift-frontend",
-      "version": "0.59.1",
+      "version": "0.59.2",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@fontsource-variable/inter": "5.3.0",

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mindsift-frontend",
   "private": true,
-  "version": "0.59.1",
+  "version": "0.59.2",
   "license": "AGPL-3.0-only",
   "type": "module",
   "scripts": {

frontend/src/App.tsx

@@ -205,6 +205,22 @@ export const App: React.FC = () => {
   // Profile Dropdown State
   const [showProfileMenu, setShowProfileMenu] = useState(false);
   const connection = useConnectionState();
+
+  // Height of the app header as --app-header-h: the page background paints the header colour up to there,
+  // so the scrollbar gutter on the right continues the header instead of showing the page colour
+  const [headerEl, setHeaderEl] = useState<HTMLElement | null>(null);
+  useEffect(() => {
+    if (!headerEl || typeof ResizeObserver === 'undefined') return;
+    const root = document.documentElement;
+    const update = () => root.style.setProperty('--app-header-h', `${headerEl.offsetHeight}px`);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(headerEl);
+    return () => {
+      observer.disconnect();
+      root.style.removeProperty('--app-header-h');
+    };
+  }, [headerEl]);
   const [showAbout, setShowAbout] = useState(false);
   const [showTriageTrash, setShowTriageTrash] = useState(false);
   const { update: availableUpdate, dismiss: dismissUpdate } = useUpdateCheck();
@@ -909,7 +925,10 @@ export const App: React.FC = () => {
       }`}
     >
       {/* Top Header Bar: Floating on mobile, solid panel on desktop */}
-      <header className="sticky top-0 z-30 bg-canvas/85 backdrop-blur-md sm:bg-panel sm:border-b sm:border-border sm:shadow-sm">
+      <header
+        ref={setHeaderEl}
+        className="sticky top-0 z-30 bg-canvas/85 backdrop-blur-md sm:bg-panel sm:border-b sm:border-border sm:shadow-sm"
+      >
         {/* Mobile Header: Floating Bar with Logo Action Dropdown Left & Profile Avatar Right */}
         <div className="sm:hidden flex items-center justify-between h-14 px-4 pt-1">
           <button

frontend/src/index.css

@@ -35,6 +35,21 @@
 html {
   scrollbar-gutter: stable;
 }
+/* The gutter shows the page background; on the desktop it carries the header colour (and its bottom
+   line) down to the header's height (--app-header-h, set by App), fixed like the sticky header, so the
+   header seems to run to the window edge */
+@media (min-width: 768px) {
+  html {
+    background: linear-gradient(
+        to bottom,
+        var(--bg-panel) calc(var(--app-header-h, 0px) - 1px),
+        var(--border-color) calc(var(--app-header-h, 0px) - 1px),
+        var(--border-color) var(--app-header-h, 0px),
+        var(--bg-app) var(--app-header-h, 0px)
+      )
+      fixed;
+  }
+}
 
 body {
   background-color: var(--bg-app);