Fix x-table-cell border-bottom alignment across columns#3
Merged
Conversation
When x-table-row's subgrid stretches the x-table-cell host to the row's height (via default align-items:stretch), the inner [part=cell] wrapper stayed at its content height instead of filling the host. Since border-bottom lives on [part=cell], it ended up at different y-positions between columns with different intrinsic content heights (e.g. a header cell with a sort button vs a plain label cell), and the horizontal row dividers did not connect across the table. Add "height:100%" on [part=cell] so it fills whatever definite height the host is given by its grid/flex parent. In the grid case, Grid treats align-items:stretch as a definite track-based size, so the percentage resolves correctly. In the standalone case (no grid/flex parent), percentage height resolves to auto — identical to today's behaviour, no regression. Add a regression test that mounts the cell inside a fixed-height container, forces the host to height:100%, and asserts [part=cell] offsetHeight equals the container height. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
7 tasks
avanelsas
added a commit
that referenced
this pull request
Apr 13, 2026
Patch release. The only shipped library code change since v2.1.0 is the x-table-cell border-bottom alignment fix from PR #3 — every other commit on main since v2.1.0 lives under demo/** or public/index.html (dev-only scaffolding) and has no impact on the published npm / Clojars artefacts. Version bumps in lockstep: - package.json - build.clj - deps.edn (artifact path) - README.md (deps.edn / Leiningen / npm install snippets) CHANGELOG entry summarises the x-table-cell fix and lists the demo dogfooding work under a "Demos" section so consumers reading the changelog can see what made up the 39 commits without overstating them as user-facing features. Co-Authored-By: Claude Opus 4.6 (1M context) <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.
Summary
Cell
border-bottomlines did not connect across columns inx-table/x-table-rowwhen the row mixed cells with different intrinsic heights (e.g. a header cell containing a sort button vs a plain label cell).Root cause:
x-table-cell's inner[part=cell]wrapper — which carries theborder-bottomdeclaration — useddisplay: flexwith noheight: 100%. When x-table-row's subgrid stretched the host to the row's height via defaultalign-items: stretch,[part=cell]stayed at its content height instead of filling the host. Different cells → different border-bottom y-positions → disconnected row dividers.Fix: one line — add
height: 100%to[part=cell].Why
height: 100%is safe herealign-items: stretchas a definite track-based size, so the percentage resolves correctly and the wrapper fills the row height. Border-bottoms line up.height: 100%on a child computes toauto— identical to today's behaviour, no regression.min-height: 100%would work too but is less clear about intent; changing the host'sdisplaytoflexwould be more invasive.Regression test
Added
part-cell-fills-host-height-testintest/baredom/components/x_table_cell/x_table_cell_test.cljs. Mounts the cell inside a fixed-80px container, forces the host toheight: 100%, and asserts the shadow[part=cell]offsetHeightequals 80. Catches the regression if anyone removes the new rule.Test suite: 3633 tests, all passing.
Test plan
npm test— 3633 tests pass including the new regression testnpx shadow-cljs watch appand opendemo/x-table.html— Basic / Sortable / Selectable tables all show continuous horizontal borders between columns, regardless of whether the header row has sort buttonsdemo/x-table-row.htmlanddemo/x-table-cell.html?theme=ocean/?theme=forest/?theme=aurorato the URL and confirm borders still connect across presets🤖 Generated with Claude Code