refactor: Components updates

[raunakab]

Description

---

Summary by cubic

Standardized the Modal API and styling across the app and aligned shared components for consistent spacing and scroll behavior. Removed ad‑hoc classNames in consumers and simplified the UserFilesModal search experience.

• Refactors

  • Modal.Header/Body/Footer now use Section layout props (padding, gap, alignment); remove className overrides.
  • Modal.Body handles overflow automatically for fixed-height sizes and supports twoTone backgrounds (default on).
  • Modal.Footer rebuilt on Section with consistent spacing; all footers updated to rely on defaults.
  • Section now supports justifyContent="between" and is ref-forwarded.
  • Cleaned up z-index tokens (removed z-confirmation) and unified modal sizing/overflow; TextView uses large size.
  • UserFilesModal: replaced useFilter with local search state, simplified layout with Section, and tightened empty state.
  • Separator fills its axis (w-full horizontal, h-full vertical) for consistent dividers.
  • ShadowDiv wrapper uses h-full for accurate scroll shadows in flexible layouts.
  • InputSelect viewport uses flex column with gap; added InputSelect.Separator built on Separator with sensible defaults.

• Migration

  • Do not pass className to Modal.Header/Body/Footer; use Section props (padding, gap, flexDirection, justifyContent, alignItems).
  • Rely on Modal for overflow and sizing; remove local max-h/px/p- classes previously applied to Body/Content/Footer.
  • Use twoTone={false} on Modal.Body when a flat background is desired.
  • Remove any z-confirmation class/variable usage.
  • Use InputSelect.Separator for dropdown dividers instead of custom elements.

^{Written for commit 9604076. Summary will update on new commits.}

[cubic-dev-ai]

1 issue found across 32 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="web/src/app/admin/configuration/llm/forms/components/FormWrapper.tsx">

<violation number="1" location="web/src/app/admin/configuration/llm/forms/components/FormWrapper.tsx:123">
P2: Removing `max-h-[70vh] overflow-y-auto` from a `medium` variant modal may cause content clipping. The Modal component only applies automatic overflow scrolling for `large`, `small`, and `tall` variants—not `medium`. If form content is tall, it could be clipped rather than scrollable. Consider keeping the scroll styles, or switching to a variant like `tall` that handles overflow automatically.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[greptile-apps]

Greptile Overview

Greptile Summary

This PR refactors the Modal component system to standardize styling and remove manual className overrides across the codebase.

Key Changes

Modal Component Refactoring (Modal.tsx):

• Removed className prop support from Modal.Overlay, Modal.Content, Modal.Header, Modal.Body, and Modal.Footer using WithoutStyles type
• Added sizeVariant to ModalContext for components to access modal size information
• Refactored Modal.Header to use Section layout component instead of raw divs
• Enhanced Modal.Body with:
  • twoTone prop (default: true) that applies bg-background-tint-01 background
  • Automatic overflow handling based on modal size variant (large/small/tall get overflow-auto)
  • Wraps internal Section in a div for background styling
• Refactored Modal.Footer to use Section with default layout (row direction, end justification, 0.5rem gap)

Section Component Enhancement (general-layouts.tsx):

• Added forwardRef support to Section component for ref forwarding
• Added "between" option to JustifyContent type (maps to justify-between)

Cleanup:

• Removed unused z-confirmation z-index class and CSS variable
• Updated 32 files to remove manual className styling from Modal components
• Removed useFilter hook usage in UserFilesModal in favor of inline filtering logic
• Removed ScrollIndicatorDiv from UserFilesModal (overflow now handled by Modal.Body)

Impact

This refactoring standardizes modal styling across the entire application, making modals more consistent and reducing boilerplate. The default twoTone behavior ensures consistent background colors, and automatic overflow handling simplifies modal implementation.

Confidence Score: 5/5

• Safe to merge - systematic refactoring with consistent patterns across all changes
• This is a well-executed refactoring that systematically updates the Modal component API and its 32 usage sites. The changes are internally consistent: all modals previously using bg-background-tint-01 now rely on the default twoTone={true} behavior, overflow handling is appropriately automated based on modal size variants, and the removal of className props is comprehensive. The refactoring follows established patterns (Section component, WithoutStyles type) and maintains backward compatibility in behavior while improving maintainability.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
web/src/refresh-components/Modal.tsx	5/5	Refactored Modal component to use Section layout, removed className props, added twoTone body styling and auto-overflow handling
web/src/layouts/general-layouts.tsx	5/5	Added forwardRef support to Section component, added "between" to JustifyContent type
web/src/components/modals/UserFilesModal.tsx	5/5	Removed useFilter hook in favor of inline filtering logic, updated to use Section layout, removed ScrollIndicatorDiv
web/src/app/css/z-index.css	5/5	Removed unused z-confirmation CSS class and variable
web/src/refresh-components/layouts/ConfirmationModalLayout.tsx	5/5	Removed z-confirmation class usage, cleaned up className props, added description support
web/src/components/modals/AddInstructionModal.tsx	5/5	Removed manual className styling from Modal.Body and Modal.Footer
web/src/components/modals/CreateProjectModal.tsx	5/5	Removed manual className styling from Modal.Body and Modal.Footer
web/src/components/modals/ExceptionTraceModal.tsx	5/5	Removed overflow styling from Modal.Body (now handled automatically)
web/src/sections/actions/modals/AddMCPServerModal.tsx	5/5	Removed manual className styling from Modal.Header, Modal.Body, and Modal.Footer
web/src/sections/actions/modals/MCPAuthenticationModal.tsx	5/5	Removed manual className styling from Modal.Header, Modal.Body, and Modal.Footer
web/src/refresh-components/ScrollIndicatorDiv.tsx	5/5	Added w-full class to root container for full width behavior
web/src/components/chat/TextView.tsx	5/5	Changed Modal.Content from medium to large, removed manual overflow/height classes

Sequence Diagram

sequenceDiagram
    participant Dev as Developer
    participant Modal as Modal Component
    participant Section as Section Layout
    participant Body as Modal.Body
    participant Footer as Modal.Footer
    
    Note over Dev,Footer: PR refactors Modal component system
    
    Dev->>Modal: Remove className prop support
    Note over Modal: Use WithoutStyles type
    
    Dev->>Section: Add forwardRef support
    Dev->>Section: Add "between" to JustifyContent
    
    Dev->>Modal: Refactor Modal.Header
    Modal->>Section: Use Section instead of div
    
    Dev->>Modal: Refactor Modal.Body
    Modal->>Body: Add twoTone prop (default: true)
    Modal->>Body: Add auto overflow for fixed-height variants
    Body->>Section: Wrap Section in div with background
    
    Dev->>Modal: Refactor Modal.Footer
    Modal->>Footer: Replace div with Section
    Modal->>Footer: Set default layout (row, end, gap 0.5)
    
    Dev->>Modal: Add sizeVariant to context
    Note over Body: Use sizeVariant for overflow logic
    
    Dev->>Dev: Update all Modal usages (32 files)
    Note over Dev: Remove manual className styling

Loading

[jmelahman]

Maybe an example would be helpful, but this seems wrong as a default? Feel like ShadowDiv should behave like a div.

[jmelahman]

Or maybe rename the component to make it clear this has default layout properties

[raunakab]

Hmm, maybe @nmgarza5 can update the name? He was the one who originally named it.

[jmelahman]

Is this change load-bearing? Can we follow up with this change? It's a functional change and realistically does not belong in a refactor. I also think it's incorrect, so we should resolve this before merge imo.

[Subash-Mohan]

lgtm!

[jmelahman]

Let's go over this tomorrow?

[raunakab]

Actually, @jmelahman, I can just revert the changes to ShadowDiv. They're not particularly important for my changes.