issue: Settings modal can be scrolled out of view when 'Image Compression' is enabled in Interface settings #6413

New Issue

2025-11-11T16:54:29-06:00

GiteaMirror commented

2025-11-11 16:54:29 -06:00

Originally created by @ShirasawaSama on GitHub (Sep 16, 2025).

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

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

Logs & Screenshots

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). ### 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 2025-11-11 16:54:29 -06:00

GiteaMirror closed this issue

2025-11-11 16:54:29 -06:00

GiteaMirror commented

2025-11-11 16:54:30 -06:00

@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"

@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

2025-11-11 16:54:30 -06:00

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

fed5615c19

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