Bug: Modal width not responding to sidebar expansion

[ojfbot]

Bug Description

Document preview and chat modals do not properly adjust their width when the ThreadSidebar (V2 right sidebar) is expanded, causing modals to appear partially under the sidebar.

Current Behavior

1. ThreadSidebar collapsed: Modal displays at full width (correct)
2. ThreadSidebar expanded: Modal width does not decrease, modal goes partially under sidebar (incorrect)

Expected Behavior

When ThreadSidebar expands (320px on right side):

• Modal should narrow its width by 320px
• Modal should stay centered
• Modal should remain on top of sidebar (z-index: 9000 > 999)
• Smooth transition animation (0.3s ease)

Technical Details

ThreadSidebar:

• Position: fixed, right: 0
• Width: 320px when expanded
• z-index: 999

Modal Container:

• Current z-index: 9000 (correct - above sidebar)
• Current width behavior: Not responding to with-right-sidebar class

Attempted Solutions:

1. CSS class with higher specificity - didn't apply reliably
2. Inline styles via useEffect - didn't apply (timing issue with React Modal rendering)
3. Both CSS + inline styles - still not working consistently

Root Cause:
Carbon Modal component's internal styling and React rendering order prevent both CSS classes and inline styles from applying reliably when sidebar state changes.

Affected Components

• DocumentPreviewModal.tsx
• DocumentChatModal.tsx
• App.css (modal width CSS rules)

Code References

CSS (App.css:77-87):

.cds--modal-container.cds--modal-container--lg.with-right-sidebar {
  max-width: calc(100vw - 464px) !important;
  width: calc(100vw - 464px) !important;
}

React (DocumentPreviewModal.tsx:52-78):

useEffect(() => {
  const modalContainer = document.querySelector('.cds--modal-container') as HTMLElement
  if (modalContainer) {
    if (sidebarExpanded) {
      modalContainer.style.maxWidth = 'calc(100vw - 464px)'
      modalContainer.style.width = 'calc(100vw - 464px)'
    }
  }
}, [sidebarExpanded])

Potential Solutions

1. Portal-based modal with custom positioning - Replace Carbon Modal with custom implementation
2. ResizeObserver + MutationObserver - Forcibly apply styles after React render
3. CSS Grid layout - Use grid instead of fixed positioning
4. Carbon Modal customization - Investigate Carbon Modal API for width control

Priority

Medium - Cosmetic issue that doesn't block core functionality but degrades UX when using ThreadSidebar.

Related

• PR Bio Dashboard File Interaction Buttons (Issue #12) #57 (Bio Dashboard File Interactions)
• Issue Extend Bio Dashboard File Interaction Buttons with AI Chat and Preview #12 (Bio Dashboard File Interaction Buttons)
• Commit: 9532027 (feat: add responsive modal width for sidebar states)

Environment

• Browser: Chrome/Safari/Firefox (all affected)
• Component: Carbon Design System Modal
• React version: 18.x
• Carbon React version: latest

---

🤖 Generated with Claude Code