APP-836 fix: canvas pivot table should fill full widget width#9157
Draft
APP-836 fix: canvas pivot table should fill full widget width#9157
Conversation
Di7design
changed the title
The `PivotTable` `.table-wrapper` used `w-fit`, sizing the table to its content width. When a canvas pivot widget has a title/description, the renderer adds a visible border, exposing the gap between content width and container width as a separate resizable-looking box. Add a `fullWidth` prop to `PivotTable` that switches from `w-fit` to `w-full`. Pass it from the canvas renderer so the table always fills its container. Explore dashboard pivot tables are unaffected. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…order When columns are narrower than the container, the table used a fixed pixel width that didn't fill the available space. Now uses width:100% with min-width when fullWidth is set, so the table stretches to fill the container while preserving column resize behavior. Also removes the right border from the last column in both FlatTable and NestedTable; the border was applied to the header-cell button inside th, so the existing th:last-of-type CSS rule had no effect. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Making the <table> element width:100% caused the last column to stretch and created a visible resize bar artifact. The correct approach: only the .table-wrapper div (which has the border) needs w-full to fill the container. The <table> inside keeps its natural pixel-based width. Also removes unused fullWidth prop from FlatTable and NestedTable since it's no longer passed down from PivotTable. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
FlatTable's `columnLengths` and NestedTable's `measureLengths` were declared in `context="module"`, making them singletons shared across all instances. In canvas dashboards where multiple tables are visible simultaneously, resizing a column in one table would resize the matching column in all other tables. Move the stores from module scope to instance scope so each table manages its own column widths independently. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Set table width to 100% with min-width as the column sum when fullWidth is set. Remove max-width from <col> elements so columns can grow proportionally to fill the extra space, instead of all extra space being dumped on the last column. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Di7design
force-pushed
the
di-rill/fix-canvas-pivot-table-full-width
branch
from
b8e08d1 to
a5ce8e6
Compare
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The resizer overlay was using fixed pixel width while the table stretched to 100%, causing column resize handles to be misaligned with actual column positions. Now the resizer overlay and its children use flex to distribute extra space proportionally, matching the table's column distribution. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PivotTable's.table-wrapperusedw-fit, sizing the table to content width rather than filling the containerfullWidthprop toPivotTable(defaultfalse) that switches fromw-fittow-full; passed fromCanvasPivotRendererso canvas pivot tables always fill their widget cardChecklist:
Developed in collaboration with Claude Code