📦 Platform

Other

📦 Deploymenet mode

client db (lobe-chat image)

📌 Version

1.98.1

💻 Operating System

macOS

🌐 Browser

Other

🐛 Bug Description

The AI provider settings page (e.g., for OpenAI) has responsive layout issues at various narrow window widths. Depending on the width, vertical or horizontal scrolling becomes unavailable. This causes some content and controls (like the "Check" button and model toggles) to become inaccessible. It forces the user to use the application only in a wide or full-screen mode, which severely degrades usability.

Impact: Severely degrades the user experience by making parts of the functionality inaccessible when working in windowed mode or on low-resolution screens.
https://github.com/user-attachments/assets/64868faf-98ab-4483-946c-78f795b3bc11

📷 Recurrence Steps

1. Navigate to Settings -> AI Service Provider -> OpenAI (or any other).
2. Shrink the window width to its minimum size, at which point the left "Settings" navigation column disappears.
3. Slightly widen the window until the "Settings" column reappears on the left, but the main content area is still narrow.

🚦 Expected Behavior

1. At any window width, all content should be accessible via scrolling (vertical and/or horizontal) without exception.
2. Ideally, the layout should be fully responsive: elements should reflow or wrap to fit within the visible area, avoiding the need for horizontal scrolling altogether.

📝 Additional Information

Actual Result:

1. At step 2 (minimum width): Vertical scrolling (scroll up/down) is disabled. Content on the right (e.g., the "Check" button) is cut off and inaccessible. The horizontal scrollbar is missing.
2. At step 3 (medium width): A vertical scrollbar appears and works for the model list. However, the controls to the right of the list (the toggles) are still hidden outside the window's bounds, and a horizontal scrollbar to access them does not appear.