[Fix] UI - Model Page: Column Resizing on Smaller Screens

[yuneng-jiang]

Relevant issues

Pre-Submission checklist

Please complete all items before asking a LiteLLM maintainer to review your PR

• I have Added testing in the tests/litellm/ directory, Adding at least 1 test is a hard requirement - see details
• My PR passes all unit tests on make test-unit
• My PR's scope is as isolated as possible, it only solves 1 specific problem

CI (LiteLLM team)

CI status guideline:

• 50-55 passing tests: main is stable with minor issues.
• 45-49 passing tests: acceptable but needs attention
• <= 40 passing tests: unstable; be careful with your merges and assess the risk.

• Branch creation CI run
  Link:

• CI run for the last commit
  Link:

• Merge / cherry-pick CI run
  Links:

Type

🐛 Bug Fix
✅ Test

Changes

This PR fixes the column resizing on smaller screens. The issue was hard coded CSS that required each column to be a certain size, which restricted column resizing on small screens

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
litellm	Ready	Preview, Comment	Feb 6, 2026 8:32pm

[greptile-apps]

Greptile Overview

Greptile Summary

Fixed column resizing behavior on smaller screens by removing hardcoded CSS widths (max-w-[*]) and replacing them with responsive w-full classes, while adding explicit size and minSize properties to column definitions. The table now uses dynamic width calculation via tableInstance.getTotalSize() with tableLayout: "fixed" to enable proper column resizing. Additionally enhanced the Model Information column UI by replacing tooltip with a richer popover, and improved text truncation using Ant Design's Text component with built-in ellipsis support. Includes comprehensive test coverage for all column features.

Confidence Score: 5/5

• This PR is safe to merge with no issues found
• The changes are well-implemented UI improvements that fix a legitimate issue (column resizing on smaller screens) by using TanStack Table's built-in sizing mechanisms properly. The implementation follows React and TanStack Table best practices, includes comprehensive test coverage with 30+ test cases, and doesn't introduce any performance issues, security vulnerabilities, or breaking changes. The code is purely frontend styling and table configuration changes with no impact on backend systems or database requests.
• No files require special attention

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/model_dashboard/all_models_table.tsx	Updated table styling to use dynamic width calculation (tableInstance.getTotalSize()) with tableLayout: "fixed" and added overflow-hidden to table cells for better column resizing on smaller screens
ui/litellm-dashboard/src/components/model_dashboard/table.tsx	Updated table styling to use dynamic width calculation (tableInstance.getTotalSize()) with tableLayout: "fixed" and added overflow-hidden to table cells for better column resizing on smaller screens
ui/litellm-dashboard/src/components/molecules/models/columns.tsx	Added size and minSize properties to all columns, replaced Tooltip with Popover for Model Information column with enhanced UI, replaced hardcoded max-w-[*] with w-full for responsive sizing, and replaced div with Ant Design Text component with ellipsis support
ui/litellm-dashboard/src/components/molecules/models/columns.test.tsx	New comprehensive test file covering column rendering, user interactions, data display, access control, and edge cases

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant Table Component
    participant TanStack Table
    participant Column Defs

    User->>Browser: View model page on small screen
    Browser->>Table Component: Render with viewport constraints
    Table Component->>Column Defs: Request column definitions
    Column Defs-->>Table Component: Return columns with size/minSize props
    Table Component->>TanStack Table: Initialize with columns & data
    TanStack Table->>TanStack Table: Calculate getTotalSize() based on column sizes
    TanStack Table-->>Table Component: Return table instance
    Table Component->>Browser: Apply dynamic width (getTotalSize())
    Table Component->>Browser: Apply tableLayout: "fixed"
    Browser->>Browser: Render table with responsive column sizing
    
    User->>Browser: Resize column
    Browser->>TanStack Table: Trigger resize handler
    TanStack Table->>TanStack Table: Update columnSizing state
    TanStack Table->>TanStack Table: Recalculate getTotalSize()
    TanStack Table-->>Table Component: Update table instance
    Table Component->>Browser: Apply new width (getTotalSize())
    Browser->>Browser: Render with resized columns
    
    User->>Browser: Hover over Model Information
    Browser->>Column Defs: Trigger Popover
    Column Defs->>Browser: Display enhanced model details
    Browser-->>User: Show popover with provider, model names

Loading

[greptile-apps]

_{4 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}