fix(ui): restore the public model name tooltip layout in the add model flow

[yuneng-berri]

TLDR

Problem this solves:

• Public Model Name tooltip renders as four unreadable columns
• Its inline code samples show as blank blocks

How it solves it:

• Wrap the tooltip's blocks in one vertical container
• Tint the code samples from the tooltip's own color

User Flow

Before: an admin adding a deployment opens the Public Model Name help and gets an unreadable band of text

1. They open http://localhost:4000/ui/?page=llm-model-hub, go to Add Model, pick a provider and a model
2. They scroll to Model Mappings and hover the help icon next to Public Model Name
3. The tooltip opens as four side-by-side columns, each a few words wide, and the model-name samples inside it are blank rectangles with no readable text
4. They close it without learning what the field expects

After: the same tooltip reads as four normal lines with every sample visible

1. They open http://localhost:4000/ui/?page=llm-model-hub, go to Add Model, pick a provider and a model
2. They scroll to Model Mappings and hover the help icon next to Public Model Name
3. The tooltip opens as four stacked lines, and the samples example-name, openai/qwen-plus-latest, model = "example-name" and qwen-plus-latest are all legible
4. They read the example and fill the field, in either the light or the dark theme

Relevant issues

Linear ticket

Pre-Submission checklist

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

• I have added meaningful tests
• The handful of test files covering my change pass locally, e.g. uv run pytest tests/test_litellm/<your_test_file>.py -v. Leave the suites (make test-unit-*, make test-unit) to CI: it finishes in ~15 minutes where a laptop takes an hour or more
• My PR passes all required CI/CD checks (e.g., lint, schema.d.ts sync check, etc.)
• My PR's scope is as isolated as possible; it only solves 1 specific problem
• I have received a Greptile Confidence Score of at least 4/5 before requesting a maintainer review (Greptile reviews automatically once the PR is opened; only comment @greptileai to re-request a review after pushing changes)

Delays in PR merge?

If you're seeing a delay in your PR being merged, ping the LiteLLM Team on Slack (#pr-review).

Screenshots / Proof of Fix

Setup, the same for both sides: run the proxy with python litellm/proxy/proxy_cli.py --config litellm/proxy/dev_config.yaml --detailed_debug, then run npm run dev in ui/litellm-dashboard and log in to the dashboard

Before (aae36f4)

1. Open http://localhost:3000/?page=llm-model-hub and click Add Model
2. Choose OpenAI as the provider and qwen-plus-latest as the model, so a row appears under Model Mappings
3. Hover the help icon next to the Public Model Name column header
4. Screenshot the tooltip: four side-by-side columns, blank rectangles where the code samples should be
5. Switch the dashboard to the dark theme and repeat step 3

After (70dc3d5)

1. Open http://localhost:3000/?page=llm-model-hub and click Add Model
2. Choose OpenAI as the provider and qwen-plus-latest as the model, so a row appears under Model Mappings
3. Hover the help icon next to the Public Model Name column header
4. Screenshot the tooltip: four stacked lines, every code sample readable
5. Switch the dashboard to the dark theme and repeat step 3, the samples stay readable there too

Type

🐛 Bug Fix

Caveats (if any)

• No test added: jsdom cannot observe CSS layout
• A Playwright spec is the only honest guard here

Final Attestation

• The tests check the right things, including the edge cases, and regressions in the respective real-world customer use-cases are not possible after this PR

[greptile-apps]

Greptile Summary

This PR restores the Public Model Name tooltip’s readable layout and inline-code contrast in the Add Model flow.

• Wraps the tooltip sections in a vertical flex container.
• Uses theme-aware inline-code styling that remains legible in light and dark themes.

Confidence Score: 5/5

The PR appears safe to merge, with the isolated tooltip layout and contrast fix matching the dashboard’s tooltip and theme behavior.

The changed wrapper corrects the row-layout issue, and the new theme-derived code styling remains supported and readable across the dashboard’s light and dark themes without affecting model-mapping logic.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx	Reworks the tooltip into a stacked layout and applies compatible theme-aware styling to its code samples without changing form behavior.

_{Reviews (1): Last reviewed commit: "fix(ui): restore the public model name t..." | Re-trigger Greptile}