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.

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

Jump to bottom

#77 Header UI becomes distorted in tablet view #95

Merged
merged 3 commits into from
Jan 17, 2024
Merged

#77 Header UI becomes distorted in tablet view #95

merged 3 commits into from
Jan 17, 2024

Conversation

dandheedge
Copy link
Contributor

Before

Screenshot 2024-01-08 at 15 34 12 Screenshot 2024-01-08 at 15 32 44

After

Screenshot 2024-01-08 at 15 34 24 Screenshot 2024-01-08 at 15 32 59

Close #77

@dandheedge dandheedge self-assigned this Jan 8, 2024
@vercel Vercel
Copy link

vercel bot commented Jan 8, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
rollups-explorer-mainnet ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 17, 2024 7:00am
rollups-explorer-sepolia ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 17, 2024 7:00am
rollups-explorer-workshop ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 17, 2024 7:00am

@dandheedge dandheedge added the Type: Bug Something isn't working label Jan 8, 2024
nevendyulgerov
nevendyulgerov reviewed Jan 8, 2024
View reviewed changes
Copy link
Contributor

@nevendyulgerov nevendyulgerov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks better than before @dandheedge , however I'm still noticing the same distorted UI in the range of 769px - 799px:
Screenshot 2024-01-08 at 21 07 54

I know it's just 30px but maybe some devices fall within that range and for them, the header will still be distorted.

Please try to fix that as well.

@brunomenezes
Copy link
Collaborator

Also, some rebase needed.

@dandheedge dandheedge force-pushed the bug/77-header-ui-becomes-distorted-in-tablet-view branch from 8ac0576 to 98ac4da Compare January 15, 2024 06:39
nevendyulgerov
nevendyulgerov previously approved these changes Jan 15, 2024
View reviewed changes
Copy link
Contributor

@nevendyulgerov nevendyulgerov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@brunomenezes
Copy link
Collaborator

brunomenezes commented Jan 16, 2024 •
edited
Loading

Hey guys! @dandheedge, @nevendyulgerov. Before we merge it, Does it not strike as odd to have just the jazzicon/identicon in the small version of the menu? So maybe the thing should be that the wallet connect button should not be displayed in the side menu on a medium breakpoint because the element gets squeezed but only displays it when it opens from the Hamburger icon, which means a sm | xs breakpoint.

image

@dandheedge
Copy link
Contributor Author

Hey guys! @dandheedge, @nevendyulgerov. Before we merge it, Does it not strike as odd to have just the jazzicon/identicon in the small version of the menu? So maybe the thing should be that the wallet connect button should not be displayed in the side menu on a medium breakpoint because the element gets squeezed but only displays it when it opens from the Hamburger icon, which means a sm | xs breakpoint.

image

I managed to create custom media queries to accommodate the dynamic display of the wallet button, enabling its visibility or hiding it based on viewport @brunomenezes @nevendyulgerov

Viewport smaller than 768px

Screenshot 2024-01-16 at 16 38 33

Viewport between 768px - 799px

Screenshot 2024-01-16 at 16 37 34 Screenshot 2024-01-16 at 16 37 59

Viewport larger than 800px

Screenshot 2024-01-16 at 16 38 12

@dandheedge dandheedge force-pushed the bug/77-header-ui-becomes-distorted-in-tablet-view branch from 17b9f11 to 02649fa Compare January 17, 2024 06:54
@brunomenezes brunomenezes merged commit e58915f into main Jan 17, 2024
8 checks passed
@brunomenezes brunomenezes deleted the bug/77-header-ui-becomes-distorted-in-tablet-view branch January 17, 2024 20:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@brunomenezes brunomenezes brunomenezes approved these changes

@nevendyulgerov nevendyulgerov Awaiting requested review from nevendyulgerov

Assignees

@dandheedge dandheedge

Labels
Type: Bug Something isn't working
Projects
Explorer Unit
Archived in project
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Header UI becomes distorted in tablet view
3 participants
@dandheedge @brunomenezes @nevendyulgerov