Fix for issue #1322 : Changed the media query for better margin and … #1323
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…tter margin and padding to add a responsiveness
|
|
violetadev
approved these changes
Oct 22, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
…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.