Skip to content
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.

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

Icons get "squeezed" on smaller screens #1315

Open
mar2n opened this issue Nov 20, 2024 · 1 comment
Open

Icons get "squeezed" on smaller screens #1315

mar2n opened this issue Nov 20, 2024 · 1 comment

Comments

@mar2n
Copy link
Contributor

mar2n commented Nov 20, 2024

What's wrong?

When the room for an icon gets too small the dimensions changes.
This seems to be prevented by putting the inside a

How to reproduce?

Did not get spor-icon-react to work in editor. But this code snippet should recreate it. When the screen size is lowered the icon becomes unexpectedly smaller.

<HStack gap={1}>
        <TicketOutline30Icon />
        <Text variant="md">Noe tekst</Text>
</HStack>

Adding a box around the icon seems to prevent this behaviour.

<HStack gap={1}>
        <Box>
                <TicketOutline30Icon />
        </Box>
        <Text variant="md">Noe tekst</Text>
</HStack>

What did you expect to happen, and what happened instead?

I expected the icon to keep it's specified width of 30, but was squeezed.

Screenshots

Actual Expected
image image
@alicemacl
Copy link
Contributor

Kan du gi litt spesifikasjoner? Dette skjer hos meg først når jeg er under 230px, og vi sikter på å opprettholde fra 320px og oppover.

Et skjermopptak eller lignende er ønskelig. Hvert fall detaljer om innstillinger av zoom i browser, hvilken browser, med/uten mobilversjon i browser, oppløsning i browser osv

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants