Replace tutorial card grid with compact table view - #1886
Open
jborlase-snowplow wants to merge 5 commits into
Open
Replace tutorial card grid with compact table view#1886jborlase-snowplow wants to merge 5 commits into
jborlase-snowplow wants to merge 5 commits into
Conversation
Tutorials now render as a compact table with columns for use case, topic, technology, and progress. Rows collapse into labeled stacked entries on narrow viewports. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
documentation | c7e00e0 | Commit Preview URL Branch Preview URL |
Jul 29 2026, 03:54 PM |
Address PM feedback that the compact table felt cramped: bump titles and cell text up a size, add row padding, and widen column gaps. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The main content area centered the table in the remaining width, which opened a large gutter between the filters and the table on wide screens. Left-align it instead. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Give the tutorial title and description more room by removing the topic column, and use the two-line row height to place the step count above the progress bar. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The sidebar already pads its right edge, so the main content only needs right padding; keeping px-6 made the gutter twice the normal size. Co-Authored-By: Claude Fable 5 <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
2 participants
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
Replaces the tutorial card grid on
/tutorialswith a compact, table-style list so more tutorials are visible at once and their categories are easier to scan and compare.TutorialTablecomponent with columns: tutorial (title + one-line description), use case, topic, technology, and progresslgbreakpoint, rows collapse into stacked entries with inline field labelsTutorialGridandTutorialCardWithHoverare now unused but left in place for easy comparison/revert; happy to remove them in this PR if preferred.Screenshots
Desktop: compact rows with category columns, ~13 tutorials visible per screen (previously ~5 cards). Verified in light and dark mode and at mobile width.
Test plan
yarn start, open/tutorials🤖 Generated with Claude Code