From a8b8b290d9874a164873b019510a2718ccceeec1 Mon Sep 17 00:00:00 2001
From: Di Mu <di.mu@rilldata.com>
Date: Tue, 10 Mar 2026 16:32:37 -0700
Subject: [PATCH 1/4] feat: standardize canvas widget card padding, title, and
 borders globally

- CanvasComponent: card owns all padding (p-4), border radius rounded-[6px], border+shadow replaces outline
- ComponentHeader: title 16px semibold leading-none, no self-padding (card provides it)
- CanvasChart/LeaderboardDisplay/CanvasPivotDisplay: uniform size-full flex-col gap-y-4 layout
- CanvasPivotRenderer: remove self-padding (card provides it)
- VegaLiteRenderer: remove extra px-2 on canvas dashboards
- vega-config: set padding:0 for canvas dashboards to eliminate Vega's default internal padding

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/vega/VegaLiteRenderer.svelte   |  1 -
 web-common/src/components/vega/vega-config.ts |  3 ++
 .../features/canvas/CanvasComponent.svelte    |  1 +
 .../features/canvas/ComponentHeader.svelte    | 11 +++--
 .../components/charts/CanvasChart.svelte      | 24 ++++++-----
 .../leaderboard/LeaderboardDisplay.svelte     | 41 ++++++++-----------
 .../pivot/CanvasPivotDisplay.svelte           | 30 +++++++-------
 .../pivot/CanvasPivotRenderer.svelte          |  7 +---
 8 files changed, 56 insertions(+), 62 deletions(-)

diff --git a/web-common/src/components/vega/VegaLiteRenderer.svelte b/web-common/src/components/vega/VegaLiteRenderer.svelte
index 779e7db7c9c..e40b1f84e5a 100644
--- a/web-common/src/components/vega/VegaLiteRenderer.svelte
+++ b/web-common/src/components/vega/VegaLiteRenderer.svelte
@@ -87,7 +87,6 @@
 <div
   bind:contentRect
   role="presentation"
-  class:px-2={canvasDashboard}
   class="rill-vega-container overflow-y-auto overflow-x-hidden size-full flex flex-col items-center"
   onmouseleave={handleMouseLeave}
 >
diff --git a/web-common/src/components/vega/vega-config.ts b/web-common/src/components/vega/vega-config.ts
index e6d1a3c3b25..f23bb331442 100644
--- a/web-common/src/components/vega/vega-config.ts
+++ b/web-common/src/components/vega/vega-config.ts
@@ -75,6 +75,9 @@ export const getRillTheme: (
     autosize: {
       type: "fit-x",
     },
+    ...(isCanvasDashboard && {
+      padding: 0,
+    }),
     background: "transparent",
     arc: { fill: lineColor },
     area: {
diff --git a/web-common/src/features/canvas/CanvasComponent.svelte b/web-common/src/features/canvas/CanvasComponent.svelte
index 2f1185d11ef..ad1b9ea44cd 100644
--- a/web-common/src/features/canvas/CanvasComponent.svelte
+++ b/web-common/src/features/canvas/CanvasComponent.svelte
@@ -84,6 +84,7 @@
   <div
     role="presentation"
     class="size-full grow flex flex-col"
+    class:p-4={allowBorder}
     onmousedown={onMouseDown}
   >
     {#if component}
diff --git a/web-common/src/features/canvas/ComponentHeader.svelte b/web-common/src/features/canvas/ComponentHeader.svelte
index c3eb7478dab..02d543a5d29 100644
--- a/web-common/src/features/canvas/ComponentHeader.svelte
+++ b/web-common/src/features/canvas/ComponentHeader.svelte
@@ -39,7 +39,7 @@
 {#if title || description}
   <div
     bind:this={container}
-    class="component-header-container w-full h-fit flex flex-col bg-surface-card px-4 pt-2 pb-1 items-start {wide
+    class="component-header-container w-full h-fit flex flex-col bg-surface-card items-start {wide
       ? 'wide'
       : ''}"
   >
@@ -85,7 +85,7 @@
     {/if}
   </div>
 {:else if atleastOneFilter}
-  <div class="w-full px-2 py-1">
+  <div class="w-full">
     <LocalFiltersHeader {component} />
   </div>
 {/if}
@@ -104,10 +104,9 @@
   }
 
   .title {
-    font-size: 15px;
-    line-height: 26px;
-    @apply flex-shrink-0;
-    @apply font-medium text-fg-primary truncate;
+    font-size: 16px;
+    @apply flex-shrink-0 leading-none;
+    @apply font-semibold text-fg-primary truncate;
   }
 
   .title.faint {
diff --git a/web-common/src/features/canvas/components/charts/CanvasChart.svelte b/web-common/src/features/canvas/components/charts/CanvasChart.svelte
index 71b47806d2d..faca9e91c5f 100644
--- a/web-common/src/features/canvas/components/charts/CanvasChart.svelte
+++ b/web-common/src/features/canvas/components/charts/CanvasChart.svelte
@@ -82,7 +82,7 @@
   };
 </script>
 
-<div class="size-full flex flex-col overflow-hidden">
+<div class="size-full flex flex-col overflow-hidden gap-y-4">
   {#if schema.isValid}
     {#if isFetching}
       <div class="flex items-center justify-center h-full w-full">
@@ -99,16 +99,18 @@
         {filters}
         {component}
       />
-      <Chart
-        {chartType}
-        {chartSpec}
-        {chartData}
-        measures={$measures}
-        isCanvas
-        bind:view={viewVL}
-        themeMode={$isThemeModeDark ? "dark" : "light"}
-        theme={currentTheme}
-      />
+      <div class="grow overflow-hidden">
+        <Chart
+          {chartType}
+          {chartSpec}
+          {chartData}
+          measures={$measures}
+          isCanvas
+          bind:view={viewVL}
+          themeMode={$isThemeModeDark ? "dark" : "light"}
+          theme={currentTheme}
+        />
+      </div>
     {/if}
   {:else}
     <ComponentError error={schema.error} />
diff --git a/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte b/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte
index 6aa4b4b2d9b..6254e010192 100644
--- a/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte
+++ b/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte
@@ -154,20 +154,17 @@
   $: ({ parsed } = mvFilters);
 </script>
 
-{#if schema.isValid}
-  <ComponentHeader
-    {component}
-    {title}
-    {description}
-    showDescriptionAsTooltip={show_description_as_tooltip}
-    {filters}
-  />
-
-  <div
-    class="h-fit p-0 grow relative"
-    class:!p-0={visibleDimensions.length === 1}
-  >
-    <span class="border-overlay"></span>
+<div class="size-full flex flex-col overflow-hidden gap-y-4">
+  {#if schema.isValid}
+    <ComponentHeader
+      {component}
+      {title}
+      {description}
+      showDescriptionAsTooltip={show_description_as_tooltip}
+      {filters}
+    />
+
+    <div class="p-0 grow relative">
     <div
       class="grid-wrapper gap-px overflow-x-auto"
       style:grid-template-columns="repeat(auto-fit, minmax({estimatedTableWidth +
@@ -238,10 +235,11 @@
         {/if}
       {/each}
     </div>
-  </div>
-{:else}
-  <ComponentError error={schema.error} />
-{/if}
+    </div>
+  {:else}
+    <ComponentError error={schema.error} />
+  {/if}
+</div>
 
 <style lang="postcss">
   .grid-wrapper {
@@ -250,12 +248,7 @@
   }
 
   .leaderboard-wrapper {
-    @apply relative p-4 pr-6 grid outline outline-1 outline-gray-200;
-  }
-
-  .border-overlay {
-    @apply absolute border-[12.5px] pointer-events-none border-surface-card size-full;
-    z-index: 20;
+    @apply relative grid outline outline-1 outline-border;
   }
 
   @container component-container (inline-size < 440px) {
diff --git a/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte b/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte
index 4bc857e4472..0e327e8de92 100644
--- a/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte
+++ b/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte
@@ -64,18 +64,20 @@
   }
 </script>
 
-<ComponentHeader
-  {component}
-  {title}
-  {description}
-  showDescriptionAsTooltip={show_description_as_tooltip}
-  {filters}
-/>
+<div class="size-full flex flex-col overflow-hidden gap-y-4">
+  <ComponentHeader
+    {component}
+    {title}
+    {description}
+    showDescriptionAsTooltip={show_description_as_tooltip}
+    {filters}
+  />
 
-<CanvasPivotRenderer
-  {hasHeader}
-  {schema}
-  {pivotDataStore}
-  pivotConfig={config}
-  {pivotState}
-/>
+  <CanvasPivotRenderer
+    {hasHeader}
+    {schema}
+    {pivotDataStore}
+    pivotConfig={config}
+    {pivotState}
+  />
+</div>
diff --git a/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte b/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
index 1e183177beb..0fc1264f591 100644
--- a/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
+++ b/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
@@ -27,12 +27,7 @@
     pivotColumns.dimension.length > 0 && pivotColumns.measure.length === 0;
 </script>
 
-<div
-  class="size-full overflow-hidden"
-  style:max-height="inherit"
-  class:p-4={hasHeader}
-  class:pt-1={hasHeader}
->
+<div class="size-full overflow-hidden" style:max-height="inherit">
   {#if !schema.isValid}
     <ComponentError error={schema.error} />
   {:else if pivotDataStore && $pivotDataStore && pivotConfig && $pivotConfig}

From d641e900594395792f912b9191ae316e5fd67224 Mon Sep 17 00:00:00 2001
From: Di Mu <di.mu@rilldata.com>
Date: Fri, 27 Mar 2026 14:08:26 -0700
Subject: [PATCH 2/4] fix: refine widget padding consistency across canvas
 components

- ComponentHeader: add pt-2 pb-1, gap-y-1 between title/description, fix leading-tight on title
- KPIGrid: wrap in gap-y-4 container, reduce cell padding to p-3, remove border-overlay
- LeaderboardDisplay: remove border-overlay
- Markdown: change px-2 to p-4 to match other widgets

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../features/canvas/ComponentHeader.svelte    |  4 +-
 .../canvas/components/kpi-grid/KPIGrid.svelte | 70 +++++++++----------
 .../components/markdown/Markdown.svelte       |  2 +-
 3 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/web-common/src/features/canvas/ComponentHeader.svelte b/web-common/src/features/canvas/ComponentHeader.svelte
index 02d543a5d29..af9eed5a393 100644
--- a/web-common/src/features/canvas/ComponentHeader.svelte
+++ b/web-common/src/features/canvas/ComponentHeader.svelte
@@ -39,7 +39,7 @@
 {#if title || description}
   <div
     bind:this={container}
-    class="component-header-container w-full h-fit flex flex-col bg-surface-card items-start {wide
+    class="component-header-container w-full h-fit flex flex-col gap-y-1 bg-surface-card pt-2 pb-1 items-start {wide
       ? 'wide'
       : ''}"
   >
@@ -105,7 +105,7 @@
 
   .title {
     font-size: 16px;
-    @apply flex-shrink-0 leading-none;
+    @apply flex-shrink-0 leading-tight;
     @apply font-semibold text-fg-primary truncate;
   }
 
diff --git a/web-common/src/features/canvas/components/kpi-grid/KPIGrid.svelte b/web-common/src/features/canvas/components/kpi-grid/KPIGrid.svelte
index c2eee69328d..7b5f4bbc673 100644
--- a/web-common/src/features/canvas/components/kpi-grid/KPIGrid.svelte
+++ b/web-common/src/features/canvas/components/kpi-grid/KPIGrid.svelte
@@ -46,40 +46,41 @@
   $: ({ title, description, show_description_as_tooltip } = kpiGridProperties);
 </script>
 
-<ComponentHeader
-  {component}
-  {title}
-  {description}
-  showDescriptionAsTooltip={show_description_as_tooltip}
-  {filters}
-/>
-
-{#if schema.isValid}
-  <div
-    class="h-fit p-0 grow relative"
-    class:!p-0={kpis.length === 1}
-    bind:clientWidth={containerWidth}
-  >
-    <span class="border-overlay"></span>
+<div class="size-full flex flex-col overflow-hidden gap-y-4">
+  <ComponentHeader
+    {component}
+    {title}
+    {description}
+    showDescriptionAsTooltip={show_description_as_tooltip}
+    {filters}
+  />
+
+  {#if schema.isValid}
     <div
-      style:grid-template-columns="repeat({optimalColumns}, minmax(0, 1fr))"
-      class="grid-wrapper gap-px overflow-hidden size-full"
+      class="h-fit p-0 grow relative"
+      class:!p-0={kpis.length === 1}
+      bind:clientWidth={containerWidth}
     >
-      {#each kpis as kpi, i (i)}
-        <div class="min-h-32 kpi-wrapper">
-          <KPIProvider
-            spec={kpi}
-            {timeAndFilterStore}
-            {canvasName}
-            visible={$visible}
-          />
-        </div>
-      {/each}
+      <div
+        style:grid-template-columns="repeat({optimalColumns}, minmax(0, 1fr))"
+        class="grid-wrapper gap-px overflow-hidden size-full"
+      >
+        {#each kpis as kpi, i (i)}
+          <div class="min-h-32 kpi-wrapper">
+            <KPIProvider
+              spec={kpi}
+              {timeAndFilterStore}
+              {canvasName}
+              visible={$visible}
+            />
+          </div>
+        {/each}
+      </div>
     </div>
-  </div>
-{:else}
-  <ComponentError error={schema.error} />
-{/if}
+  {:else}
+    <ComponentError error={schema.error} />
+  {/if}
+</div>
 
 <style lang="postcss">
   .grid-wrapper {
@@ -88,12 +89,7 @@
   }
 
   .kpi-wrapper {
-    @apply relative p-4 grid outline outline-1 outline-border;
-  }
-
-  .border-overlay {
-    @apply absolute border-[12.5px] pointer-events-none border-surface-card size-full;
-    z-index: 50;
+    @apply relative p-3 grid outline outline-1 outline-border;
   }
 
   @container component-container (inline-size < 440px) {
diff --git a/web-common/src/features/canvas/components/markdown/Markdown.svelte b/web-common/src/features/canvas/components/markdown/Markdown.svelte
index 14f3d0be3a6..fcefbe8f4ec 100644
--- a/web-common/src/features/canvas/components/markdown/Markdown.svelte
+++ b/web-common/src/features/canvas/components/markdown/Markdown.svelte
@@ -94,7 +94,7 @@
 </script>
 
 <div
-  class="size-full px-2 overflow-y-auto select-text cursor-text bg-surface-card"
+  class="size-full p-4 overflow-y-auto select-text cursor-text bg-surface-card"
 >
   <div class="canvas-markdown {positionClasses} h-full flex flex-col min-h-min">
     {#if needsTemplating && $resolveQuery?.isError}

From e6632966c69b46cdec2179538444dce6148e254f Mon Sep 17 00:00:00 2001
From: Di Mu <di.mu@rilldata.com>
Date: Fri, 27 Mar 2026 15:58:08 -0700
Subject: [PATCH 3/4] fix: resolve lint and prettier errors

- Add isCanvasDashboard parameter to getRillTheme in vega-config.ts
- Remove unused canvasDashboard export from VegaLiteRenderer.svelte
- Fix prettier formatting in LeaderboardDisplay.svelte

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/vega/VegaLiteRenderer.svelte   |   1 -
 web-common/src/components/vega/vega-config.ts |   3 +-
 .../leaderboard/LeaderboardDisplay.svelte     | 134 +++++++++---------
 3 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/web-common/src/components/vega/VegaLiteRenderer.svelte b/web-common/src/components/vega/VegaLiteRenderer.svelte
index e40b1f84e5a..b08829468af 100644
--- a/web-common/src/components/vega/VegaLiteRenderer.svelte
+++ b/web-common/src/components/vega/VegaLiteRenderer.svelte
@@ -22,7 +22,6 @@
   export let signalListeners: SignalListeners = {};
   export let expressionFunctions: ExpressionFunction = {};
   export let error: string | null = null;
-  export let canvasDashboard = false;
   export let renderer: "canvas" | "svg" = "canvas";
   export let themeMode: "light" | "dark" = "light";
   export let config: Config | undefined = undefined;
diff --git a/web-common/src/components/vega/vega-config.ts b/web-common/src/components/vega/vega-config.ts
index f23bb331442..e1c04789439 100644
--- a/web-common/src/components/vega/vega-config.ts
+++ b/web-common/src/components/vega/vega-config.ts
@@ -28,7 +28,8 @@ const colors = {
 export const getRillTheme: (
   isDarkMode?: boolean,
   theme?: Record<string, string>,
-) => Config = (isDarkMode = false, theme) => {
+  isCanvasDashboard?: boolean,
+) => Config = (isDarkMode = false, theme, isCanvasDashboard = false) => {
   const gridColor = isDarkMode ? colors.dark.grid : colors.light.grid;
   const axisLabelColor = isDarkMode
     ? colors.dark.axisLabel
diff --git a/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte b/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte
index 6254e010192..88aa9be64dd 100644
--- a/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte
+++ b/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte
@@ -165,76 +165,76 @@
     />
 
     <div class="p-0 grow relative">
-    <div
-      class="grid-wrapper gap-px overflow-x-auto"
-      style:grid-template-columns="repeat(auto-fit, minmax({estimatedTableWidth +
-        LEADERBOARD_WRAPPER_PADDING}px, 1fr))"
-    >
-      {#each visibleDimensions as dimension (dimension.name)}
-        {#if dimension.name}
-          <div
-            class="leaderboard-wrapper"
-            bind:clientWidth={leaderboardWrapperWidth}
-          >
-            <Leaderboard
-              leaderboardShowContextForAllMeasures
-              timeControlsReady
-              slice={numRows}
-              visible={$visible}
-              {isValidPercentOfTotal}
-              {metricsViewName}
-              leaderboardSortByMeasureName={leaderboardSortByMeasureName ??
-                leaderboardMeasureNames?.[0]}
-              leaderboardMeasures={visibleMeasures}
-              {whereFilter}
-              {dimensionThresholdFilters}
-              tableWidth={dimensionColumnWidth + totalContextWidth}
-              {dimensionColumnWidth}
-              sortedAscending={sortDirection === SortDirection.ASCENDING}
-              {sortType}
-              filterExcludeMode={$parsed?.dimensionFilters.get(dimension.name)
-                ?.isInclude === false}
-              {timeRange}
-              comparisonTimeRange={showTimeComparison
-                ? comparisonTimeRange
-                : undefined}
-              {dimension}
-              allowExpandTable={false}
-              allowDimensionComparison={false}
-              selectedValues={selectedDimensionValues(
-                runtimeClient,
-                [metricsViewName],
-                whereFilter,
-                dimension.name,
-                timeRange.start,
-                timeRange.end,
-              )}
-              isBeingCompared={false}
-              formatters={measureFormatters}
-              tooltipFormatters={measureTooltipFormatters}
-              {toggleSort}
-              toggleDimensionValueSelection={async (
-                name,
-                value,
-                keepPillVisible,
-                isExclusiveFilter,
-              ) => {
-                await toggleDimensionValueSelections(
-                  name,
-                  [value],
+      <div
+        class="grid-wrapper gap-px overflow-x-auto"
+        style:grid-template-columns="repeat(auto-fit, minmax({estimatedTableWidth +
+          LEADERBOARD_WRAPPER_PADDING}px, 1fr))"
+      >
+        {#each visibleDimensions as dimension (dimension.name)}
+          {#if dimension.name}
+            <div
+              class="leaderboard-wrapper"
+              bind:clientWidth={leaderboardWrapperWidth}
+            >
+              <Leaderboard
+                leaderboardShowContextForAllMeasures
+                timeControlsReady
+                slice={numRows}
+                visible={$visible}
+                {isValidPercentOfTotal}
+                {metricsViewName}
+                leaderboardSortByMeasureName={leaderboardSortByMeasureName ??
+                  leaderboardMeasureNames?.[0]}
+                leaderboardMeasures={visibleMeasures}
+                {whereFilter}
+                {dimensionThresholdFilters}
+                tableWidth={dimensionColumnWidth + totalContextWidth}
+                {dimensionColumnWidth}
+                sortedAscending={sortDirection === SortDirection.ASCENDING}
+                {sortType}
+                filterExcludeMode={$parsed?.dimensionFilters.get(dimension.name)
+                  ?.isInclude === false}
+                {timeRange}
+                comparisonTimeRange={showTimeComparison
+                  ? comparisonTimeRange
+                  : undefined}
+                {dimension}
+                allowExpandTable={false}
+                allowDimensionComparison={false}
+                selectedValues={selectedDimensionValues(
+                  runtimeClient,
                   [metricsViewName],
+                  whereFilter,
+                  dimension.name,
+                  timeRange.start,
+                  timeRange.end,
+                )}
+                isBeingCompared={false}
+                formatters={measureFormatters}
+                tooltipFormatters={measureTooltipFormatters}
+                {toggleSort}
+                toggleDimensionValueSelection={async (
+                  name,
+                  value,
                   keepPillVisible,
                   isExclusiveFilter,
-                );
-              }}
-              measureLabel={(measureName) =>
-                visibleMeasures.find((m) => m.name === measureName)
-                  ?.displayName || measureName}
-            />
-          </div>
-        {/if}
-      {/each}
-    </div>
+                ) => {
+                  await toggleDimensionValueSelections(
+                    name,
+                    [value],
+                    [metricsViewName],
+                    keepPillVisible,
+                    isExclusiveFilter,
+                  );
+                }}
+                measureLabel={(measureName) =>
+                  visibleMeasures.find((m) => m.name === measureName)
+                    ?.displayName || measureName}
+              />
+            </div>
+          {/if}
+        {/each}
+      </div>
     </div>
   {:else}
     <ComponentError error={schema.error} />

From 6910fa036455a7153a4e6a5a71c65b2d06c3725c Mon Sep 17 00:00:00 2001
From: Di Mu <di.mu@rilldata.com>
Date: Fri, 27 Mar 2026 16:18:09 -0700
Subject: [PATCH 4/4] fix: pass isCanvasDashboard through getRillTheme instead
 of removed prop

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web-common/src/features/components/charts/Chart.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web-common/src/features/components/charts/Chart.svelte b/web-common/src/features/components/charts/Chart.svelte
index faff8305ab9..a354435d579 100644
--- a/web-common/src/features/components/charts/Chart.svelte
+++ b/web-common/src/features/components/charts/Chart.svelte
@@ -218,7 +218,6 @@
 {:else}
   <VegaLiteRenderer
     bind:viewVL={view}
-    canvasDashboard={isCanvas}
     data={{ "metrics-view": data }}
     {themeMode}
     {spec}
@@ -227,6 +226,6 @@
     renderer="canvas"
     {expressionFunctions}
     {hasComparison}
-    config={getRillTheme(isThemeModeDark, theme)}
+    config={getRillTheme(isThemeModeDark, theme, isCanvas)}
   />
 {/if}