From dee679d097c78749da745050cccf5ffee1593fe0 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/3] 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    |  6 ++--
 .../features/canvas/ComponentHeader.svelte    | 11 +++----
 .../components/charts/CanvasChart.svelte      | 22 +++++++------
 .../leaderboard/LeaderboardDisplay.svelte     | 33 +++++++++----------
 .../pivot/CanvasPivotDisplay.svelte           | 30 +++++++++--------
 .../pivot/CanvasPivotRenderer.svelte          |  7 +---
 8 files changed, 56 insertions(+), 57 deletions(-)

diff --git a/web-common/src/components/vega/VegaLiteRenderer.svelte b/web-common/src/components/vega/VegaLiteRenderer.svelte
index f15d68a9039..1249bd92ba8 100644
--- a/web-common/src/components/vega/VegaLiteRenderer.svelte
+++ b/web-common/src/components/vega/VegaLiteRenderer.svelte
@@ -88,7 +88,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"
   on:mouseleave={handleMouseLeave}
 >
diff --git a/web-common/src/components/vega/vega-config.ts b/web-common/src/components/vega/vega-config.ts
index 5a2bb743e4c..b6c46983036 100644
--- a/web-common/src/components/vega/vega-config.ts
+++ b/web-common/src/components/vega/vega-config.ts
@@ -76,6 +76,9 @@ export const getRillTheme: (
     autosize: {
       type: "fit-x",
     },
+    ...(isCanvasDashboard && {
+      padding: 0,
+    }),
     background: "transparent",
     mark: {
       tooltip: isCanvasDashboard,
diff --git a/web-common/src/features/canvas/CanvasComponent.svelte b/web-common/src/features/canvas/CanvasComponent.svelte
index ae9624649b6..0237379d418 100644
--- a/web-common/src/features/canvas/CanvasComponent.svelte
+++ b/web-common/src/features/canvas/CanvasComponent.svelte
@@ -68,9 +68,8 @@
   class:editable
   class:opacity-20={ghost}
   style:pointer-events={!allowPointerEvents ? "none" : "auto"}
-  class:outline={allowBorder || open}
-  class:shadow-sm={allowBorder || open}
-  class="group component-card size-full flex flex-col cursor-pointer z-10 p-0 relative outline-[1px] outline-border bg-surface-card overflow-hidden rounded-sm"
+  class:shadow={allowBorder || open}
+  class="group component-card size-full flex flex-col cursor-pointer z-10 p-0 relative bg-surface-card overflow-hidden rounded-[6px] border border-border"
 >
   <Toolbar
     {component}
@@ -84,6 +83,7 @@
   <div
     role="presentation"
     class="size-full grow flex flex-col"
+    class:p-4={allowBorder}
     on:mousedown={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 bc249413f93..531a7dbc853 100644
--- a/web-common/src/features/canvas/components/charts/CanvasChart.svelte
+++ b/web-common/src/features/canvas/components/charts/CanvasChart.svelte
@@ -80,7 +80,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">
@@ -97,15 +97,17 @@
         {filters}
         {component}
       />
-      <Chart
-        {chartType}
-        {chartSpec}
-        {chartData}
-        measures={$measures}
-        isCanvas
-        themeMode={$isThemeModeDark ? "dark" : "light"}
-        theme={currentTheme}
-      />
+      <div class="grow overflow-hidden">
+        <Chart
+          {chartType}
+          {chartSpec}
+          {chartData}
+          measures={$measures}
+          isCanvas
+          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 ab1e63242c6..8144977ccbc 100644
--- a/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte
+++ b/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte
@@ -147,19 +147,17 @@
   $: ({ parsed } = mvFilters);
 </script>
 
-{#if schema.isValid}
-  <ComponentHeader
-    {component}
-    {title}
-    {description}
-    showDescriptionAsTooltip={show_description_as_tooltip}
-    {filters}
-  />
+<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="h-fit p-0 grow relative"
-    class:!p-0={visibleDimensions.length === 1}
-  >
+    <div class="p-0 grow relative">
     <span class="border-overlay" />
     <div
       class="grid-wrapper gap-px overflow-x-auto"
@@ -230,10 +228,11 @@
         {/if}
       {/each}
     </div>
-  </div>
-{:else}
-  <ComponentError error={schema.error} />
-{/if}
+    </div>
+  {:else}
+    <ComponentError error={schema.error} />
+  {/if}
+</div>
 
 <style lang="postcss">
   .grid-wrapper {
@@ -242,7 +241,7 @@
   }
 
   .leaderboard-wrapper {
-    @apply relative p-4 pr-6 grid outline outline-1 outline-gray-200;
+    @apply relative grid outline outline-1 outline-border;
   }
 
   .border-overlay {
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 23e9bfe0eadee244b48f09814105a9b884ac0270 Mon Sep 17 00:00:00 2001
From: Di Mu <di.mu@rilldata.com>
Date: Wed, 11 Mar 2026 13:16:33 -0700
Subject: [PATCH 2/3] fix: prettier formatting in LeaderboardDisplay.svelte

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../leaderboard/LeaderboardDisplay.svelte     | 134 +++++++++---------
 1 file changed, 67 insertions(+), 67 deletions(-)

diff --git a/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte b/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte
index 8144977ccbc..9770596433c 100644
--- a/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte
+++ b/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte
@@ -158,76 +158,76 @@
     />
 
     <div class="p-0 grow relative">
-    <span class="border-overlay" />
-    <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}
-              {toggleSort}
-              toggleDimensionValueSelection={async (
-                name,
-                value,
-                keepPillVisible,
-                isExclusiveFilter,
-              ) => {
-                await toggleDimensionValueSelections(
-                  name,
-                  [value],
+      <span class="border-overlay" />
+      <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}
+                {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 983cd2eabcd22124701b54802a06f3e7dae6f086 Mon Sep 17 00:00:00 2001
From: Di Mu <di.mu@rilldata.com>
Date: Wed, 11 Mar 2026 14:22:33 -0700
Subject: [PATCH 3/3] fix: use `rounded-sm` instead of `rounded-[6px]` in
 CanvasComponent

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web-common/src/features/canvas/CanvasComponent.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-common/src/features/canvas/CanvasComponent.svelte b/web-common/src/features/canvas/CanvasComponent.svelte
index 0237379d418..03a384b46b9 100644
--- a/web-common/src/features/canvas/CanvasComponent.svelte
+++ b/web-common/src/features/canvas/CanvasComponent.svelte
@@ -69,7 +69,7 @@
   class:opacity-20={ghost}
   style:pointer-events={!allowPointerEvents ? "none" : "auto"}
   class:shadow={allowBorder || open}
-  class="group component-card size-full flex flex-col cursor-pointer z-10 p-0 relative bg-surface-card overflow-hidden rounded-[6px] border border-border"
+  class="group component-card size-full flex flex-col cursor-pointer z-10 p-0 relative bg-surface-card overflow-hidden rounded-sm border border-border"
 >
   <Toolbar
     {component}