Merge dev into main (v0.59.3)

CHANGELOG.md

@@ -6,6 +6,11 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V
 
 ## [Unreleased]
 
+## [0.59.3] - 2026-11-02
+
+### Fixed
+- Chrome: Rechts neben der Seite stand seit 0.59.1 ein weißer Streifen, auf Seiten ohne Scrollbalken über die ganze Höhe. Der Streifen hat jetzt die Farben von Kopfleiste und Seite, und der Scrollbalken der Seite ist auch im dunklen Theme sichtbar.
+
 ## [0.59.2] - 2026-11-02
 
 ### Fixed
@@ -864,7 +869,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.2...dev
+[Unreleased]: https://git.dsit.me/sandrodach/MindSift/compare/v0.59.3...dev
+[0.59.3]: https://git.dsit.me/sandrodach/MindSift/compare/v0.59.2...v0.59.3
 [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

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.2-16a34a?style=flat-square)](CHANGELOG.md)
+[![Version](https://img.shields.io/badge/Version-v0.59.3-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.2",
+  "version": "0.59.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mindsift-frontend",
-      "version": "0.59.2",
+      "version": "0.59.3",
       "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.2",
+  "version": "0.59.3",
   "license": "AGPL-3.0-only",
   "type": "module",
   "scripts": {

frontend/src/index.css

@@ -35,19 +35,36 @@
 html {
   scrollbar-gutter: stable;
 }
+/* Chrome paints an empty gutter (page without scrollbar) plain white, ignoring the page background. There
+   the scrollbar is always shown instead: without anything to scroll it is an empty track, coloured like
+   the header and page by body::-webkit-scrollbar below. Firefox keeps the gutter, which it paints with the
+   html background. */
+@supports selector(::-webkit-scrollbar) {
+  html {
+    overflow-y: scroll;
+  }
+}
+/* Header colour down to the header's height (--app-header-h, set by App), then the page colour. The header's
+   bottom line is its own layer on top, since the theme gives it as a translucent colour. Defined on body:
+   Chrome resolves variables for the page scrollbar from there (html sees it through inheritance too). */
+:root,
+body {
+  --header-gutter-bg: linear-gradient(
+      to bottom,
+      transparent 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),
+      transparent var(--app-header-h, 0px)
+    ),
+    linear-gradient(to bottom, var(--bg-panel) var(--app-header-h, 0px), var(--bg-app) var(--app-header-h, 0px));
+}
 /* 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(
+    background: var(--header-gutter-bg);
-        to bottom,
+    background-attachment: fixed;
-        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;
   }
 }
 
@@ -69,6 +86,18 @@ body {
   background: transparent;
 }
 
+/* Chrome takes the page scrollbar's style from body (html:: does not apply) and paints white behind a
+   transparent track, where Firefox shows the html background: the page scrollbar gets the same
+   background as html above, on the desktop with the header colour on top */
+body::-webkit-scrollbar {
+  background: var(--bg-app);
+}
+@media (min-width: 768px) {
+  body::-webkit-scrollbar {
+    background: var(--header-gutter-bg);
+  }
+}
+
 ::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb);
   border-radius: var(--radius-btn);