fix(ui): key info view goes blank below the fold on small viewports

[Bytechoreographer]

PR: fix(ui): key info view goes blank below the fold on small viewports

Branch: Bytechoreographer:fix/key-info-view-layout-blank-on-small-screens
Target: BerriAI:litellm_internal_staging
PR link: https://github.com/Bytechoreographer/litellm/pull/new/fix/key-info-view-layout-blank-on-small-screens

---

Relevant issues

Pre-Submission checklist

• No test changes required — pure CSS/className edit, no test asserts on these classes
• npm run test passes for affected files
• Scope is isolated: one source file, two className lines
• Comment @greptileai and get Confidence Score ≥ 4/5 before requesting maintainer review

Type

🐛 Bug Fix

Changes

Root cause

On the Virtual Keys detail page (KeyInfoView), opening a key on a small
viewport (13" MacBook Air, ~750 px tall) showed the header and the first tab
correctly — but switching to the Settings tab (or scrolling down) left the
lower half of the page blank. No scrollbar appeared.

The layout chain locked the page into a fixed-height box with no scroll
fallback:

VirtualKeysTable.tsx:687
  <div className="w-full h-full overflow-hidden">      ← parent clips overflow
    KeyInfoView
      key_info_view.tsx:399
      <div className="w-full h-screen p-4">            ← 100vh, no overflow-y
        <KeyInfoHeader />                              ← ~110–140 px
        <TabGroup>
          <TabList />                                  ← ~40 px
          <TabPanel>  (Settings)
            key_info_view.tsx:617
            <Card className="overflow-y-auto max-h-[65vh]">  ← inner scroll, 65 vh

On a 750 px viewport the math is:

• Header + TabList ≈ 180 px
• Card wants 65vh ≈ 487 px
• Plus padding/margins → total > 100vh

The outer <div className="w-full h-screen p-4"> has no overflow-y-auto,
and its parent in VirtualKeysTable is overflow-hidden. So when content
exceeds the viewport height, the bottom is clipped instead of scrolled —
including the inner Card's own scroll region. The user sees blank space and
cannot reach the cut-off content.

The Overview tab fits because its Grid of summary Cards is short. Settings is
where it surfaces because the form is long.

Reproduce:

1. On a viewport ≤ ~800 px tall (13" MBA, half-height window, etc.), open the
   Virtual Keys page and click into any key.
2. The Overview tab renders fine.
3. Click Settings — the Card shows the top of the form, but everything
   below the viewport is blank, with no scrollbar.

Fix

Replace the fixed h-screen with h-full overflow-y-auto on the
KeyInfoView root, and drop the inner Card's max-h-[65vh] overflow-y-auto.
Now the entire detail page scrolls as a single column inside whatever space
the parent gives it.

  return (
-   <div className="w-full h-screen p-4">
+   <div className="w-full h-full overflow-y-auto p-4">
      <KeyInfoHeader ... />
      ...
      <TabPanel>  {/* Settings */}
-       <Card className="overflow-y-auto max-h-[65vh]">
+       <Card>
          ...
        </Card>
      </TabPanel>

Why both edits:

• h-full overflow-y-auto makes KeyInfoView fill its parent (no longer
  hard-locked at 100vh) and supplies its own scrollbar when content
  overflows.
• Removing max-h-[65vh] overflow-y-auto on the Settings Card eliminates a
  redundant nested scroll region. With one outer scroll, the Card naturally
  flows; nesting a second scroll inside a clipped parent is exactly what
  caused the blank-below-the-fold symptom.

Files changed

File	Change
ui/litellm-dashboard/src/components/templates/key_info_view.tsx	Root: h-screen → h-full overflow-y-auto. Settings Card: remove overflow-y-auto max-h-[65vh].

[greptile-apps]

Greptile Summary

This PR fixes a layout clipping bug in KeyInfoView where content below the fold was invisible on small viewports (~750 px tall). The root container was hard-locked at h-screen with no overflow handling, while its parent in VirtualKeysTable used overflow-hidden, causing content to be clipped rather than scrolled.

• Root <div> in key_info_view.tsx changes from h-screen to h-full overflow-y-auto, allowing it to fill its parent and provide its own scrollbar.
• The Settings tab <Card> drops overflow-y-auto max-h-[65vh], removing a redundant nested scroll region that was already clipped by the outer overflow-hidden parent.

Confidence Score: 5/5

Safe to merge — two targeted Tailwind class edits with no logic, data, or API changes.

The change is purely presentational: one class swap on a wrapper div and the removal of two utility classes from a Card. Both usages of KeyInfoView (in VirtualKeysTable and view_logs) behave correctly after the fix — the VirtualKeysTable parent's overflow-hidden container now scrolls as intended, and the view_logs context is unaffected because h-full resolves to content height there and page-level scroll takes over naturally.

No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/templates/key_info_view.tsx	Two Tailwind className edits: root h-screen → h-full overflow-y-auto, Settings Card loses overflow-y-auto max-h-[65vh]; fixes blank-below-the-fold on small viewports with no logic changes.

_{Reviews (1): Last reviewed commit: "fix(ui): key info view goes blank below ..." | Re-trigger Greptile}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[oss-pr-review-agent-shin]

🤖 litellm-agent: Squash-merged into staging branch litellm_agent_oss_staging_05_07_2026. Staging PR: #27375

---

Triage Summary
Fixes a UI layout bug in the key info view where content would go blank below the fold on small viewports. Changes the outer container from h-screen with no overflow handling to h-full with overflow-y-auto so the page scrolls correctly. Also removes the max-h-[65vh] constraint on the Settings Panel Card, letting it expand naturally instead of being clipped.

Merge Confidence: 5/5 ✅ READY
Ready to ship.

All checks green. Greptile 5/5, no blocking pattern findings, no CircleCI runs (OSS-typical).