Repository navigation
docs: equal-height cards — Grid/Cell in the layout skill, Columns flex recipe - #304
Conversation
…x recipe Fixes both gaps from #196: - The bestax-layout-scaffold skill never mentioned Grid/Cell and steered agents to Columns for all grids. layout-components.md gains a Grid/Cell section (props tables, auto-fill vs isFixed, card-grid snippet) that positions CSS Grid as preferred for uniform grids (equal heights free); SKILL.md's approach/checklist and the no-Tile note now steer Grid for uniform grids vs Columns for proportional layouts. - The equal-height recipe for Columns (Column display="flex" flexDirection="column" + Card flexGrow="1"; height:100% resolves against auto height and does nothing) is documented in the skill reference, the card-grid archetype, and the docs columns guide (live example); the grid guide notes the free equal heights. The skill's card-grid example now actually renders equal-height cards. Helper prop names verified against useFlexboxClasses (flexGrow is an ungated item property; display gates only container helpers). Closes #196 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Pohc8xLkdx4gwXkW3xd7up
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (3)
WalkthroughDocumentation and layout scaffold guidance distinguish uniform ChangesEqual-height layout guidance
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related issues
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
Preview DeploymentPreview URL: https://8bfba306.bestax.pages.dev |
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Deep review — 0 finding(s)
| Item | Severity | Area | Finding | Location |
|---|---|---|---|---|
| — | — | — | No blocking defects found. | — |
Overall: This is a docs- and skills-only change that teaches the equal-height-cards flex recipe (Column display="flex" flexDirection="column" + Card flexGrow="1") and points readers to Grid/Cell for uniform grids. Every API claim checks out against the source: the flex helper props are real and land on both the Column and Card root elements, all the referenced Grid/Cell props (isFixed, fixedCols*, gap, minCol, span/placement) exist, the new tsx live example resolves because the docs CodeBlock scope spreads ...BestaxBulma, and the cross-doc anchor pointing at ./columns.md Column heading is valid. No component code changed, so the skill catalog stays fresh and the skills/docs stay in sync. The riskiest part is only the conceptual simplification that a height: 100% on the card does nothing (browser behavior against flex-stretched parents is nuanced), but the recommended flex-grow approach is correct and is what the guidance steers to — nothing for a human to gate on.
🏄 Pure knowledge-drop, no gnarly code in the water — the flex recipe and the Grid shortcut both hold up when you paddle out and check the props. Ship it, brah.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
docs/docs/guides/library/columns.md (1)
149-151: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low valueSoften the
height: 100%wording.flexGrow="1"is the more robust pattern here, butheight: 100%isn’t always a no-op; percentage heights can resolve when the flex item has a definite size.docs/docs/guides/library/columns.md:149-151🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/docs/guides/library/columns.md` around lines 149 - 151, Revise the explanation around the Column/Card sizing guidance to avoid claiming that height: 100% always does nothing. State that flexGrow="1" is the more robust pattern, while percentage heights may resolve when the flex item has a definite size.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@docs/docs/guides/library/columns.md`:
- Around line 149-151: Revise the explanation around the Column/Card sizing
guidance to avoid claiming that height: 100% always does nothing. State that
flexGrow="1" is the more robust pattern, while percentage heights may resolve
when the flex item has a definite size.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 11b004b0-8a69-4257-abc6-e44a991f3769
📒 Files selected for processing (6)
docs/docs/guides/library/columns.mddocs/docs/guides/library/grid.mdskills/bestax-layout-scaffold/SKILL.mdskills/bestax-layout-scaffold/examples/card-grid.tsxskills/bestax-layout-scaffold/references/archetypes.mdskills/bestax-layout-scaffold/references/layout-components.md
Percentage heights can resolve when the flex item has a definite size; the guidance now says it doesn't help here (auto-height column) and positions flexGrow as the robust pattern. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Pohc8xLkdx4gwXkW3xd7up
|
CodeRabbit's nitpick applied in 650262f: the " Generated by Claude Code |
Preview DeploymentPreview URL: https://a5e2afa4.bestax.pages.dev |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
skills/bestax-layout-scaffold/SKILL.md (2)
81-82: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winKeep the checklist aligned with the Approach rule.
The Approach section also recommends
Columns/Columnfor per-breakpoint layouts, but the checklist only mentions proportional layouts. Include “or per-breakpoint layouts” so those requests are not incorrectly routed toGrid/Cell.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@skills/bestax-layout-scaffold/SKILL.md` around lines 81 - 82, Update the checklist item describing when to use Columns/Column to include per-breakpoint layouts alongside proportional side-by-side layouts, keeping it aligned with the Approach rule and ensuring such requests are not directed to Grid/Cell.
39-44: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winClarify that Grid equal-height applies per row, not across the whole gallery. CSS Grid makes items in the same row match height, but different rows can still vary. If the intent is fully uniform card heights across multiple rows, call that out explicitly or point to the flex recipe instead.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@skills/bestax-layout-scaffold/SKILL.md` around lines 39 - 44, Update the Grid/Cell guidance to clarify that equal-height sizing applies only among items in the same row; different rows may have different heights. Explicitly direct readers needing uniform card heights across all gallery rows to use the existing Columns/Column flex recipe instead.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@skills/bestax-layout-scaffold/SKILL.md`:
- Around line 81-82: Update the checklist item describing when to use
Columns/Column to include per-breakpoint layouts alongside proportional
side-by-side layouts, keeping it aligned with the Approach rule and ensuring
such requests are not directed to Grid/Cell.
- Around line 39-44: Update the Grid/Cell guidance to clarify that equal-height
sizing applies only among items in the same row; different rows may have
different heights. Explicitly direct readers needing uniform card heights across
all gallery rows to use the existing Columns/Column flex recipe instead.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 74220b2e-f7d0-4226-b78b-f97855acc8f9
📒 Files selected for processing (4)
docs/docs/guides/library/columns.mdskills/bestax-layout-scaffold/SKILL.mdskills/bestax-layout-scaffold/references/archetypes.mdskills/bestax-layout-scaffold/references/layout-components.md
🚧 Files skipped from review as they are similar to previous changes (3)
- docs/docs/guides/library/columns.md
- skills/bestax-layout-scaffold/references/archetypes.md
- skills/bestax-layout-scaffold/references/layout-components.md
CodeRabbit's two follow-ups: (1) checklist now says proportional OR per-breakpoint, matching the approach rule; (2) the equal-heights-free claim is scoped per row — each row's cells match its tallest. The suggested redirect to the flex recipe for cross-row uniformity was declined: flex lines stretch independently too, so both approaches are row-level; the docs now say so explicitly. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Pohc8xLkdx4gwXkW3xd7up
|
Both follow-up findings handled in 2fe014c:
Generated by Claude Code |
Preview DeploymentPreview URL: https://980a73d7.bestax.pages.dev |
|
🎉 This PR is included in version 5.6.2 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 3.3.2 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 1.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 1.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
2 participants
Pull Request
Description
Fixes both documentation gaps from #196 ("a row of equal-height cards" — one of the most common layout needs):
@allxsmith/bestax-bulma)create-bestax) — ships the updated layout skill@allxsmith/bestax-docs) — columns + grid library guidesskills/bestax-layout-scaffold1.
Grid/Cellnow exist in the layout skill — and are the preferred tool for uniform grids.layout-components.mdgains a fullGrid / Cellsection (props tables forgap/minCol/isFixed/fixedCols*andcolStart/colSpan/rowSpan— source-verified post-#300 — plus auto-fill vs fixed-count explanation and a responsive card-grid snippet). The skill's steering flips from "build grids withColumns/Column" to: uniform grids →Grid/Cell(equal heights free); proportional/per-breakpoint layouts →Columns/Column— in the SKILL.md approach bullet, the checklist item, and the no-Tilenote at the top of the reference. The import block gainsGrid, Cell.2. The equal-height recipe for
Columnsis documented everywhere it's needed.The exact footgun from the issue (
height: 100%on the card resolves against auto height → ragged bottoms) and its fix —<Column display="flex" flexDirection="column">+<Card flexGrow="1">— now appear in: the skill reference, the card-grid archetype skeleton, the docs columns guide (new "Equal-Height Cards" live example), and a pointer in the grid guide. Helper-prop facts verified againstuseFlexboxClasses:flexGrowis an ungated item property (string"1"),display="flex"gates only the container helpers.3.
examples/card-grid.tsxnow models the correct result — the skill's canonical card-grid example renders actually-equal-height cards via the flex recipe, with a comment explaining why and pointing at Grid/Cell for the free alternative.Related Issue(s)
Closes #196
Type of Change
Checklist
CLAUDE.mdfiles are updated (none affected)🤖 Generated with Claude Code
https://claude.ai/code/session_01Pohc8xLkdx4gwXkW3xd7up
Generated by Claude Code
Summary by CodeRabbit
Columnguide, including a live example using flexbox (Columnas a vertical flex container,Cardgrowing to match row height).Gridguidance with clearer “when to use” instructions for uniform equal-height card grids, including auto-fit vs fixed column counts.Grid/CellvsColumns/Columnselection rules.