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

⚒️ Adjust the appearance of the toolbar on mobile devices #356

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

FunamaYukina
Copy link
Member

@FunamaYukina FunamaYukina commented Dec 23, 2024

Summary

I've resolved the problem of the missing toolbar on mobile browsers.

Preview: https://liam-erd-sample-acagd5sze-route-06-core.vercel.app/

Related Issue

Changes

device/browser Before After
iPhoneSE
(Safari)
IMG_0083 IMG_0082
Android
(Chrome)
Screenshot_2024-12-23-15-12-26-15_40deb401b9ffe8e1df2f1cc5ba480b12 Screenshot_2024-12-23-15-04-34-32_40deb401b9ffe8e1df2f1cc5ba480b12

I've checked on Firefox🔥 and Brave🦁 as well, and there seems to be no issue.

Testing

Other Information

@@ -18,7 +18,7 @@

.main {
width: 100%;
height: 100%;
height: calc(100svh - var(--default-header-height));
Copy link
Member Author

Choose a reason for hiding this comment

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

I tried using vh instead of svh, but it didn't display correctly, so I went back to using svh.

@FunamaYukina FunamaYukina marked this pull request as ready for review December 23, 2024 06:24
@FunamaYukina FunamaYukina requested a review from a team as a code owner December 23, 2024 06:24
@FunamaYukina FunamaYukina requested review from hoshinotsuyoshi, junkisai, MH4GF and sasamuku and removed request for a team December 23, 2024 06:24
Copy link
Member

@MH4GF MH4GF left a comment

Choose a reason for hiding this comment

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

The cause of the height overflow is apparently the height of the transparent marker.

スクリーンショット 2024-12-23 16 24 20

https://github.com/liam-hq/liam/blob/c6838375e419b845e65c5e9623e63825c28b52b0/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/CardinalityMarkers.tsx

I'd like to adjust the cause of the overflow. Setting a fixed value for height as a last resort.

@FunamaYukina
Copy link
Member Author

FunamaYukina commented Dec 23, 2024

@MH4GF
Thanks for catching that🙏. I've removed the width and height attributes from the SVG and tested it on a real device.

preview: https://liam-erd-sample-bkbqls58u-route-06-core.vercel.app/

ss 2585

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

Successfully merging this pull request may close these issues.

2 participants