github-starred/open-webui
2
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-05-06 10:58:17 -05:00
Code Issues 1.2k Packages Projects Releases 126 Wiki Activity

[GH-ISSUE #17474] issue: Settings modal can be scrolled out of view when 'Image Compression' is enabled in Interface settings #56966

New Issue
Closed
opened 2026-05-05 20:19:54 -05:00 by GiteaMirror · 2 comments
GiteaMirror commented 2026-05-05 20:19:54 -05:00
Owner
Copy Link

Originally created by @ShirasawaSama on GitHub (Sep 16, 2025).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/17474

Check Existing Issues

  • I have searched for any existing and/or related issues.
  • I have searched for any existing and/or related discussions.
  • I am using the latest version of Open WebUI.

Installation Method

Git Clone

Open WebUI Version

dev (latest)

Ollama Version (if applicable)

No response

Operating System

macOS 26

Browser (if applicable)

Edge 141

Confirmation

  • I have read and followed all instructions in README.md.
  • I am using the latest version of both Open WebUI and Ollama.
  • I have included the browser console logs.
  • I have included the Docker container logs.
  • I have provided every relevant configuration, setting, and environment variable used in my setup.
  • I have clearly listed every relevant configuration, custom setting, environment variable, and command-line option that influences my setup (such as Docker Compose overrides, .env values, browser settings, authentication configurations, etc).
  • I have documented step-by-step reproduction instructions that are precise, sequential, and leave nothing to interpretation. My steps:
  • Start with the initial platform/version/OS and dependencies used,
  • Specify exact install/launch/configure commands,
  • List URLs visited, user input (incl. example values/emails/passwords if needed),
  • Describe all options and toggles enabled or changed,
  • Include any files or environmental changes,
  • Identify the expected and actual result at each stage,
  • Ensure any reasonably skilled user can follow and hit the same issue.

Expected Behavior

The settings modal should remain fixed and always visible on the screen, regardless of any option enabled. Modal contents should not be scrollable out of the viewport.

Actual Behavior

When 'Image Compression' is enabled on the Interface settings page, the modal becomes scrollable and can be moved completely out of the visible area of the screen, making it hard to interact with.

Steps to Reproduce

  1. Open Open WebUI in Edge 141 (latest dev branch) on macOS 26.
  2. Go to the Interface settings page.
  3. Enable the 'Image Compression' option.
  4. Observe that the settings modal can be scrolled out of the screen, making it partially or fully inaccessible.

Logs & Screenshots

Settings modal scroll bug screenshot

Additional Information

This occurs only when 'Image Compression' is toggled on. Other options do not cause the modal to move out of view. Tested on Edge 141, latest dev branch, macOS 26.

Originally created by @ShirasawaSama on GitHub (Sep 16, 2025). Original GitHub issue: https://github.com/open-webui/open-webui/issues/17474 ### Check Existing Issues - [x] I have searched for any existing and/or related issues. - [x] I have searched for any existing and/or related discussions. - [x] I am using the latest version of Open WebUI. ### Installation Method Git Clone ### Open WebUI Version dev (latest) ### Ollama Version (if applicable) _No response_ ### Operating System macOS 26 ### Browser (if applicable) Edge 141 ### Confirmation - [x] I have read and followed all instructions in `README.md`. - [x] I am using the latest version of **both** Open WebUI and Ollama. - [x] I have included the browser console logs. - [x] I have included the Docker container logs. - [x] I have **provided every relevant configuration, setting, and environment variable used in my setup.** - [x] I have clearly **listed every relevant configuration, custom setting, environment variable, and command-line option that influences my setup** (such as Docker Compose overrides, .env values, browser settings, authentication configurations, etc). - [x] I have documented **step-by-step reproduction instructions that are precise, sequential, and leave nothing to interpretation**. My steps: - Start with the initial platform/version/OS and dependencies used, - Specify exact install/launch/configure commands, - List URLs visited, user input (incl. example values/emails/passwords if needed), - Describe all options and toggles enabled or changed, - Include any files or environmental changes, - Identify the expected and actual result at each stage, - Ensure any reasonably skilled user can follow and hit the same issue. ### Expected Behavior The settings modal should remain fixed and always visible on the screen, regardless of any option enabled. Modal contents should not be scrollable out of the viewport. ### Actual Behavior When 'Image Compression' is enabled on the Interface settings page, the modal becomes scrollable and can be moved completely out of the visible area of the screen, making it hard to interact with. ### Steps to Reproduce 1. Open Open WebUI in Edge 141 (latest dev branch) on macOS 26. 2. Go to the Interface settings page. 3. Enable the 'Image Compression' option. 4. Observe that the settings modal can be scrolled out of the screen, making it partially or fully inaccessible. ### Logs & Screenshots <img alt="Settings modal scroll bug screenshot" width="1924" src="https://github.com/user-attachments/assets/1ebaf261-ba82-44b3-8d21-a218fa89d0f2" /> ### Additional Information This occurs only when 'Image Compression' is toggled on. Other options do not cause the modal to move out of view. Tested on Edge 141, latest dev branch, macOS 26.
GiteaMirror added the bug label 2026-05-05 20:19:54 -05:00
GiteaMirror commented 2026-05-05 20:19:57 -05:00
Author
Owner
Copy Link

@rgaricano commented on GitHub (Sep 16, 2025):

When Image Compression is enabled, the additional input fields for width and height settings are dynamically added to the form, increasing the overall content height.

There are several solutions, easiers:

  • Modify the height constraints in the SettingsModal.svelte (where the content area has fixed height constraints).

Instead of fixed height: md:min-h-[32rem] max-h-[32rem]
Use viewport-relative heights: md:min-h-[50vh] max-h-[80vh]

  • Modify the modal positioning to ensure it stays centered (the Modal.svelte component uses overflow-y-auto on the backdrop container, which can cause the entire modal to scroll out of view).

In Modal.svelte, change from: class="modal fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] {containerClassName} flex justify-center z-9999 overflow-y-auto overscroll-contain"

To: class="modal fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] {containerClassName} flex items-center justify-center z-9999 overflow-y-auto overscroll-contain"

<!-- gh-comment-id:3296440865 --> @rgaricano commented on GitHub (Sep 16, 2025): When Image Compression is enabled, the additional input fields for width and height settings are dynamically added to the form, increasing the overall content height. There are several solutions, easiers: - Modify the height constraints in the SettingsModal.svelte (where the content area has fixed height constraints). Instead of fixed height: `md:min-h-[32rem] max-h-[32rem]` Use viewport-relative heights: `md:min-h-[50vh] max-h-[80vh]` - Modify the modal positioning to ensure it stays centered (the Modal.svelte component uses overflow-y-auto on the backdrop container, which can cause the entire modal to scroll out of view). In Modal.svelte, change from: `class="modal fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] {containerClassName} flex justify-center z-9999 overflow-y-auto overscroll-contain"` To: `class="modal fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] {containerClassName} flex items-center justify-center z-9999 overflow-y-auto overscroll-contain"`
GiteaMirror commented 2026-05-05 20:19:58 -05:00
Author
Owner
Copy Link

@tjbck commented on GitHub (Sep 16, 2025):

fed5615c19

<!-- gh-comment-id:3299529141 --> @tjbck commented on GitHub (Sep 16, 2025): fed5615c19b0045a55b0be426b468a57bfda4b66
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
confirmed
confirmed issue
core
documentation
enhancement
good first issue
help wanted
non-core
pull-request
Mirrored from GitHub Pull Request
 python
question
testing wanted
No Label bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#56966
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?