From 5ce21f079bdc0b469664e4766367e22cc41cc16a Mon Sep 17 00:00:00 2001
From: Zach Manson <zachpmanson@gmail.com>
Date: Sun, 8 Mar 2026 22:04:56 +1100
Subject: [PATCH 1/5] Add option to adjust column widths

---
 src/app.css                |  3 ++
 src/components/columns.jsx | 13 ++++++++
 src/pages/settings.jsx     | 62 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 78 insertions(+)

diff --git a/src/app.css b/src/app.css
index 8cf9a1f4db..9f2c76fed1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2759,6 +2759,9 @@ ul.link-list li a .icon {
     -1px 0 var(--bg-color),
     -2px 0 var(--drop-shadow-color),
     -3px 0 var(--bg-color);
+  
+  transition: flex-basis 0.3s ease-in-out;
+
   &:dir(rtl) {
     box-shadow:
       1px 0 var(--bg-color),
diff --git a/src/components/columns.jsx b/src/components/columns.jsx
index 6f2ced3425..2a17a9c14d 100644
--- a/src/components/columns.jsx
+++ b/src/components/columns.jsx
@@ -1,6 +1,8 @@
 import { useLingui } from '@lingui/react/macro';
+import { useLayoutEffect } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useSnapshot } from 'valtio';
+import store from '../utils/store';
 
 import AccountStatuses from '../pages/account-statuses';
 import Bookmarks from '../pages/bookmarks';
@@ -32,6 +34,17 @@ function Columns() {
 
   console.debug('RENDER Columns', shortcuts);
 
+  useLayoutEffect(() => {
+    const columnSize = store.local.get('columnSize');
+    if (!columnSize) return;
+    const col = document.getElementById('columns');
+    if (col) {
+      col.style.setProperty('--column-size', `${columnSize}px`);
+    } else {
+      console.warn('Failed to set column size: #columns not found');
+    }
+  }, []);
+
   const components = shortcuts.map((shortcut) => {
     if (!shortcut) return null;
     const { type, ...params } = shortcut;
diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx
index 4ae49a9a7e..d4c0c11976 100644
--- a/src/pages/settings.jsx
+++ b/src/pages/settings.jsx
@@ -30,6 +30,11 @@ import states from '../utils/states';
 import store from '../utils/store';
 import { getAPIVersions, getVapidKey } from '../utils/store-utils';
 
+const DEFAULT_COLUMN_WIDTH = 360;
+const SMALLEST_COLUMN_WIDTH = 360;
+const LARGEST_COLUMN_WIDTH = 600;
+const COLUMN_WIDTHS = [360, 400, 440, 480, 520, 560, 600];
+
 const DEFAULT_TEXT_SIZE = 16;
 const TEXT_SIZES = [14, 15, 16, 17, 18, 19, 20];
 const SMALLEST_TEXT_SIZE = TEXT_SIZES[0];
@@ -60,6 +65,7 @@ function Settings({ onClose }) {
   const systemTargetLanguage = getTranslateTargetLanguage();
   const systemTargetLanguageText = localeCode2Text(systemTargetLanguage);
   const currentTextSize = store.local.get('textSize') || DEFAULT_TEXT_SIZE;
+  const currentColumnSize = store.local.get('columnSize') || DEFAULT_COLUMN_WIDTH;
 
   const [prefs, setPrefs] = useState(getPreferences());
   const { masto, authenticated, instance } = api();
@@ -226,6 +232,15 @@ function Settings({ onClose }) {
               </div>
               <TextSizeControl currentTextSize={currentTextSize} />
             </li>
+            <li>
+              <div>
+                <label>
+                  <Trans>Column Width</Trans>
+                </label>
+              </div>
+              <ColumnSizeControl currentColumnSize={currentColumnSize} />
+            </li>
+
             <li>
               <span>
                 <label>
@@ -1022,6 +1037,53 @@ function TextSizeControl({ currentTextSize }) {
   );
 }
 
+
+function ColumnSizeControl({ currentColumnSize }) {
+  const columnSizeFieldRef = useRef(null);
+  const [size, setSize] = useState(currentColumnSize);
+  const [debouncedSize] = useDebounce(size, 500);
+
+  useEffect(() => {
+    const el = document.querySelector('#columns');
+    if (!el) {
+      console.warn('Failed to set column size: #columns not found');
+      return;
+    }
+    // set CSS variable
+    el.style.setProperty('--column-size', `${debouncedSize}px`);
+    // save to local storage
+    if (debouncedSize === DEFAULT_COLUMN_WIDTH) {
+      store.local.del('columnSize');
+    } else {
+      store.local.set('columnSize', debouncedSize);
+    }
+  }, [debouncedSize]);
+
+  return (
+    <div class={`text-size-control ${size !== debouncedSize ? 'loading' : ''}`}>
+      
+      <input
+        ref={columnSizeFieldRef}
+        type="range"
+        min={SMALLEST_COLUMN_WIDTH}
+        max={LARGEST_COLUMN_WIDTH}
+        step="1"
+        value={size}
+        list="widths"
+        onChange={(e) => {
+          const value = parseInt(e.target.value, 10);
+          setSize(value);
+        }}
+      />{' '}
+      <datalist id="widths">
+        {COLUMN_WIDTHS.map((size) => (
+          <option value={size} />
+        ))}
+      </datalist>
+    </div>
+  );
+}
+
 async function getCachesKeys() {
   const keys = await caches.keys();
   const total = {};

From 4d5ef3353486daff47068bd6a16ead45323db4ea Mon Sep 17 00:00:00 2001
From: Zach Manson <zachpmanson@gmail.com>
Date: Sun, 8 Mar 2026 22:15:26 +1100
Subject: [PATCH 2/5] Run formatter

---
 src/pages/settings.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx
index d4c0c11976..d57a9a5d28 100644
--- a/src/pages/settings.jsx
+++ b/src/pages/settings.jsx
@@ -65,7 +65,8 @@ function Settings({ onClose }) {
   const systemTargetLanguage = getTranslateTargetLanguage();
   const systemTargetLanguageText = localeCode2Text(systemTargetLanguage);
   const currentTextSize = store.local.get('textSize') || DEFAULT_TEXT_SIZE;
-  const currentColumnSize = store.local.get('columnSize') || DEFAULT_COLUMN_WIDTH;
+  const currentColumnSize =
+    store.local.get('columnSize') || DEFAULT_COLUMN_WIDTH;
 
   const [prefs, setPrefs] = useState(getPreferences());
   const { masto, authenticated, instance } = api();
@@ -1037,7 +1038,6 @@ function TextSizeControl({ currentTextSize }) {
   );
 }
 
-
 function ColumnSizeControl({ currentColumnSize }) {
   const columnSizeFieldRef = useRef(null);
   const [size, setSize] = useState(currentColumnSize);
@@ -1061,7 +1061,6 @@ function ColumnSizeControl({ currentColumnSize }) {
 
   return (
     <div class={`text-size-control ${size !== debouncedSize ? 'loading' : ''}`}>
-      
       <input
         ref={columnSizeFieldRef}
         type="range"

From 29f8d263e2a38ed0b767702746f6a7a867c2cf05 Mon Sep 17 00:00:00 2001
From: Zach Manson <zachpmanson@gmail.com>
Date: Mon, 9 Mar 2026 13:42:40 +1100
Subject: [PATCH 3/5] Run linting and formatting

---
 src/app.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app.jsx b/src/app.jsx
index 4c364068e6..f9dd7f9404 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -31,7 +31,6 @@ import NavigationCommand from './components/navigation-command';
 import NotificationService from './components/notification-service';
 import SearchCommand from './components/search-command';
 import Shortcuts from './components/shortcuts';
-import NotFound from './pages/404';
 import AccountStatuses from './pages/account-statuses';
 import AnnualReport from './pages/annual-report';
 import Bookmarks from './pages/bookmarks';

From ee7d5d8ab9837665086954ba4c8f4eb565759cad Mon Sep 17 00:00:00 2001
From: Zach Manson <zachpmanson@gmail.com>
Date: Mon, 9 Mar 2026 22:12:35 +1100
Subject: [PATCH 4/5] Fix linting

---
 src/components/columns.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/columns.jsx b/src/components/columns.jsx
index 2a17a9c14d..26ac6b973d 100644
--- a/src/components/columns.jsx
+++ b/src/components/columns.jsx
@@ -2,7 +2,6 @@ import { useLingui } from '@lingui/react/macro';
 import { useLayoutEffect } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useSnapshot } from 'valtio';
-import store from '../utils/store';
 
 import AccountStatuses from '../pages/account-statuses';
 import Bookmarks from '../pages/bookmarks';
@@ -17,6 +16,7 @@ import Search from '../pages/search';
 import Trending from '../pages/trending';
 import isRTL from '../utils/is-rtl';
 import states from '../utils/states';
+import store from '../utils/store';
 import { getCurrentAccountID } from '../utils/store-utils';
 import useTitle from '../utils/useTitle';
 

From 4092fd6b811fe87d718d3cf49694d70f31939113 Mon Sep 17 00:00:00 2001
From: Zach Manson <zachpmanson@gmail.com>
Date: Mon, 9 Mar 2026 22:14:50 +1100
Subject: [PATCH 5/5] FIx css formatting

---
 src/app.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index 9f2c76fed1..8f630355c6 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2759,7 +2759,7 @@ ul.link-list li a .icon {
     -1px 0 var(--bg-color),
     -2px 0 var(--drop-shadow-color),
     -3px 0 var(--bg-color);
-  
+
   transition: flex-basis 0.3s ease-in-out;
 
   &:dir(rtl) {