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

Fix vertical alignment of upload icon in the FilePicker (on mobile) #305

Open
JanHamara opened this issue Mar 9, 2023 · 1 comment
Open
Labels
bug Something isn't working good first issue Good for newcomers

Comments

@JanHamara
Copy link
Contributor

  • @freenow/wave version: 1.29.0

Relevant code

Inside FilePicker.tsx

<Outliner
                minHeight="5.125rem"
                alignItems="stretch"
                data-testid="filepicker-outliner"
                display="flex"
                disabled={disabled}
                hasValidFile={validFileSelected}
                error={error}
                justifyContent="space-between"
                onClick={onClickHandler}
                px={2}
                py={validFileSelected ? '1.25rem' : 3}
            >

What was expected to happen?

The current setting of alignItems="stretch" in the <Outliner> is causing the upload icon on mobile screens to not center vertically correctly.

Screenshot 2023-03-09 at 11 00 54

Solution

Change the value for alignItems to center

@nlopin nlopin added bug Something isn't working good first issue Good for newcomers labels Mar 9, 2023
@nlopin
Copy link
Member

nlopin commented Mar 9, 2023

The issue is with icon positioning in flexbox on mobile only

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working good first issue Good for newcomers
Development

No branches or pull requests

2 participants