[GH-ISSUE #17558] OneDrive submenu hidden/clipped in attachment menu due to overflow-x-hidden #18327

New Issue

GiteaMirror · 2026-04-20T00:32:39-05:00

GiteaMirror commented

2026-04-20 00:32:39 -05:00

Originally created by @vateseeb on GitHub (Sep 18, 2025).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/17558

Expected Behavior

When clicking the plus icon in the chat input and hovering over the "Microsoft OneDrive" menu item, a submenu should appear to the right showing options for "Microsoft OneDrive (personal)" and "Microsoft OneDrive (work/school)" that are fully visible and accessible.

Actual Behavior

The OneDrive submenu appears but is clipped/hidden within the main attachment menu container. The submenu is visible but cannot overflow properly to the right, making it appear as if it's part of the main menu rather than a separate submenu.

Steps to Reproduce

Start with Open WebUI v0.6.30 (latest) using Docker or Git clone
Enable OneDrive integration in admin settings:
- Set ENABLE_ONEDRIVE_INTEGRATION=true
- Set ENABLE_ONEDRIVE_PERSONAL=true
- Set ENABLE_ONEDRIVE_BUSINESS=true
- Configure OneDrive client credentials
Open a new chat in the web interface
Click the plus (+) icon in the chat input field to open the attachment menu
Hover over the "Microsoft OneDrive" menu item
Observe that the submenu appears but is clipped within the main menu container instead of overflowing to the right

Root Cause

The main dropdown content container in src/lib/components/chat/MessageInput/InputMenu.svelte has overflow-x-hidden class which prevents the OneDrive submenu from properly overflowing outside the main menu container.

Current problematic code (line 105):

<DropdownMenu.Content
    class="w-full max-w-70 rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin transition"

OneDrive SubContent positioning (line 394):

<DropdownMenu.SubContent
    class="w-[calc(100vw-2rem)] max-w-[280px] rounded-xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
    side={$mobile ? 'bottom' : 'right'}
    sideOffset={$mobile ? 5 : 0}
    alignOffset={$mobile ? 0 : -8}
>

Suggested Fix

Remove overflow-x-hidden from the main dropdown content
Update OneDrive SubContent styling for better positioning:
- Change sideOffset from 0 to 8 for desktop to match other submenus
- Add transition animation for consistency
- Improve shadow styling

Additional Information

Installation Method: Git Clone
Open WebUI Version: v0.6.30
Operating System: macOS/Linux/Windows (affects all platforms)
Browser: Chrome/Firefox/Safari (affects all browsers)

The issue affects all browsers and platforms since it's a CSS overflow problem. Other submenus in the application (like Download submenu in chat menus) work correctly because they don't have the same overflow constraints.

src/lib/components/chat/MessageInput/InputMenu.svelte (lines 105 and 394)

This issue prevents users from accessing OneDrive integration features through the UI, requiring them to use alternative file upload methods.

Originally created by @vateseeb on GitHub (Sep 18, 2025). Original GitHub issue: https://github.com/open-webui/open-webui/issues/17558 ## Expected Behavior When clicking the plus icon in the chat input and hovering over the "Microsoft OneDrive" menu item, a submenu should appear to the right showing options for "Microsoft OneDrive (personal)" and "Microsoft OneDrive (work/school)" that are fully visible and accessible. ## Actual Behavior The OneDrive submenu appears but is clipped/hidden within the main attachment menu container. The submenu is visible but cannot overflow properly to the right, making it appear as if it's part of the main menu rather than a separate submenu. ## Steps to Reproduce 1. Start with Open WebUI v0.6.30 (latest) using Docker or Git clone 2. Enable OneDrive integration in admin settings: - Set `ENABLE_ONEDRIVE_INTEGRATION=true` - Set `ENABLE_ONEDRIVE_PERSONAL=true` - Set `ENABLE_ONEDRIVE_BUSINESS=true` - Configure OneDrive client credentials 3. Open a new chat in the web interface 4. Click the plus (+) icon in the chat input field to open the attachment menu 5. Hover over the "Microsoft OneDrive" menu item 6. Observe that the submenu appears but is clipped within the main menu container instead of overflowing to the right <img width="339" height="191" alt="Image" src="https://github.com/user-attachments/assets/03278257-c4dc-4d36-bf5e-042fb77586e7" /> ## Root Cause The main dropdown content container in `src/lib/components/chat/MessageInput/InputMenu.svelte` has `overflow-x-hidden` class which prevents the OneDrive submenu from properly overflowing outside the main menu container. **Current problematic code (line 105):** ```svelte <DropdownMenu.Content class="w-full max-w-70 rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin transition" ``` **OneDrive SubContent positioning (line 394):** ```svelte <DropdownMenu.SubContent class="w-[calc(100vw-2rem)] max-w-[280px] rounded-xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm" side={$mobile ? 'bottom' : 'right'} sideOffset={$mobile ? 5 : 0} alignOffset={$mobile ? 0 : -8} > ``` ## Suggested Fix 1. Remove `overflow-x-hidden` from the main dropdown content 2. Update OneDrive SubContent styling for better positioning: - Change `sideOffset` from 0 to 8 for desktop to match other submenus - Add transition animation for consistency - Improve shadow styling ## Additional Information - **Installation Method**: Git Clone - **Open WebUI Version**: v0.6.30 - **Operating System**: macOS/Linux/Windows (affects all platforms) - **Browser**: Chrome/Firefox/Safari (affects all browsers) The issue affects all browsers and platforms since it's a CSS overflow problem. Other submenus in the application (like Download submenu in chat menus) work correctly because they don't have the same overflow constraints. ## Related Files - `src/lib/components/chat/MessageInput/InputMenu.svelte` (lines 105 and 394) This issue prevents users from accessing OneDrive integration features through the UI, requiring them to use alternative file upload methods.

GiteaMirror closed this issue

2026-04-20 00:32:40 -05:00

GiteaMirror commented

2026-04-20 00:32:41 -05:00

@ShirasawaSama commented on GitHub (Sep 18, 2025):

Duplicate #17554

@ShirasawaSama commented on GitHub (Sep 18, 2025): Duplicate #17554

GiteaMirror commented

2026-04-20 00:32:42 -05:00

@vateseeb commented on GitHub (Sep 18, 2025):

thx, closing the issue

@vateseeb commented on GitHub (Sep 18, 2025): thx, closing the issue