Skip to content

[BUG]: fix: improve tag spacing on mobile devices #577

@achuanya

Description

@achuanya

Description

Fix mobile spacing issue between hash symbol (#) and tag name in Tag component. The current implementation uses excessive negative margins (-me-3.5 and -me-5) on the IconHash component, causing the hash symbol to appear too close to the tag name on mobile devices, affecting readability.

This PR implements responsive negative margins that apply smaller values on mobile devices while maintaining the original spacing on desktop screens.

Specific code modifications:

// File: src/components/Tag.astro
    <IconHash
      class:list={[
        "inline-block opacity-80",
        { "-me-3.5 size-4": size === "sm" },
        { "-me-5 size-6": size === "lg" },
      ]}
    />

Related pictures:

When not repaired:

b3c4ad78ad9894eb3883d96b26d2e7f1

df34dba2644cf1b90a589bd076906a24

After repair:

6404093174a02a2e91a51e4ad5eb6875

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions