Skip to content

fix(tags): ensure consistent vertical spacing across mobile view (#276) #284

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Preetiaarya wants to merge 5 commits into
base: master
Choose a base branch
from
Open

fix(tags): ensure consistent vertical spacing across mobile view (#276) #284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9b613ff
fixes #276:[add consistent vertical spacing to tags on Blog page]
Preetiaarya Jun 3, 2025
47a3d47
Fix: mobile wrapping for update tags in updates page
Preetiaarya Aug 8, 2025
585e2fb
Remove unused style page from TagsRenderer component
Preetiaarya Aug 8, 2025
bdbc831
refactor: update tag padding, margin, and remove round style
Preetiaarya Aug 12, 2025
755cb49
style: reduce tag label text size and set custom font style
Preetiaarya Aug 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 31 additions & 24 deletions src/components/TagsRenderer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Link } from "gatsby"
import { Box, Heading, Button } from "grommet"

import TagBubbleBlog from "./atomic/TagBubbleBlog"
// import './styles/global.css';

/**
* Renders a list of tags with an option to toggle between showing all tags or a limited number.
Expand All @@ -28,16 +29,17 @@ export default function TagsRenderer({
}

return (
<Box flex direction="row" align="baseline" gap="xsmall">
<Box>
<Heading level={4} marging={{ bottom: "small" }}>
{tagTypeHeading}
</Heading>
</Box>
<Box margin={{ bottom: "small" }}>
<Box flex direction="row" align="baseline" gap="xsmall">
<Box>
<Heading level={4} margin={{ bottom: "small" }}>
{tagTypeHeading}
</Heading>
</Box>

<Box flex direction="row" gap="small" align="center" wrap={true}>
{showAllTags
? sortedUniqueTags.map((tag) => (
<Box flex direction="row" gap="small" align="center" wrap={true}>
{showAllTags
? sortedUniqueTags.map((tag) => (
<Box key={tag} margin={{ bottom: "small" }}>
<Link
to={tagBaseURL.concat(tag)}
Expand All @@ -47,8 +49,11 @@ export default function TagsRenderer({
</Link>
</Box>
))
: sortedUniqueTags.slice(0, 10).map((tag) => (
<Box key={tag}>
: sortedUniqueTags.slice(0, 10).map((tag) => (
<Box key={tag}
// pad={{ vertical: "xsmall" }}
// round="xsmall"
margin={{ bottom: "small" }}>
<Link
to={tagBaseURL.concat(tag)}
style={{ textDecoration: "none" }}
Expand All @@ -57,20 +62,22 @@ export default function TagsRenderer({
</Link>
</Box>
))}
{sortedUniqueTags.length > 10 && (
<Button onClick={toggleTagsDisplay}>
<Box
pad={{ horizontal: "small", vertical: "xsmall" }}
align="center"
border={{ color: "#E76D67", size: "1px" }}
round="small"
className="hover:ring-2 hover:ring-E76D67"
>
{showAllTags ? "Show Less Tags" : "Show All Tags"}
</Box>
</Button>
)}
{sortedUniqueTags.length > 10 && (
<Button onClick={toggleTagsDisplay}>
<Box
pad={{ horizontal: "xsmall", vertical: "xxsmall" }}
align="center"
border={{ color: "#E76D67", size: "1px" }}
round="small"
className="hover:ring-2 hover:ring-E76D67"
>
{showAllTags ? "Show Less Tags" : "Show All Tags"}
</Box>
</Button>
)}
</Box>
</Box>
</Box>
)
}

6 changes: 5 additions & 1 deletion src/components/atomic/TagBubbleBlog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,13 @@ const TagBubbleBlog = ({ data }) => {
width="fit-content"
direction="row"
align="center"
style={{
fontSize: "0.75rem",
lineHeight: "1rem"
}}
>
<span style={{ textDecoration: 'underline' }}>
<Text size="small">{data.label}</Text>
<Text size="xsmall">{data.label}</Text>
</span>
<Text size="xsmall" margin={{ left: "xsmall" }}>
{data.count}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/updates.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const UpdateListItem = ({ node }) => {
<Heading level={3} margin={{ bottom: "4.578px", top: "7.324px" }}>
{node.frontmatter.title}
</Heading>
<Box direction={"row-responsive"} gap={"xsmall"}>
<Box direction="row" wrap gap="xsmall" margin={{ bottom: "small" }}>
{tags.map(tag => (
<TagBubble data={{ label: tag }} key={tag} />
))}
Expand Down