Styling adjustment needed in mobile view of table.html page #738 solved

[We13b-MD]

Title: Improve Mobile View of table.html (#738)

Description:

This pull request addresses styling issues affecting the mobile view of table.html. The changes aim to enhance the user experience by ensuring the table renders clearly and is easy to navigate on smaller screens.

Results:

Before:

https://github.com/camicroscope/caMicroscope/assets/122805291/3cf1f298-ed72-42c5-8aab-9c6bbb696cdf

After:

https://github.com/camicroscope/caMicroscope/assets/122805291/0214cfb4-1f66-4532-9c72-d7cc1948c064

https://github.com/camicroscope/caMicroscope/assets/122805291/0ee41638-b432-459d-bf95-6b9c7146bb5b

Motivation:

Improved accessibility: By ensuring a well-formatted table on mobile devices, we cater to users with various screen sizes and assistive technologies. Enhanced user experience: A well-designed mobile view reduces frustration and provides a more seamless experience for users accessing the table on mobile devices. Changes:

• Enhanced the buttons on mobile view by including a more options on hover it shows the buttons upload Dicom and reload
• Increased the margin-top of the collection list group to accommodate the buttons when on hover
• Enhanced the buttons changed color for simplicity during mobile view.
• Adjusted table layout to fit within the mobile viewport
• Implemented responsive media queries for optimal rendering across different screen sizes.

Testing:

Manually tested the updated table.html on various mobile devices and emulators to ensure proper rendering and navigation. Used browser developer tools to simulate mobile viewports and test the layout across different screen sizes. Ypu can see in the video above.

[We13b-MD]

@birm [Styling adjustment needed in mobile view of table.html page #738 solved] i adjusted the table.html for mobile view if i wanted to know if its ok or you want something else so that i can get working on it