Fixed overflow info modal with different window sizes

[We13b-MD]

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/cb599df5-376f-4675-84b7-7e2b0d12da4e

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/7fb24001-3a3e-4acc-ade3-d21324f99515

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.