chat-width settings in prefs
3clyp50 committed
Jan 19, 2026 at 06:01 UTC
8d01a9c58d5f619767741fa760afeb9a4af3c2a4
4 files changed
+100
-14
webui/components/messages/process-group/process-group.css
-4
@@ -358,10 +358,6 @@
358
transition: background-color 0.15s ease;
359
}
360
361
-.step-expanded {
362
- padding: var(--spacing-xs) 0;
363
-}
364
-
361
/* Utility/Info/Hint steps have subtle background tint */
362
.process-step[data-type="util"],
363
.process-step[data-type="info"],
webui/components/sidebar/bottom/preferences/preferences-panel.html
+57
@@ -41,6 +41,21 @@
41
<span class="slider"></span>
42
</label>
43
</li>
44
+ <li x-data class="chat-width-setting">
45
+ <span class="width-label">Width</span>
46
+ <div class="width-buttons">
47
+ <template x-for="(opt, idx) in $store.preferences.chatWidthOptions" :key="opt.value">
48
+ <span class="width-btn-wrapper">
49
+ <button type="button"
50
+ class="width-btn"
51
+ :class="{ 'active': $store.preferences.chatWidth === opt.value }"
52
+ @click="$store.preferences.chatWidth = opt.value"
53
+ x-text="opt.label"></button>
54
+ <span class="width-sep" x-show="idx < $store.preferences.chatWidthOptions.length - 1">·</span>
55
+ </span>
56
+ </template>
57
+ </div>
58
+ </li>
59
</ul>
60
</span>
61
</div>
@@ -87,6 +102,48 @@
102
margin-left: auto;
103
}
104
.pref-section li { display: flex; align-items: center; }
105
+
106
+ /* Chat width button bar */
107
+ .chat-width-setting {
108
+ gap: 0.25rem;
109
+ }
110
+ .chat-width-setting .width-label {
111
+ flex: 1;
112
+ }
113
+ .width-buttons {
114
+ display: flex;
115
+ align-items: center;
116
+ gap: 0;
117
+ }
118
+ .width-btn-wrapper {
119
+ display: flex;
120
+ align-items: center;
121
+ }
122
+ .width-btn {
123
+ background: none;
124
+ border: none;
125
+ color: var(--color-primary);
126
+ font-size: 0.7rem;
127
+ font-weight: 500;
128
+ letter-spacing: 0.02em;
129
+ padding: 0.15rem 0.25rem;
130
+ cursor: pointer;
131
+ opacity: 0.7;
132
+ transition: opacity 0.15s ease, color 0.15s ease;
133
+ }
134
+ .width-btn:hover {
135
+ opacity: 0.85;
136
+ }
137
+ .width-btn.active {
138
+ opacity: 1;
139
+ color: var(--color-text);
140
+ }
141
+ .width-sep {
142
+ color: var(--color-text-secondary, #666);
143
+ font-size: 0.6rem;
144
+ margin: 0 0.1rem;
145
+ opacity: 0.5;
146
+ }
147
</style>
148
</body>
149
</html>
webui/components/sidebar/bottom/preferences/preferences-store.js
+39
@@ -51,6 +51,23 @@ const model = {
51
},
52
_collapseProcessGroups: true, // Default to collapsed
53
54
+ // Chat container width preference for HiDPI/large screens
55
+ get chatWidth() {
56
+ return this._chatWidth;
57
+ },
58
+ set chatWidth(value) {
59
+ this._chatWidth = value;
60
+ this._applyChatWidth(value);
61
+ },
62
+ _chatWidth: "55", // Default width in em (standard)
63
+
64
+ // Width presets: { label, value in em }
65
+ chatWidthOptions: [
66
+ { label: "STD", value: "55" },
67
+ { label: "X-WIDE", value: "90" },
68
+ { label: "FULL", value: "full" },
69
+ ],
70
+
71
// Initialize preferences and apply current state
72
init() {
73
try {
@@ -77,12 +94,23 @@ const model = {
94
this._collapseProcessGroups = true;
95
}
96
97
+ // Load chat width preference
98
+ try {
99
+ const storedChatWidth = localStorage.getItem("chatWidth");
100
+ if (storedChatWidth && this.chatWidthOptions.some(opt => opt.value === storedChatWidth)) {
101
+ this._chatWidth = storedChatWidth;
102
+ }
103
+ } catch {
104
+ this._chatWidth = "55"; // Default to standard
105
+ }
106
+
107
// Apply all preferences
108
this._applyDarkMode(this._darkMode);
109
this._applyAutoScroll(this._autoScroll);
110
this._applySpeech(this._speech);
111
this._applyShowUtils(this._showUtils);
112
this._applyCollapseProcessGroups(this._collapseProcessGroups);
113
+ this._applyChatWidth(this._chatWidth);
114
} catch (e) {
115
console.error("Failed to initialize preferences store", e);
116
}
@@ -134,6 +162,17 @@ const model = {
162
// Store may not be initialized yet
163
}
164
},
165
+
166
+ _applyChatWidth(value) {
167
+ localStorage.setItem("chatWidth", value);
168
+ // Set CSS custom property for chat max-width
169
+ const root = document.documentElement;
170
+ if (value === "full") {
171
+ root.style.setProperty("--chat-max-width", "100%");
172
+ } else {
173
+ root.style.setProperty("--chat-max-width", `${value}em`);
174
+ }
175
+ },
176
};
177
178
export const store = createStore("preferences", model);
webui/css/messages.css
+4
-10
@@ -449,17 +449,11 @@
449
}
450
451
/* Media Queries */
452
-@media (min-width: 55em) {
452
+/* Chat width controlled by --chat-max-width CSS variable (set via preferences, default 55em) */
453
+@media (min-width: 1025px) {
454
#chat-history {
454
- padding-left: max(var(--spacing-sm), calc((100% - 55em) / 2)) !important;
455
- padding-right: max(var(--spacing-sm), calc((100% - 55em) / 2)) !important;
456
- }
457
-}
458
-
459
-@media (min-width: 1025px) and (max-width: 55em) {
460
- #chat-history {
461
- padding-left: var(--spacing-sm) !important;
462
- padding-right: var(--spacing-sm) !important;
455
+ padding-left: max(var(--spacing-sm), calc((100% - var(--chat-max-width, 55em)) / 2)) !important;
456
+ padding-right: max(var(--spacing-sm), calc((100% - var(--chat-max-width, 55em)) / 2)) !important;
457
}
458
}
459