From d9ad4181956c99f4ed9bf62745dae18cb22f7451 Mon Sep 17 00:00:00 2001
From: Skoh <101289702+SkohTV@users.noreply.github.com>
Date: Tue, 23 Jun 2026 16:20:17 -0400
Subject: [PATCH] feat(ui): add toggle for padding around chat area (#4691)

---
 static/app.js     | 4 +++-
 static/index.html | 5 +++++
 static/style.css  | 6 ++++++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/static/app.js b/static/app.js
index 1f0390a37..84e6c8c6e 100644
--- a/static/app.js
+++ b/static/app.js
@@ -2418,7 +2418,7 @@ function initializeEventListeners() {
   };
 
   // Keys hidden by default on first run (no localStorage yet)
-  const UI_VIS_DEFAULT_OFF = new Set(['models-section', 'rag-toggle-btn', 'text-emojis']);
+  const UI_VIS_DEFAULT_OFF = new Set(['models-section', 'rag-toggle-btn', 'text-emojis', 'chat-fullwidth']);
 
   // Keys that need admin to toggle off (reserved for future use)
   const UI_VIS_ADMIN_ONLY = new Set([]);
@@ -2451,6 +2451,8 @@ function initializeEventListeners() {
     applyTextEmojis(state['text-emojis'] === true);
     // Hide thinking sections toggle (show-thinking: checked=show, unchecked=hide)
     document.body.classList.toggle('hide-thinking', state['show-thinking'] === false);
+    // Fullwidth chat toggle (chat-fullwidth: checked=fullwidth, unchecked=big-padding
+    document.body.classList.toggle('fullwidth-chat', state['chat-fullwidth'] === true);
   }
 
   // Rearrange toggles in session/model sort dropdowns
diff --git a/static/index.html b/static/index.html
index 3718e50ae..28bb250c4 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1820,6 +1820,11 @@
                 <span class="vis-label">Session Header <span class="vis-hint">Model name &amp; export above chat</span></span>
                 <input type="checkbox" checked data-ui-key="chat-meta"><span class="vis-switch"></span>
               </label>
+              <label class="vis-row">
+                <span class="vis-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16"/><path d="M4 10h8"/></svg></span>
+                <span class="vis-label">Full-width chat <span class="vis-hint">Use the full window width (desktop)</span></span>
+                <input type="checkbox" data-ui-key="chat-fullwidth"><span class="vis-switch"></span>
+              </label>
               <label class="vis-row">
                 <span class="vis-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 3v2m0 14v2m-7-9H3m18 0h-2m-1.5-6.5L16 7m-8-1.5L6.5 7m11 11l-1.5-1.5M8 18l-1.5 1.5"/><circle cx="12" cy="12" r="4"/></svg></span>
                 <span class="vis-label">Welcome Message <span class="vis-hint">Logo &amp; tips on empty chat</span></span>
diff --git a/static/style.css b/static/style.css
index 4532f7131..c7bdc11a8 100644
--- a/static/style.css
+++ b/static/style.css
@@ -8664,6 +8664,12 @@ button.hamburger {
 /* Hide thinking sections globally via settings toggle */
 body.hide-thinking .thinking-section { display: none !important; }
 
+/* Widen chat area via settings toggle */
+body.fullwidth-chat .chat-history {
+  padding-left: 0 !important;
+  padding-right: 12px !important;
+}
+
 /* Thinking process styles — colors follow theme accent */
 .msg .body .stream-content {
   width: 100%;