fix(usage): correct the grid floor, tooltip height estimate, and Other row slot

Three findings from review.

A grid track minimum is a hard floor, so `minmax(320px, 1fr)` made the source
section wider than its column on a narrow viewport and overflowed instead of
collapsing. `min(320px, 100%)` caps the floor at the width actually available.

The tooltip height estimate used font sizes where it needed line boxes. The type
scale pairs no line-height with a size, so a line occupies the ambient 1.5 — a
10px date line is 15px, an 11px row is 16.5 — and the estimate came in ~1.5px
under the real box. Since it is what the clamp measures against and the chart
clips its overflow, an underestimate cuts the bottom off the box rather than
moving it up. Now derived from the line boxes, every part rounded up, with a test
that fails if any of the three constants drops below the rendered height.

The `Other` row drew its disclosure chevron bare at 14px while the rows above
reserved the 16px arrow or the 30px menu slot, pulling its figure out of the
column. It now centres in the same slot the rest of the list reserves.

Author: waleedlatif1

apps/sim/components/charts/chart-tooltip.test.ts

@@ -91,4 +91,24 @@ describe('estimateTooltipHeight', () => {
   it('reserves a row even when told there are none', () => {
     expect(estimateTooltipHeight(0, false)).toBe(estimateTooltipHeight(1, false))
   })
+
+  /**
+   * The estimate is what the clamp measures against, and the chart clips its overflow,
+   * so it must never come in under the real box — an underestimate cuts the bottom off
+   * rather than moving the box up. Measured here against the box model the tooltip's
+   * own class string implies: `border` + `py-1.5`, a `text-micro` date with `mb-1`,
+   * and one `text-xs` row per value, every line at the ambient 1.5 line-height.
+   */
+  it('never comes in under the box the tooltip actually renders', () => {
+    const chrome = 2 + 6 + 6
+    const dateLine = 10 * 1.5 + 4
+    const rowLine = 11 * 1.5
+
+    for (const rows of [1, 2, 5]) {
+      expect(estimateTooltipHeight(rows, true)).toBeGreaterThanOrEqual(
+        chrome + dateLine + rows * rowLine
+      )
+      expect(estimateTooltipHeight(rows, false)).toBeGreaterThanOrEqual(chrome + rows * rowLine)
+    }
+  })
 })

apps/sim/components/charts/chart-tooltip.tsx

@@ -58,17 +58,35 @@ export function estimateTooltipWidth(longestRowLength: number): number {
   return Math.min(220, Math.max(80, 7 * longestRowLength + 24))
 }
 
+/** Border plus the `py-1.5` the tooltip's own class string sets. */
+const TOOLTIP_CHROME_HEIGHT = 2 + 12
+
 /**
- * Height of the box {@link ChartTooltip} renders, from its own box model: the border
- * and `py-1.5` chrome, the optional date header and its margin, and one line per row.
+ * The `text-micro` date's line box plus its `mb-1`.
+ *
+ * The type scale pairs no line-height with a font size, so a line occupies the
+ * ambient 1.5 rather than the font size itself — 15px for 10px `text-micro`, not 10.
+ */
+const TOOLTIP_DATE_HEIGHT = 15 + 4
+
+/** One `text-xs` row's line box: 11px at the ambient 1.5, rounded up from 16.5. */
+const TOOLTIP_ROW_HEIGHT = 17
+
+/**
+ * Height of the box {@link ChartTooltip} renders, from its own box model.
+ *
  * Estimated rather than measured because the position is computed in the same render
  * that mounts the tooltip — reading a real height would need a second paint, which
- * shows up as the tooltip visibly jumping under the cursor.
+ * shows up as the tooltip visibly jumping under the cursor. Every part rounds up:
+ * this is what {@link positionChartTooltip} clamps against and the chart clips its
+ * overflow, so an underestimate cuts the bottom off the box rather than moving it.
  */
 export function estimateTooltipHeight(rowCount: number, hasDate: boolean): number {
-  const chrome = 2 + 12
-  const dateLine = hasDate ? 14 + 4 : 0
-  return chrome + dateLine + Math.max(1, rowCount) * 16
+  return (
+    TOOLTIP_CHROME_HEIGHT +
+    (hasDate ? TOOLTIP_DATE_HEIGHT : 0) +
+    Math.max(1, rowCount) * TOOLTIP_ROW_HEIGHT
+  )
 }
 
 interface ChartTooltipProps {

apps/sim/ee/organization-usage/components/usage-consumers.tsx

@@ -278,12 +278,19 @@ export function UsageConsumers({
                   ? formatChartCompactNumber(breakdown.other.tokens)
                   : breakdown.other.credits.toLocaleString()}
               </span>
-              {onExpandOther ? (
-                <ChevronDown className={disclosureChevronClass} />
-              ) : (
-                trailingSlot && (
-                  <span className={cn(trailingSlot, 'flex-shrink-0')} aria-hidden='true' />
-                )
+              {/*
+                Centred in the slot the rows above reserve rather than sized to the
+                glyph: with a navigable or action-bearing list the reserved slot is
+                wider than the chevron, and drawing it bare pulled this row's figure
+                out of the column.
+              */}
+              {trailingSlot && (
+                <span
+                  className={cn(trailingSlot, 'flex flex-shrink-0 items-center justify-center')}
+                  aria-hidden='true'
+                >
+                  {onExpandOther && <ChevronDown className={disclosureChevronClass} />}
+                </span>
               )}
             </OtherRow>
           )

apps/sim/ee/organization-usage/components/usage-monitoring.tsx

@@ -469,7 +469,13 @@ export function UsageMonitoring({
             about how wide this actually is. Same rule as `RESOURCE_LIST_GRID`.
           */}
             <UsageSection dimension='source' unit='credits'>
-              <div className='grid grid-cols-[repeat(auto-fit,minmax(320px,1fr))] gap-x-6 gap-y-7'>
+              {/*
+                `min(320px, 100%)` rather than a bare `320px`: a track minimum is a
+                hard floor, so on a column narrower than the minimum the grid would
+                be wider than its container and overflow. Capping the floor at the
+                available width collapses it to one column instead.
+              */}
+              <div className='grid grid-cols-[repeat(auto-fit,minmax(min(320px,100%),1fr))] gap-x-6 gap-y-7'>
                 <UsageConsumers
                   dimension='source'
                   breakdown={breakdown.data}