Feat/93 layout tutorials #104
Open
Conversation
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
tyrelchambers
force-pushed
the
feat/93-layout-tutorials
branch
from
d250110 to
8d3a66e
Compare
Zelig880
reviewed
Oct 20, 2025
src/components/TabGrid/GridCard.tsx
Outdated
Comment on lines
20
to
25
| const borderStyle: React.CSSProperties = { | ||
| borderTop: isFirstRow ? "1px solid var(--border)" : undefined, | ||
| borderLeft: isFirstColumn ? "1px solid var(--border)" : undefined, | ||
| borderRight: "1px solid var(--border)", | ||
| borderBottom: "1px solid var(--border)", | ||
| } |
There was a problem hiding this comment.
This needs to be improved. You have a couple of ways to achieve this:
- You can just assign the border top and left to the GRID and not the actual cards. If you have not set any margin, this will work just fine and the border will look as part of the cards
- You can do the margin trick. Just set the margin to -1px on the side and top
- You should know how many column there are, so you can just use the
.grid > :nth-child(-n+3 (or 2)) {amd set the border that way.
There was a problem hiding this comment.
went with a more restricted approach, where we limit the number of columns to 4, because it's quite difficult to do this truly dynamically (avoiding javascript etc).
1 and 2 work well, but if we have a 3-column grid and are only passing 1-2 links, there will be a border that stretches onto the empty 3rd column.
I went with 3, but hopefully looks better to the eyes. By limiting the number of grids (4) and creating custom selectors, we can effectively target these columns. Grok and Claude were no help in trying to find a better/optimal solution
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.
IMPORTANT: Please do not create a Pull Request without creating an issue first.Any change needs to be discussed before proceeding.
Dependent on #90 Should be rebased then merged once 90 is in.
Closing issues
closes #93
...
Description
Adds tutorials grid
...
Changes