add configurable max content width with default value of 1200px.

src/public/app/dialogs/options/appearance.js

@@ -163,7 +163,23 @@ const TPL = `
     
     <p>
         To apply font changes, click on 
-        <button class="btn btn-micro" id="reload-frontend-button">reload frontend</button>
+        <button class="btn btn-micro reload-frontend-button">reload frontend</button>
+    </p>
+    
+    <h4>Content width</h4>
+    
+    <p>Trilium by default limits max content width to improve readability for maximized screens on wide screens.</p>
+
+    <div class="form-group row">
+        <div class="col-4">
+            <label for="max-content-width">Max content width in pixels</label>
+            <input type="number" min="200" step="10" class="form-control" id="max-content-width">
+        </div>
+    </div>
+    
+    <p>
+        To content width changes, click on 
+        <button class="btn btn-micro reload-frontend-button">reload frontend</button>
     </p>
 </form>`;
 
@@ -192,7 +208,7 @@ export default class ApperanceOptions {
         this.$monospaceFontSize = $("#monospace-font-size");
         this.$monospaceFontFamily = $("#monospace-font-family");
 
-        $("#reload-frontend-button").on("click", () => utils.reloadFrontendApp("font changes"));
+        $(".reload-frontend-button").on("click", () => utils.reloadFrontendApp("changes from appearance options"));
 
         this.$body = $("body");
 
@@ -238,6 +254,14 @@ export default class ApperanceOptions {
         for (const optionName of optionsToSave) {
             this['$' + optionName].on('change', () => server.put(`options/${optionName}/${this['$' + optionName].val()}`));
         }
+
+        this.$maxContentWidth = $("#max-content-width");
+
+        this.$maxContentWidth.on('change', async () => {
+            const maxContentWidth = this.$maxContentWidth.val();
+
+            await server.put('options/maxContentWidth/' + maxContentWidth);
+        })
     }
 
     toggleBodyClass(prefix, value) {
@@ -292,6 +316,8 @@ export default class ApperanceOptions {
 
         this.$monospaceFontSize.val(options.monospaceFontSize);
         this.fillFontFamilyOptions(this.$monospaceFontFamily, options.monospaceFontFamily);
+
+        this.$maxContentWidth.val(options.maxContentWidth);
     }
 
     fillFontFamilyOptions($select, currentValue) {

src/public/app/widgets/containers/split_note_container.js

@@ -19,7 +19,7 @@ export default class SplitNoteContainer extends FlexContainer {
         const $renderedWidget = widget.render();
 
         $renderedWidget.attr("data-ntx-id", noteContext.ntxId);
-        $renderedWidget.css("flex-basis", "0"); // so that each split has same width
+        $renderedWidget.addClass("note-split");
 
         $renderedWidget.on('click', () => appContext.tabManager.activateNoteContext(noteContext.ntxId));
 

src/public/stylesheets/style.css

@@ -950,3 +950,9 @@ input {
     white-space: nowrap;
     text-overflow: ellipsis;
 }
+
+.note-split {
+    flex-basis: 0; /* so that each split has same width */
+    margin-left: auto;
+    margin-right: auto;
+}

src/routes/api/options.js

@@ -54,6 +54,7 @@ const ALLOWED_OPTIONS = new Set([
     'dailyBackupEnabled',
     'weeklyBackupEnabled',
     'monthlyBackupEnabled',
+    'maxContentWidth'
 ]);
 
 function getOptions() {

src/routes/index.js

@@ -35,7 +35,8 @@ function index(req, res) {
         isDev: env.isDev(),
         isMainWindow: !req.query.extra,
         extraHoistedNoteId: req.query.extraHoistedNoteId,
-        isProtectedSessionAvailable: protectedSessionService.isProtectedSessionAvailable()
+        isProtectedSessionAvailable: protectedSessionService.isProtectedSessionAvailable(),
+        maxContentWidth: parseInt(options.maxContentWidth)
     });
 }
 

src/services/options_init.js

@@ -89,7 +89,8 @@ const defaultOptions = [
     { name: 'autoReadonlySizeCode', value: '30000', isSynced: false },
     { name: 'dailyBackupEnabled', value: 'true', isSynced: false },
     { name: 'weeklyBackupEnabled', value: 'true', isSynced: false },
-    { name: 'monthlyBackupEnabled', value: 'true', isSynced: false }
+    { name: 'monthlyBackupEnabled', value: 'true', isSynced: false },
+    { name: 'maxContentWidth', value: '1200', isSynced: false },
 ];
 
 function initStartupOptions() {

src/views/desktop.ejs

@@ -58,6 +58,12 @@
     };
 </script>
 
+<style>
+    .note-split {
+        max-width: <%= maxContentWidth %>px;
+    }
+</style>
+
 <!-- Required for correct loading of scripts in Electron -->
 <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>