From fa64ca2c934dadac117f54193e00dcb1c780e0a4 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Fri, 7 Nov 2025 18:17:28 +0200
Subject: [PATCH] client: add an option to center the content

---
 apps/client/src/stylesheets/style.css            |  2 ++
 apps/client/src/translations/en/translation.json |  3 ++-
 apps/client/src/widgets/collections/NoteList.css |  7 ++++++-
 .../src/widgets/containers/root_container.ts     | 16 +++++++++++-----
 apps/client/src/widgets/note_detail.ts           |  2 ++
 .../widgets/type_widgets/options/appearance.tsx  |  7 ++++++-
 apps/server/src/routes/api/options.ts            |  1 +
 apps/server/src/services/options_init.ts         |  1 +
 packages/commons/src/lib/options_interface.ts    |  1 +
 9 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 399630fd6..02d3729ea 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -1811,6 +1811,8 @@ 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/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 58a7d8d8c..ce29ad6c2 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1110,7 +1110,8 @@
     "title": "Content Width",
     "default_description": "Trilium by default limits max content width to improve readability for maximized screens on wide screens.",
     "max_width_label": "Max content width",
-    "max_width_unit": "pixels"
+    "max_width_unit": "pixels",
+    "centerContent": "Keep content centered"
   },
   "native_title_bar": {
     "title": "Native Title Bar (requires app restart)",
diff --git a/apps/client/src/widgets/collections/NoteList.css b/apps/client/src/widgets/collections/NoteList.css
index 2257e7f59..ee2410ed1 100644
--- a/apps/client/src/widgets/collections/NoteList.css
+++ b/apps/client/src/widgets/collections/NoteList.css
@@ -1,6 +1,11 @@
 .note-list-widget {
     min-height: 0;
-    max-width: var(--max-content-width); /* Inherited from .note-split */
+    /* 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);
+
+
     overflow: auto;
     contain: none !important;
 }
diff --git a/apps/client/src/widgets/containers/root_container.ts b/apps/client/src/widgets/containers/root_container.ts
index 4ab82ffdc..33463bc29 100644
--- a/apps/client/src/widgets/containers/root_container.ts
+++ b/apps/client/src/widgets/containers/root_container.ts
@@ -31,7 +31,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
             window.visualViewport?.addEventListener("resize", () => this.#onMobileResize());
         }
 
-        this.#setMaxContentWidth(options.getInt("maxContentWidth") ?? 0);
+        this.#setMaxContentWidth();
         this.#setMotion(options.is("motionEnabled"));
         this.#setShadows(options.is("shadowsEnabled"));
         this.#setBackdropEffects(options.is("backdropEffectsEnabled"));
@@ -54,8 +54,8 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
             this.#setBackdropEffects(options.is("backdropEffectsEnabled"));
         }
 
-        if (loadResults.isOptionReloaded("maxContentWidth")) {
-            this.#setMaxContentWidth(options.getInt("maxContentWidth") ?? 0);
+        if (loadResults.isOptionReloaded("maxContentWidth") || loadResults.isOptionReloaded("centerContent")) {
+            this.#setMaxContentWidth();
         }
     }
 
@@ -66,9 +66,15 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
         this.$widget.toggleClass("virtual-keyboard-opened", isKeyboardOpened);
     }
 
-    #setMaxContentWidth(width: number) {
-        width = Math.max(width, 640);
+    #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");
     }
 
     #setMotion(enabled: boolean) {
diff --git a/apps/client/src/widgets/note_detail.ts b/apps/client/src/widgets/note_detail.ts
index 6ab265c46..315260ca7 100644
--- a/apps/client/src/widgets/note_detail.ts
+++ b/apps/client/src/widgets/note_detail.ts
@@ -40,6 +40,8 @@ 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);
     }
diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx
index 7a6431f35..19ddf766c 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.tsx
+++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx
@@ -284,7 +284,8 @@ function SmoothScrollEnabledOption() {
 }
 
 function MaxContentWidth() {
-    const [ maxContentWidth, setMaxContentWidth ] = useTriliumOption("maxContentWidth");
+    const [maxContentWidth, setMaxContentWidth] = useTriliumOption("maxContentWidth");
+    const [centerContent, setCenterContent] = useTriliumOptionBool("centerContent");
 
     return (
         <OptionsSection title={t("max_content_width.title")}>
@@ -299,6 +300,10 @@ function MaxContentWidth() {
                     />
                 </FormGroup>
             </Column>
+
+            <FormCheckbox label={t("max_content_width.centerContent")}
+                          currentValue={centerContent}
+                          onChange={setCenterContent} />
         </OptionsSection>
     )
 }
diff --git a/apps/server/src/routes/api/options.ts b/apps/server/src/routes/api/options.ts
index 8e9d6e1a6..05f659db8 100644
--- a/apps/server/src/routes/api/options.ts
+++ b/apps/server/src/routes/api/options.ts
@@ -68,6 +68,7 @@ const ALLOWED_OPTIONS = new Set<OptionNames>([
     "smoothScrollEnabled",
     "backdropEffectsEnabled",
     "maxContentWidth",
+    "centerContent",
     "compressImages",
     "downloadImagesAutomatically",
     "minTocHeadings",
diff --git a/apps/server/src/services/options_init.ts b/apps/server/src/services/options_init.ts
index 7cb939910..e170b347c 100644
--- a/apps/server/src/services/options_init.ts
+++ b/apps/server/src/services/options_init.ts
@@ -117,6 +117,7 @@ const defaultOptions: DefaultOption[] = [
     { name: "weeklyBackupEnabled", value: "true", isSynced: false },
     { name: "monthlyBackupEnabled", value: "true", isSynced: false },
     { name: "maxContentWidth", value: "1200", isSynced: false },
+    { name: "centerContent", value: "false", isSynced: false },
     { name: "compressImages", value: "true", isSynced: true },
     { name: "downloadImagesAutomatically", value: "true", isSynced: true },
     { name: "minTocHeadings", value: "5", isSynced: true },
diff --git a/packages/commons/src/lib/options_interface.ts b/packages/commons/src/lib/options_interface.ts
index 7671d4315..0e044d37c 100644
--- a/packages/commons/src/lib/options_interface.ts
+++ b/packages/commons/src/lib/options_interface.ts
@@ -82,6 +82,7 @@ export interface OptionDefinitions extends KeyboardShortcutsOptions<KeyboardActi
     autoReadonlySizeText: number;
     autoReadonlySizeCode: number;
     maxContentWidth: number;
+    centerContent: boolean;
     minTocHeadings: number;
     eraseUnusedAttachmentsAfterSeconds: number;
     eraseUnusedAttachmentsAfterTimeScale: number;