more granular picker for the wide-timeline

src/App.js

@@ -59,12 +59,19 @@ export default {
         {
           '-reverse': this.reverseLayout,
           '-no-sticky-headers': this.noSticky,
-          '-has-new-post-button': this.newPostButtonShown,
-          '-wide-timeline': this.widenTimeline
+          '-has-new-post-button': this.newPostButtonShown
         },
-        '-' + this.layoutType
+        '-' + this.layoutType,
       ]
     },
+    columnWidth() {
+      let type = this.$store.getters.mergedConfig.widenTimeline
+      console.log(type);
+      if (type && type !== 'off') {
+        return `minmax(var(--miniColumn), ${type})`
+      }
+      return 'minmax(var(--miniColumn), 45rem)'
+    },
     pageBackground () {
       return this.mergedConfig.displayPageBackgrounds
         ? this.$store.state.users.displayBackground
@@ -94,9 +101,6 @@ export default {
     newPostButtonShown () {
       return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile'
     },
-    widenTimeline () {
-      return this.$store.getters.mergedConfig.widenTimeline
-    },
     showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
     editingAvailable () { return this.$store.state.instance.editingAvailable },
     layoutType () { return this.$store.state.interface.layoutType },

src/App.scss

@@ -195,10 +195,6 @@ nav {
   min-height: 100vh;
   overflow-x: clip;
 
-  &.-wide-timeline {
-    --maxiColumn: minmax(var(--miniColumn), 1fr);
-  }
-
   .column {
     --___columnMargin: var(--columnGap);
 

src/App.vue

@@ -14,6 +14,7 @@
       id="content"
       class="app-layout container"
       :class="classes"
+      :style="{'--maxiColumn': this.columnWidth}"
     >
       <div class="underlay" />
       <div

src/components/settings_modal/tabs/general_tab.js

@@ -55,6 +55,11 @@ const GeneralTab = {
         value: tab,
         label: this.$t(`user_card.${tab}`)
       })),
+      widenTimelineOptions : ['1fr', '75%', '50%', 'off'].map(width => ({
+        key: width,
+        value: width,
+        label: this.$t(`settings.widen_timeline_option.${width}`)
+      })),
       profilesExpanded: false,
       newProfileName: '',
       loopSilentAvailable:

src/components/settings_modal/tabs/general_tab.vue

@@ -270,9 +270,12 @@
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="widenTimeline">
+          <ChoiceSetting
+            path="widenTimeline"
+            :options="widenTimelineOptions"
+          >
             {{ $t('settings.widen_timeline') }}
-          </BooleanSetting>
+          </ChoiceSetting>
         </li>
         <li>
           <ChoiceSetting

src/i18n/en.json

@@ -949,6 +949,12 @@
         "virtual_scrolling": "Optimize timeline rendering",
         "use_blurhash": "Use blurhashes for NSFW thumbnails",
         "widen_timeline": "Widen the Timeline to fill horizontal space",
+        "widen_timeline_option": {
+            "1fr": "Full",
+            "75%": "75%",
+            "50%": "50%",
+            "off": "Off"
+        },
         "word_filter": "Word filter",
         "wordfilter": "Wordfilter"
     },