search

sqlhabit / sql_schema_visualizer

SQL schema visualisation built with ReactFlow.
https://sqlhabit.github.io/sql_schema_visualizer/
MIT License
180 stars 35 forks source link

DatabaseMenuPopup does not fit small screens #6

Closed tangjm closed 1 year ago

tangjm commented 1 year ago

Hi Anatoli, the setup steps were clear and easy to follow. I ran into a problem where the database menu popup doesn't fit my screen and has parts of it that overspill. Please see attached screenshot to get a better idea of what I'm seeing.

image

I think we could fix this by making it into a scrollbar. Some ideas I have tried include adding style={{ overflowY: scroll, width: document.documentElement.clientWidth * 0.7 }} as a prop to one of the divs and modifying the info-popup.scss file. Both seem to work fairly well and the end results are shown in the screenshot below. What are your thoughts on this?

image

makaroni4 commented 1 year ago

Hi dear @tangjm 👋

Love to see you using Schema Visualizer 🙌

Thank you so much for submitting the issue, I just published the new release v1.3.1, it contains the bug fix.

Here's the fix commit: https://github.com/sqlhabit/sql_schema_visualizer/commit/6b7e78c788d66cd7c678cf1f3dc9f8c531272989

💡 Note that I applied the fix in the SCSS file to keep up with the project's convention to keep styles in SCSS files.