From 1ce0733cac6384ea470c511ca78847a00c3f534c Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Tue, 15 Apr 2025 13:57:49 +0200
Subject: [PATCH] Add option to stretch columns to available width (#3040)
 (#3042)

---
 .../glitch/features/local_settings/page/index.jsx        | 9 +++++++++
 app/javascript/flavours/glitch/features/ui/index.jsx     | 3 +++
 app/javascript/flavours/glitch/locales/en.json           | 2 ++
 .../flavours/glitch/reducers/local_settings.js           | 1 +
 app/javascript/flavours/glitch/styles/components.scss    | 7 +++++++
 5 files changed, 22 insertions(+)

diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.jsx b/app/javascript/flavours/glitch/features/local_settings/page/index.jsx
index ea599afb6a..3966f0210a 100644
--- a/app/javascript/flavours/glitch/features/local_settings/page/index.jsx
+++ b/app/javascript/flavours/glitch/features/local_settings/page/index.jsx
@@ -169,6 +169,15 @@ class LocalSettingsPage extends PureComponent {
             <FormattedMessage id='settings.wide_view' defaultMessage='Wide view (Desktop mode only)' />
             <span className='hint'><FormattedMessage id='settings.wide_view_hint' defaultMessage='Stretches columns to better fill the available space.' /></span>
           </LocalSettingsPageItem>
+          <LocalSettingsPageItem
+            settings={settings}
+            item={['fullwidth_columns']}
+            id='mastodon-settings--fullwidth_columns'
+            onChange={onChange}
+          >
+            <FormattedMessage id='settings.fullwidth_view' defaultMessage='Stretch columns to full width (Desktop mode only)' />
+            <span className='hint'><FormattedMessage id='settings.fullwidth_view_hint' defaultMessage='Stretches columns to fill all the available space.' /></span>
+          </LocalSettingsPageItem>
         </section>
       </div>
     ),
diff --git a/app/javascript/flavours/glitch/features/ui/index.jsx b/app/javascript/flavours/glitch/features/ui/index.jsx
index 1ef29f8db2..978e8627eb 100644
--- a/app/javascript/flavours/glitch/features/ui/index.jsx
+++ b/app/javascript/flavours/glitch/features/ui/index.jsx
@@ -91,6 +91,7 @@ const mapStateToProps = state => ({
   hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0,
   canUploadMore: !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type'))) && state.getIn(['compose', 'media_attachments']).size < 4,
   isWide: state.getIn(['local_settings', 'stretch']),
+  fullWidthColumns: state.getIn(['local_settings', 'fullwidth_columns']),
   unreadNotifications: selectUnreadNotificationGroupsCount(state),
   showFaviconBadge: state.getIn(['local_settings', 'notifications', 'favicon_badge']),
   hicolorPrivacyIcons: state.getIn(['local_settings', 'hicolor_privacy_icons']),
@@ -270,6 +271,7 @@ class UI extends PureComponent {
     dispatch: PropTypes.func.isRequired,
     children: PropTypes.node,
     isWide: PropTypes.bool,
+    fullWidthColumns: PropTypes.bool,
     systemFontUi: PropTypes.bool,
     isComposing: PropTypes.bool,
     hasComposingText: PropTypes.bool,
@@ -608,6 +610,7 @@ class UI extends PureComponent {
 
     const className = classNames('ui', {
       'wide': isWide,
+      'fullwidth-columns': this.props.fullWidthColumns,
       'system-font': this.props.systemFontUi,
       'hicolor-privacy-icons': this.props.hicolorPrivacyIcons,
     });
diff --git a/app/javascript/flavours/glitch/locales/en.json b/app/javascript/flavours/glitch/locales/en.json
index e60a2d8720..63c3162203 100644
--- a/app/javascript/flavours/glitch/locales/en.json
+++ b/app/javascript/flavours/glitch/locales/en.json
@@ -90,6 +90,8 @@
   "settings.enable_collapsed": "Enable collapsed toots",
   "settings.enable_collapsed_hint": "Collapsed posts have parts of their contents hidden to take up less screen space. This is distinct from the Content Warning feature",
   "settings.enable_content_warnings_auto_unfold": "Automatically unfold content-warnings",
+  "settings.fullwidth_view": "Stretch columns to full width (Desktop mode only)",
+  "settings.fullwidth_view_hint": "Stretches columns to fill all the available space.",
   "settings.general": "General",
   "settings.hicolor_privacy_icons": "High color privacy icons",
   "settings.hicolor_privacy_icons.hint": "Display privacy icons in bright and easily distinguishable colors",
diff --git a/app/javascript/flavours/glitch/reducers/local_settings.js b/app/javascript/flavours/glitch/reducers/local_settings.js
index f0d8c96c1e..fa79431703 100644
--- a/app/javascript/flavours/glitch/reducers/local_settings.js
+++ b/app/javascript/flavours/glitch/reducers/local_settings.js
@@ -6,6 +6,7 @@ import { LOCAL_SETTING_CHANGE, LOCAL_SETTING_DELETE } from 'flavours/glitch/acti
 import { STORE_HYDRATE } from 'flavours/glitch/actions/store';
 
 const initialState = ImmutableMap({
+  fullwidth_columns: false,
   stretch   : true,
   side_arm  : 'none',
   side_arm_reply_mode : 'keep',
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 1b977d0ec2..7d48b87935 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -7477,6 +7477,13 @@ img.modal-warning {
   }
 }
 
+.fullwidth-columns .columns-area:not(.columns-area--mobile) {
+  .column {
+    flex: auto;
+    max-width: unset;
+  }
+}
+
 .media-gallery__actions {
   position: absolute;
   top: 6px;