diff --git a/web-common/src/features/dashboards/leaderboard/Leaderboard.svelte b/web-common/src/features/dashboards/leaderboard/Leaderboard.svelte
index c917e9740fe..75d440e4874 100644
--- a/web-common/src/features/dashboards/leaderboard/Leaderboard.svelte
+++ b/web-common/src/features/dashboards/leaderboard/Leaderboard.svelte
@@ -18,7 +18,6 @@
     cleanUpComparisonValue,
     compareLeaderboardValues,
     getSort,
-    type LeaderboardItemData,
     prepareLeaderboardItemData,
   } from "./leaderboard-utils";
   import type { DimensionThresholdFilter } from "../stores/metrics-explorer-entity";
@@ -39,13 +38,14 @@
     getFiltersForOtherDimensions,
   } from "../selectors";
   import { getIndependentMeasures } from "../state-managers/selectors/measures";
-  import {
-    LEADERBOARD_DEFAULT_COLUMN_WIDTHS,
-    type ColumnWidths,
-  } from "./leaderboard-widths";
   import LeaderboardHeader from "./LeaderboardHeader.svelte";
   import LeaderboardRow from "./LeaderboardRow.svelte";
   import LoadingRows from "./LoadingRows.svelte";
+  import {
+    valueColumn,
+    deltaColumn,
+    DEFAULT_COL_WIDTH,
+  } from "./leaderboard-widths";
 
   const slice = 7;
   const gutterWidth = 24;
@@ -62,20 +62,16 @@
   export let metricsViewName: string;
   export let metricsView: V1MetricsViewSpec;
   export let sortType: SortType;
+  export let tableWidth: number;
   export let sortedAscending: boolean;
   export let isValidPercentOfTotal: boolean;
   export let timeControlsReady: boolean;
+  export let firstColumnWidth: number;
   export let isSummableMeasure: boolean;
   export let filterExcludeMode: boolean;
   export let atLeastOneActive: boolean;
   export let isBeingCompared: boolean;
   export let parentElement: HTMLElement;
-  export let columnWidths: ColumnWidths = LEADERBOARD_DEFAULT_COLUMN_WIDTHS;
-  export let estimateAndUpdateLeaderboardWidths: (
-    dimensionName: string,
-    aboveTheFold: LeaderboardItemData[],
-    belowTheFold: LeaderboardItemData[],
-  ) => void;
   export let toggleDimensionValueSelection: (
     dimensionName: string,
     dimensionValue: string,
@@ -260,24 +256,6 @@
   );
 
   $: columnCount = comparisonTimeRange ? 3 : isValidPercentOfTotal ? 2 : 1;
-
-  // Estimate the common column widths for all leaderboards
-  $: if (aboveTheFold.length || belowTheFoldRows.length) {
-    estimateAndUpdateLeaderboardWidths(
-      dimensionName,
-      aboveTheFold,
-      belowTheFoldRows,
-    );
-  }
-
-  $: tableWidth =
-    columnWidths.dimension +
-    columnWidths.value +
-    (comparisonTimeRange
-      ? columnWidths.delta + columnWidths.deltaPercent
-      : isValidPercentOfTotal
-        ? columnWidths.percentOfTotal
-        : 0);
 </script>
 
 <div
@@ -291,13 +269,13 @@
   <table style:width="{tableWidth + gutterWidth}px">
     <colgroup>
       <col style:width="{gutterWidth}px" />
-      <col style:width="{columnWidths.dimension}px" />
-      <col style:width="{columnWidths.value}px" />
+      <col style:width="{firstColumnWidth}px" />
+      <col style:width="{$valueColumn}px" />
       {#if !!comparisonTimeRange}
-        <col style:width="{columnWidths.delta}px" />
-        <col style:width="{columnWidths.deltaPercent}px" />
+        <col style:width="{$deltaColumn}px" />
+        <col style:width="{DEFAULT_COL_WIDTH}px" />
       {:else if isValidPercentOfTotal}
-        <col style:width="{columnWidths.percentOfTotal}px" />
+        <col style:width="{DEFAULT_COL_WIDTH}px" />
       {/if}
     </colgroup>
 
@@ -324,6 +302,7 @@
         {#each aboveTheFold as itemData (itemData.dimensionValue)}
           <LeaderboardRow
             {tableWidth}
+            {firstColumnWidth}
             {isSummableMeasure}
             {isBeingCompared}
             {filterExcludeMode}
@@ -332,8 +311,6 @@
             {itemData}
             {isValidPercentOfTotal}
             isTimeComparisonActive={!!comparisonTimeRange}
-            {columnWidths}
-            {gutterWidth}
             {toggleDimensionValueSelection}
             {formatter}
           />
@@ -343,6 +320,7 @@
       {#each belowTheFoldRows as itemData, i (itemData.dimensionValue)}
         <LeaderboardRow
           {itemData}
+          {firstColumnWidth}
           {isSummableMeasure}
           {tableWidth}
           {dimensionName}
@@ -351,8 +329,6 @@
           {atLeastOneActive}
           {isValidPercentOfTotal}
           isTimeComparisonActive={!!comparisonTimeRange}
-          {columnWidths}
-          {gutterWidth}
           borderTop={i === 0}
           borderBottom={i === belowTheFoldRows.length - 1}
           {toggleDimensionValueSelection}
diff --git a/web-common/src/features/dashboards/leaderboard/LeaderboardDisplay.svelte b/web-common/src/features/dashboards/leaderboard/LeaderboardDisplay.svelte
index d3ce2a6623d..8b82fb7517b 100644
--- a/web-common/src/features/dashboards/leaderboard/LeaderboardDisplay.svelte
+++ b/web-common/src/features/dashboards/leaderboard/LeaderboardDisplay.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type { LeaderboardItemData } from "@rilldata/web-common/features/dashboards/leaderboard/leaderboard-utils";
   import { getStateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
   import type {
     V1Expression,
@@ -11,9 +10,9 @@
   import Leaderboard from "./Leaderboard.svelte";
   import LeaderboardControls from "./LeaderboardControls.svelte";
   import {
-    calculateAndUpdateAllLeaderboardWidths,
-    columnWidths,
-    resetColumnWidths,
+    DEFAULT_COL_WIDTH,
+    deltaColumn,
+    valueColumn,
   } from "./leaderboard-widths";
 
   export let metricsViewName: string;
@@ -50,31 +49,25 @@
 
   let parentElement: HTMLDivElement;
 
-  function estimateAndUpdateLeaderboardWidths(
-    dimensionName: string,
-    aboveTheFold: LeaderboardItemData[],
-    selectedBelowTheFold: LeaderboardItemData[],
-  ) {
-    const firstColumnWidth =
-      !comparisonTimeRange && !$isValidPercentOfTotal ? 240 : 164;
-    calculateAndUpdateAllLeaderboardWidths(
-      dimensionName,
-      firstColumnWidth,
-      aboveTheFold,
-      selectedBelowTheFold,
-      $activeMeasureFormatter,
-    );
-  }
+  $: ({ instanceId } = $runtime);
 
-  // Reset column widths when relevant data changes
-  $: {
-    activeMeasureName;
-    !!comparisonTimeRange;
-    !!timeRange;
-    $isValidPercentOfTotal;
-    resetColumnWidths();
+  // Reset column widths when the measure changes
+  $: if (activeMeasureName) {
+    valueColumn.reset();
+    deltaColumn.reset();
   }
-  $: ({ instanceId } = $runtime);
+
+  $: firstColumnWidth =
+    !comparisonTimeRange && !$isValidPercentOfTotal ? 240 : 164;
+
+  $: tableWidth =
+    firstColumnWidth +
+    $valueColumn +
+    (comparisonTimeRange
+      ? $deltaColumn + DEFAULT_COL_WIDTH
+      : $isValidPercentOfTotal
+        ? DEFAULT_COL_WIDTH
+        : 0);
 </script>
 
 <div class="flex flex-col overflow-hidden size-full">
@@ -93,7 +86,9 @@
               {whereFilter}
               {dimensionThresholdFilters}
               {instanceId}
+              {tableWidth}
               {timeRange}
+              {firstColumnWidth}
               sortedAscending={$sortedAscending}
               sortType={$sortType}
               filterExcludeMode={$isFilterExcludeMode(dimension.name)}
@@ -106,8 +101,6 @@
               {timeControlsReady}
               selectedValues={$selectedDimensionValues(dimension.name)}
               isBeingCompared={$isBeingComparedReadable(dimension.name)}
-              columnWidths={$columnWidths}
-              {estimateAndUpdateLeaderboardWidths}
               formatter={$activeMeasureFormatter}
               {setPrimaryDimension}
               {toggleSort}
diff --git a/web-common/src/features/dashboards/leaderboard/LeaderboardRow.svelte b/web-common/src/features/dashboards/leaderboard/LeaderboardRow.svelte
index c8003e96ad9..9adccae0a71 100644
--- a/web-common/src/features/dashboards/leaderboard/LeaderboardRow.svelte
+++ b/web-common/src/features/dashboards/leaderboard/LeaderboardRow.svelte
@@ -13,18 +13,15 @@
   import LeaderboardItemFilterIcon from "./LeaderboardItemFilterIcon.svelte";
   import LeaderboardTooltipContent from "./LeaderboardTooltipContent.svelte";
   import LongBarZigZag from "./LongBarZigZag.svelte";
+  import {
+    DEFAULT_COL_WIDTH,
+    deltaColumn,
+    valueColumn,
+  } from "./leaderboard-widths";
 
   export let itemData: LeaderboardItemData;
   export let dimensionName: string;
   export let tableWidth: number;
-  export let columnWidths: {
-    dimension: number;
-    value: number;
-    percentOfTotal: number;
-    delta: number;
-    deltaPercent: number;
-  };
-  export let gutterWidth: number;
   export let borderTop = false;
   export let borderBottom = false;
   export let isSummableMeasure: boolean;
@@ -42,19 +39,37 @@
   export let formatter:
     | ((_value: number | undefined) => undefined)
     | ((value: string | number) => string);
+  export let firstColumnWidth: number;
 
   let hovered = false;
+  let valueRect = new DOMRect(0, 0, DEFAULT_COL_WIDTH);
+  let deltaRect = new DOMRect(0, 0, DEFAULT_COL_WIDTH);
 
   $: ({
-    dimensionValue: label,
+    dimensionValue,
     selectedIndex,
     pctOfTotal,
-    value: measureValue,
-    prevValue: comparisonValue,
+    value,
+    prevValue,
+    deltaAbs,
+    deltaRel,
+    uri,
   } = itemData);
 
   $: selected = selectedIndex >= 0;
 
+  $: formattedValue = value ? formatter(value) : null;
+  $: formattedDeltaRel = deltaRel
+    ? formatMeasurePercentageDifference(deltaRel)
+    : null;
+  $: formattedDelta = deltaAbs ? formatter(deltaAbs) : null;
+
+  $: deltaElementWidth = deltaRect.width;
+  $: valueElementWith = valueRect.width;
+
+  $: valueColumn.update(valueElementWith);
+  $: deltaColumn.update(deltaElementWidth);
+
   // Super important special case: if there is not at least one "active" (selected) value,
   // we need to set *all* items to be included, because by default if a user has not
   // selected any values, we assume they want all values included in all calculations.
@@ -63,19 +78,18 @@
     : false;
 
   $: previousValueString =
-    comparisonValue !== undefined && comparisonValue !== null
-      ? formatter(comparisonValue)
+    prevValue !== undefined && prevValue !== null
+      ? formatter(prevValue)
       : undefined;
 
-  $: formattedValue = measureValue ? formatter(measureValue) : null;
+  $: negativeChange = deltaAbs !== null && deltaAbs < 0;
 
-  $: negativeChange = itemData.deltaAbs !== null && itemData.deltaAbs < 0;
-
-  $: href = makeHref(itemData.uri);
+  $: href = makeHref(uri);
 
   $: percentOfTotal = isSummableMeasure && pctOfTotal ? pctOfTotal : 0;
 
-  $: barLength = (tableWidth - gutterWidth) * percentOfTotal;
+  $: barLength = tableWidth * percentOfTotal;
+  $: showZigZag = barLength > tableWidth;
 
   $: barColor = excluded
     ? "rgb(243 244 246)"
@@ -83,32 +97,17 @@
       ? "var(--color-primary-200)"
       : "var(--color-primary-100)";
 
-  $: secondCellBarLength = clamp(
-    0,
-    barLength - columnWidths.dimension,
-    columnWidths.value,
-  );
+  $: secondCellBarLength = clamp(0, barLength - firstColumnWidth, $valueColumn);
   $: thirdCellBarLength = isTimeComparisonActive
-    ? clamp(
-        0,
-        barLength - columnWidths.dimension - columnWidths.value,
-        columnWidths.delta,
-      )
+    ? clamp(0, barLength - firstColumnWidth - $valueColumn, $deltaColumn)
     : isValidPercentOfTotal
-      ? clamp(
-          0,
-          barLength - columnWidths.dimension - columnWidths.value,
-          columnWidths.percentOfTotal,
-        )
+      ? clamp(0, barLength - firstColumnWidth - $valueColumn, DEFAULT_COL_WIDTH)
       : 0;
   $: fourthCellBarLength = isTimeComparisonActive
     ? clamp(
         0,
-        barLength -
-          columnWidths.dimension -
-          columnWidths.value -
-          columnWidths.delta,
-        columnWidths.deltaPercent,
+        barLength - firstColumnWidth - $valueColumn - $deltaColumn,
+        DEFAULT_COL_WIDTH,
       )
     : 0;
 
@@ -131,8 +130,6 @@
     ${fourthCellBarLength}px, transparent ${fourthCellBarLength}px)`
     : undefined;
 
-  $: showZigZag = barLength > tableWidth - gutterWidth;
-
   // uri template or "true" string literal or undefined
   function makeHref(uriTemplateOrBoolean: string | boolean | null) {
     if (!uriTemplateOrBoolean) {
@@ -141,7 +138,7 @@
 
     const uri =
       uriTemplateOrBoolean === true
-        ? label
+        ? dimensionValue
         : uriTemplateOrBoolean.replace(/\s/g, "");
 
     const hasProtocol = /^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(uri);
@@ -171,15 +168,16 @@
   on:mouseenter={() => (hovered = true)}
   on:mouseleave={() => (hovered = false)}
   on:click={modified({
-    shift: () => shiftClickHandler(label),
+    shift: () => shiftClickHandler(dimensionValue),
     click: (e) =>
       toggleDimensionValueSelection(
         dimensionName,
-        label,
+        dimensionValue,
         false,
         e.ctrlKey || e.metaKey,
       ),
   })}
+  class="relative"
 >
   <td>
     <LeaderboardItemFilterIcon
@@ -196,7 +194,7 @@
     class="relative size-full flex flex-none justify-between items-center leaderboard-label"
   >
     <Tooltip location="left" distance={20}>
-      <FormattedDataType value={label} truncate />
+      <FormattedDataType value={dimensionValue} truncate />
 
       {#if previousValueString && hovered}
         <span
@@ -224,38 +222,44 @@
         {atLeastOneActive}
         {excluded}
         {filterExcludeMode}
-        {label}
+        label={dimensionValue}
         {selected}
       />
     </Tooltip>
   </td>
+
   <td style:background={secondCellGradient}>
-    <FormattedDataType type="INTEGER" value={formattedValue || measureValue} />
+    <div class="w-fit ml-auto bg-transparent" bind:contentRect={valueRect}>
+      <FormattedDataType type="INTEGER" value={formattedValue} />
+    </div>
+
     {#if showZigZag && !isTimeComparisonActive && !isValidPercentOfTotal}
       <LongBarZigZag />
     {/if}
   </td>
-  {#if isTimeComparisonActive}
+
+  {#if isTimeComparisonActive || isValidPercentOfTotal}
     <td style:background={thirdCellGradient}>
-      <FormattedDataType
-        type="INTEGER"
-        value={itemData.deltaAbs ? formatter(itemData.deltaAbs) : null}
-        customStyle={negativeChange ? "text-red-500" : ""}
-      />
-    </td>
-    <td style:background={fourthCellGradient}>
-      <PercentageChange
-        value={itemData.deltaRel
-          ? formatMeasurePercentageDifference(itemData.deltaRel)
-          : null}
-      />
-      {#if showZigZag}
-        <LongBarZigZag />
+      {#if isTimeComparisonActive}
+        <div class="w-fit ml-auto" bind:contentRect={deltaRect}>
+          <FormattedDataType
+            type="INTEGER"
+            value={formattedDelta}
+            customStyle={negativeChange ? "text-red-500" : ""}
+          />
+        </div>
+      {:else}
+        <PercentageChange value={pctOfTotal} />
+        {#if showZigZag}
+          <LongBarZigZag />
+        {/if}
       {/if}
     </td>
-  {:else if isValidPercentOfTotal}
-    <td style:background={thirdCellGradient}>
-      <PercentageChange value={itemData.pctOfTotal} />
+  {/if}
+
+  {#if isTimeComparisonActive}
+    <td style:background={fourthCellGradient}>
+      <PercentageChange value={formattedDeltaRel} />
       {#if showZigZag}
         <LongBarZigZag />
       {/if}
@@ -266,7 +270,7 @@
 <style lang="postcss">
   td {
     @apply text-right p-0;
-    @apply px-2  relative;
+    @apply px-2 relative;
     height: 22px;
   }
 
@@ -283,7 +287,7 @@
   }
 
   a {
-    @apply absolute right-0 z-50  h-[22px] w-[32px];
+    @apply absolute right-0 z-50 h-[22px] w-[32px];
     @apply bg-white flex items-center justify-center shadow-md rounded-sm;
   }
 
diff --git a/web-common/src/features/dashboards/leaderboard/leaderboard-widths.ts b/web-common/src/features/dashboards/leaderboard/leaderboard-widths.ts
index b534d77e134..f475a3ffd80 100644
--- a/web-common/src/features/dashboards/leaderboard/leaderboard-widths.ts
+++ b/web-common/src/features/dashboards/leaderboard/leaderboard-widths.ts
@@ -1,111 +1,33 @@
 import { clamp } from "@rilldata/web-common/lib/clamp";
-import { writable } from "svelte/store";
-import type { LeaderboardItemData } from "./leaderboard-utils";
+import { get, writable } from "svelte/store";
 
+export const DEFAULT_COL_WIDTH = 60;
 const MIN_COL_WIDTH = 56;
-const DEFAULT_COL_WIDTH = 60;
 const MAX_COL_WIDTH = 164;
+const PADDING = 16;
 
-export type ColumnWidths = {
-  dimension: number;
-  value: number;
-  percentOfTotal: number;
-  delta: number;
-  deltaPercent: number;
-};
+class ColumnStore {
+  value = writable(DEFAULT_COL_WIDTH);
 
-export const LEADERBOARD_DEFAULT_COLUMN_WIDTHS: ColumnWidths = {
-  dimension: 164,
-  value: DEFAULT_COL_WIDTH,
-  percentOfTotal: DEFAULT_COL_WIDTH,
-  delta: DEFAULT_COL_WIDTH,
-  deltaPercent: DEFAULT_COL_WIDTH,
-};
+  subscribe = this.value.subscribe;
 
-// Create a store for the maximum column widths
-export const columnWidths = writable<ColumnWidths>(
-  LEADERBOARD_DEFAULT_COLUMN_WIDTHS,
-);
-export const processedDimensions = new Set<string>();
-
-export function calculateAndUpdateAllLeaderboardWidths(
-  dimensionName: string,
-  firstColumnWidth: number,
-  aboveTheFold: LeaderboardItemData[],
-  selectedBelowTheFold: LeaderboardItemData[],
-  measureFormatter:
-    | ((_value: number | undefined) => undefined)
-    | ((value: string | number) => string),
-) {
-  if (!processedDimensions.has(dimensionName) && processedDimensions.size < 6) {
-    const widths = calculateLeaderboardColumnWidth(
-      firstColumnWidth,
-      aboveTheFold,
-      selectedBelowTheFold,
-      measureFormatter,
+  update = (newValue: number) => {
+    newValue = clamp(
+      MIN_COL_WIDTH,
+      Math.ceil(newValue) + PADDING,
+      MAX_COL_WIDTH,
     );
-    updateMaxColumnWidths(dimensionName, widths);
-  }
-}
-
-export function updateMaxColumnWidths(
-  dimensionName: string,
-  newWidths: ColumnWidths,
-) {
-  if (!processedDimensions.has(dimensionName) && processedDimensions.size < 4) {
-    columnWidths.update((currentWidths) => ({
-      dimension: Math.max(currentWidths.dimension, newWidths.dimension),
-      value: Math.max(currentWidths.value, newWidths.value),
-      percentOfTotal: Math.max(
-        currentWidths.percentOfTotal,
-        newWidths.percentOfTotal,
-      ),
-      delta: Math.max(currentWidths.delta, newWidths.delta),
-      deltaPercent: Math.max(
-        currentWidths.deltaPercent,
-        newWidths.deltaPercent,
-      ),
-    }));
-    processedDimensions.add(dimensionName);
-  }
-}
-
-function estimateColumnWidth(values: unknown[]) {
-  const samples = values.filter(
-    (v): v is string | number => typeof v === "string" || typeof v === "number",
-  );
+    const value = get(this.value);
 
-  const maxValueLength = samples.reduce((max: number, value) => {
-    const stringLength = String(value).length;
-    return Math.max(max, stringLength);
-  }, 0) as number;
-
-  const pixelLength = maxValueLength * 7;
-  return clamp(MIN_COL_WIDTH, pixelLength + 16, MAX_COL_WIDTH);
-}
-
-export function calculateLeaderboardColumnWidth(
-  firstColumnWidth: number,
-  aboveTheFold: LeaderboardItemData[],
-  selectedBelowTheFold: LeaderboardItemData[],
-  formatter: (
-    value: string | number | null | undefined,
-  ) => string | null | undefined,
-): ColumnWidths {
-  const rows = aboveTheFold.concat(selectedBelowTheFold);
-
-  const columnWidths = {
-    dimension: firstColumnWidth,
-    value: estimateColumnWidth(rows.map((i) => formatter(i.value || 0))),
-    delta: estimateColumnWidth(rows.map((i) => formatter(i.deltaAbs || 0))),
-    // These are always formatted and can be contained in min width
-    percentOfTotal: MIN_COL_WIDTH,
-    deltaPercent: MIN_COL_WIDTH,
+    if (newValue > value) {
+      this.value.set(newValue);
+    }
   };
-  return columnWidths;
-}
 
-export function resetColumnWidths() {
-  processedDimensions.clear();
-  columnWidths.set(LEADERBOARD_DEFAULT_COLUMN_WIDTHS);
+  reset() {
+    this.value.set(DEFAULT_COL_WIDTH);
+  }
 }
+
+export const valueColumn = new ColumnStore();
+export const deltaColumn = new ColumnStore();