Emil_Shanaty/open-webui-ai4me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add adjustable text size setting to interface (#19186)

Browse Source 
* Add adjustable text size setting to interface

Introduces a user-configurable text size (scale) setting, accessible via a slider in the interface settings. Updates CSS and Sidebar chat item components to respect the new --app-text-scale variable, and persists the setting in the store. Adds related i18n strings and ensures the text scale is applied globally and clamped to allowed values.

* Refactor text scale logic into utility module

Moved all text scale related constants and functions from components and stores into a new utility module (src/lib/utils/text-scale.ts). Updated imports and usage in Interface.svelte and index.ts to use the new module, improving code organization and reusability.

* Adjust sidebar chat scaling without extra classes

keep sidebar markup using existing Tailwind utility classes so chat items render identically pre-feature
move all text-scale sizing into app.css under the #sidebar-chat-item selectors
change the root font-size multiplier to use 1rem instead of an explicit 16px so browser/user preferences propagate

* Update Switch.svelte

Adjust toggles from fixed pixel to rem to scale with the text size

* Update Interface.svelte

Updated label from 'Text Scale' to 'UI Scale'.
Added padding around slider

* Update app.css

Added comments
This commit is contained in:
davecrab
2025-11-19 00:55:52 -05:00
committed by GitHub
parent 720af637e6
commit 7762fa5ddf
7 changed files with 216 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+25
View File
@@ -30,8 +30,33 @@
font-display: swap;
}
/* --app-text-scale is updated via the UI Scale slider (Interface.svelte) */
:root {
--app-text-scale: 1;
}
html {
word-break: break-word;
/* font-size scales the entire document via the same UI control */
font-size: calc(1rem * var(--app-text-scale, 1));
}
#sidebar-chat-item {
/* sidebar item sizing scales for the chat list entries */
min-height: calc(32px * var(--app-text-scale, 1));
padding-inline: calc(11px * var(--app-text-scale, 1));
padding-block: calc(6px * var(--app-text-scale, 1));
}
#sidebar-chat-item div[dir='auto'] {
/* chat title line height follows the text scale */
height: calc(20px * var(--app-text-scale, 1));
line-height: calc(20px * var(--app-text-scale, 1));
}
#sidebar-chat-item input {
/* editing state input height is kept in sync */
min-height: calc(20px * var(--app-text-scale, 1));
}
code {