Skip to content

Commit 0b2a2af

Browse files
committed
fix: improve tag spacing with flexbox layout
Fixes #577 ## Problem Tag spacing breaks when using fonts other than the default. The negative margins (-me-3.5, -me-5) are hardcoded for the default monospace font. ## Solution Replace negative margin approach with flexbox layout, matching the pattern used by other icon+text components in AstroPaper (Datetime, EditPost, BackButton). ## Changes - li: Removed 'inline-block' (not needed) - a: Changed to 'flex items-center gap-x-1.5' (matches Datetime pattern) - IconHash: Removed negative margins, use gap for spacing - Removed   entity (gap handles spacing) ## Benefits - Works with any font (not calibrated to specific font) - Follows existing AstroPaper component patterns - Standard Tailwind CSS (no magic numbers) - Self-adjusting spacing
1 parent aad5ac6 commit 0b2a2af

File tree

1 file changed

+5
-5
lines changed

1 file changed

+5
-5
lines changed

src/components/Tag.astro

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,17 @@ const { tag, tagName, size = "sm" } = Astro.props;
2020
href={`/tags/${tag}/`}
2121
transition:name={tag}
2222
class:list={[
23-
"relative pe-2 text-lg underline decoration-dashed group-hover:-top-0.5 group-hover:text-accent focus-visible:p-1 focus-visible:no-underline",
23+
"flex items-center gap-x-1.5 text-lg underline decoration-dashed group-hover:-top-0.5 group-hover:text-accent focus-visible:p-1 focus-visible:no-underline",
2424
{ "text-sm": size === "sm" },
2525
]}
2626
>
2727
<IconHash
2828
class:list={[
29-
"inline-block opacity-80",
30-
{ "-me-3.5 size-4": size === "sm" },
31-
{ "-me-5 size-6": size === "lg" },
29+
"opacity-80",
30+
{ "size-4": size === "sm" },
31+
{ "size-6": size === "lg" },
3232
]}
3333
/>
34-
&nbsp;<span>{tagName}</span>
34+
<span>{tagName}</span>
3535
</a>
3636
</li>

0 commit comments

Comments
 (0)