From 9bccc72668c90746df44422e02638808577298c2 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Fri, 7 Nov 2025 21:15:51 +0200
Subject: [PATCH] client/options/keep content centered: simplify the inner
 workings

---
 apps/client/src/stylesheets/style.css               |  2 --
 apps/client/src/stylesheets/theme-next/pages.css    |  5 ++++-
 apps/client/src/widgets/collections/NoteList.css    | 13 +++++++------
 .../client/src/widgets/containers/root_container.ts |  6 +-----
 apps/client/src/widgets/note_detail.ts              |  7 +++++--
 5 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 02d3729ea..399630fd6 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -1811,8 +1811,6 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 .note-split {
     /* Limits the maximum width of the note */
     --max-content-width: var(--preferred-max-content-width);
-    /* Indicates the inline margin of the content. If set to "auto" the content will be centered. */
-    --content-margin-inline: var(--preferred-content-margin-inline);
 
     margin-inline-start: auto;
     margin-inline-end: auto;
diff --git a/apps/client/src/stylesheets/theme-next/pages.css b/apps/client/src/stylesheets/theme-next/pages.css
index 4c33f727b..85c120bf3 100644
--- a/apps/client/src/stylesheets/theme-next/pages.css
+++ b/apps/client/src/stylesheets/theme-next/pages.css
@@ -174,7 +174,6 @@ div.note-detail-empty {
 
 .options-section:not(.tn-no-card) {
     margin-bottom: calc(var(--options-title-offset) + 26px) !important;
-    margin-inline: var(--content-margin-inline);
     box-shadow: var(--card-box-shadow);
     border: 1px solid var(--card-border-color) !important;
     border-radius: 8px;
@@ -182,6 +181,10 @@ div.note-detail-empty {
     padding: var(--options-card-padding);
 }
 
+body.prefers-centered-content .options-section:not(.tn-no-card) {
+    margin-inline: auto;
+}
+
 body.desktop .options-section:not(.tn-no-card) {
     min-width: var(--options-card-min-width);
     max-width: var(--options-card-max-width);
diff --git a/apps/client/src/widgets/collections/NoteList.css b/apps/client/src/widgets/collections/NoteList.css
index ee2410ed1..4faffc14f 100644
--- a/apps/client/src/widgets/collections/NoteList.css
+++ b/apps/client/src/widgets/collections/NoteList.css
@@ -1,15 +1,16 @@
 .note-list-widget {
     min-height: 0;
-    /* Inherited from .note-split */
-    max-width: var(--max-content-width);
-    /* Inherited from .note-split. If set to "auto" the list widget will be centered horizontally. */
-    margin-inline: var(--content-margin-inline);
-
-
+    max-width: var(--max-content-width); /* Inherited from .note-split */
+ 
     overflow: auto;
     contain: none !important;
 }
 
+body.prefers-centered-content .note-list-widget {
+    /* Horizontally center the widget in its parent when the "Keep content centered" option is on /*
+    margin-inline: auto;
+}
+
 .note-list-widget .note-list {
     padding: 10px;
 }
diff --git a/apps/client/src/widgets/containers/root_container.ts b/apps/client/src/widgets/containers/root_container.ts
index dd0ba384e..d2622e6e2 100644
--- a/apps/client/src/widgets/containers/root_container.ts
+++ b/apps/client/src/widgets/containers/root_container.ts
@@ -69,13 +69,9 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
 
     #setMaxContentWidth() {
         const width = Math.max(options.getInt("maxContentWidth") || 0, 640);
-        const centerContent = options.is("centerContent");
-
         document.body.style.setProperty("--preferred-max-content-width", `${width}px`);
 
-        // To center the content, "--preferred-content-margin-inline" should be set to "auto".
-        document.body.style.setProperty("--preferred-content-margin-inline",
-                                        (centerContent) ? "auto" : "unset");
+        document.body.classList.toggle("prefers-centered-content", options.is("centerContent"));
     }
 
     #setMotion() {
diff --git a/apps/client/src/widgets/note_detail.ts b/apps/client/src/widgets/note_detail.ts
index 315260ca7..3fe13af0f 100644
--- a/apps/client/src/widgets/note_detail.ts
+++ b/apps/client/src/widgets/note_detail.ts
@@ -40,12 +40,15 @@ const TPL = /*html*/`
     <style>
     .note-detail {
         max-width: var(--max-content-width); /* Inherited from .note-split */
-        /* Inherited from .note-split. If set to "auto" the note detail widget will be centered horizontally. */
-        margin-inline: var(--content-margin-inline);
         font-family: var(--detail-font-family);
         font-size: var(--detail-font-size);
     }
 
+    body.prefers-centered-content .note-detail {
+        /* Horizontally center the widget in its parent when the "Keep content centered" option is on /*
+        margin-inline: auto;
+    }
+
     .note-detail.full-height {
         height: 100%;
     }