Fix for issue #1322 : Changed the media query for better margin and …

[udayjordan]

…padding to add a responsiveness

✨ Pull Request

📓 Referenced Issue

ℹ️ About the PR

This PR addresses the responsiveness issues in the layout by incorporating media queries to adjust the dimensions and alignment of various elements such as .webViewToolbar, .webViewToolbarIcons, and .resizableView. The changes ensure that the layout adapts appropriately across devices including tablets, mobile phones, and smaller screens.

Specifically:

Implemented media queries for breakpoints at 1024px, 768px, and 480px to optimize the display for tablets, mobile, and very small screens. Reduced icon sizes and adjusted margins for toolbar elements in smaller screen sizes. Changed the flex direction of the toolbar on smaller screens for better vertical stacking of elements. No breaking changes are introduced, and the code remains backwards-compatible with larger desktop screens.

🖼️ Testing Scenarios / Screenshots

Desktop (screen width > 1024px): No changes to the original layout, all elements remain as expected. Tablet (screen width ~768px): Toolbar elements are resized, margins are adjusted, and the layout is adapted to a smaller screen. Mobile (screen width ~480px): Toolbar flex-direction changes to the column for vertical stacking, icons shrink, and margins reduced to fit the smaller screen.

[CLAassistant]

All committers have signed the CLA.