caMicroscope
caMicroscope copied to clipboard
camicroscope
Info modal fixed for different window sizes
Summary: Responsive Info Modal Layout
Description:
This pull request modifies the CSS styles for the info modal to create a responsive layout that adapts to different window sizes. This ensures the modal content, particularly the table headers ("Name," "Classes," etc.), displays properly on desktop and mobile devices. Motivation:
The previous info modal layout caused table headers to overflow on mobile devices, potentially hindering readability and user experience. This change addresses that issue by making the modal responsive, allowing headers to stack vertically on smaller screens.
Testing:
The changes have been tested thoroughly on various screen sizes (desktop, tablet, mobile) using browser developer tools to simulate different viewports. Functionality of the info modal and its content remains intact across all tested screen sizes.
Results
Before Change
https://github.com/camicroscope/caMicroscope/assets/122805291/23b18243-49b9-4040-a07a-3c26261464c0
As you can see here the in the info modal the edit class list info overlaps on mobile devices and when the window size is at about 439px which is not good for readability and it is also a bad user experience.
After Change
https://github.com/camicroscope/caMicroscope/assets/122805291/4a50c7e8-961b-45e0-9cce-31c3bae40379
In this video the info modal was corrected by adjusting the table element and increasing the modal-box to suit the table in mobile view. This will stop the overflow of the table elements which enhances readability and user experience. CSS styles were applied to handle extreme window sizes, preventing layout distortions and maintaining usability. Tested the adjustments across various screen sizes, including extreme cases like 100px width, to ensure consistency and effectiveness.
@birm pull request corrected one file changed i made some errors pushing code
This is notably better for medium size screens (e.g. half my laptop monitor) but still behaves erratically when especially small.
(develop)
(this PR)
Maybe it'd be better to just do overflow scroll under a certain size?
I know I'm picking the strangest kind of edge case here, so I'm still willing to merge it, just let me know what you decide.
Thank you @birm overflow scroll is a better option after I did my research I will implement it today and get back to you
@birm updated the video and used the overflow property as you requested implemented the changes and it is much better than the previous one you can check the screen record after the "After changes" Heading.