feat(13373): adjust toolbar mobile layout #958
Conversation
|
Note Reviews pausedUse the following commands to manage reviews:
WalkthroughThe pull request introduces mobile-responsive enhancements across the toolbar and draw tools components. The changes focus on implementing device-specific sizing for buttons and controls, with a particular emphasis on creating a more adaptive user interface for mobile devices. Key modifications include adding mobile-preferred size properties, updating type definitions, removing the Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Bundle size diff
|
|
Preview environments for this PR:
These previews are automatically updated with each commit. Note: After a new deployment, it may take a few minutes for the changes to propagate and for caches to update. During this time, you might experience temporary loading issues or see an older version of the app. If the app fails to load, please wait a few minutes and try again. |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #958 +/- ##
=======================================
Coverage 10.04% 10.04%
=======================================
Files 669 668 -1
Lines 29420 29401 -19
Branches 1236 1235 -1
=======================================
Hits 2954 2954
+ Misses 25936 25918 -18
+ Partials 530 529 -1
☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 13
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (17)
src/core/draw_tools/index.ts(1 hunks)src/core/draw_tools/types.ts(2 hunks)src/core/toolbar/types.ts(2 hunks)src/features/toolbar/components/ShortToolbarButton/ShortToolbarButton.module.css(1 hunks)src/features/toolbar/components/ShortToolbarButton/ShortToolbarButton.tsx(1 hunks)src/features/toolbar/components/ShortToolbarContent/ShortToolbarContent.module.css(1 hunks)src/features/toolbar/components/ShortToolbarContent/ShortToolbarContent.tsx(1 hunks)src/features/toolbar/components/ToolbarButton/ToolbarButton.module.css(1 hunks)src/features/toolbar/components/ToolbarContent/ToolbarContent.module.css(3 hunks)src/features/toolbar/components/ToolbarContent/ToolbarContent.tsx(2 hunks)src/features/toolbar/components/ToolbarControl/ToolbarControl.tsx(3 hunks)src/features/toolbar/components/ToolbarPanel/ToolbarPanel.module.css(0 hunks)src/features/toolbar/components/ToolbarPanel/ToolbarPanel.tsx(0 hunks)src/views/Map/Map.tsx(1 hunks)src/widgets/FocusedGeometryEditor/DrawToolsWidget.tsx(3 hunks)src/widgets/FullAndShortStatesPanelWidget/components/FullAndShortStatesPanelWidget.module.css(0 hunks)src/widgets/FullAndShortStatesPanelWidget/components/FullAndShortStatesPanelWidget.tsx(2 hunks)
💤 Files with no reviewable changes (3)
- src/widgets/FullAndShortStatesPanelWidget/components/FullAndShortStatesPanelWidget.module.css
- src/features/toolbar/components/ToolbarPanel/ToolbarPanel.module.css
- src/features/toolbar/components/ToolbarPanel/ToolbarPanel.tsx
🧰 Additional context used
🪛 Biome (1.9.4)
src/features/toolbar/components/ToolbarControl/ToolbarControl.tsx
[error] 49-51: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build
- GitHub Check: deploy
🔇 Additional comments (8)
src/features/toolbar/components/ShortToolbarContent/ShortToolbarContent.tsx (1)
16-30: Verify styling after removal of sectionContent wrapper.The removal of the
sectionContentwrapper div might affect the layout. Please ensure that:
- No styles were dependent on the removed class
- The layout remains consistent on both mobile and desktop views
src/features/toolbar/components/ToolbarControl/ToolbarControl.tsx (1)
49-51: LGTM! Clean mobile-responsive size implementation.The size resolution logic is well-implemented with a sensible fallback to 'medium' for mobile devices.
Also applies to: 59-59
🧰 Tools
🪛 Biome (1.9.4)
[error] 49-51: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
src/core/toolbar/types.ts (1)
38-38: LGTM! Well-structured type definitions for mobile support.The mobile-specific size properties are properly typed and maintain backward compatibility.
Also applies to: 52-52
src/widgets/FullAndShortStatesPanelWidget/components/FullAndShortStatesPanelWidget.tsx (1)
96-96: LGTM! Enhanced component testability.The addition of data-testid attributes improves the component's testability while maintaining its functionality.
Also applies to: 123-123
src/features/toolbar/components/ShortToolbarContent/ShortToolbarContent.module.css (1)
15-19: Verify horizontal scrolling behavior on small screens.Setting
flex-wrap: nowrapmight cause horizontal scrolling on very small screens, potentially affecting the mobile user experience.✅ Verification successful
The toolbar layout is properly handled for mobile screens
The
flex-wrap: nowrapsetting is safe because:
- The parent component switches to a column layout on mobile screens
- Content wrapping is properly handled by the parent's mobile-specific styles
- The body element prevents horizontal scrolling globally
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for any existing horizontal scroll handling in CSS files rg -l 'overflow-x|overflow:\s*(?:auto|scroll|hidden)' --type cssLength of output: 1604
Script:
#!/bin/bash # Check global.css for overflow rules cat src/global.css # Find parent components that might contain ShortToolbarContent rg -l "ShortToolbarContent" --type css --type typescript --type javascript # Find other toolbar-related CSS files fd ".*toolbar.*\.css$" -ILength of output: 2379
Script:
#!/bin/bash # Check parent ToolbarContent component's CSS cat src/features/toolbar/components/ToolbarContent/ToolbarContent.module.css # Check if ShortToolbarContent is used within a container with width constraints rg -C 2 "ShortToolbarContent" --type jsLength of output: 1943
src/features/toolbar/components/ShortToolbarButton/ShortToolbarButton.module.css (1)
21-29: LGTM! Mobile-specific adjustments look good.The media query appropriately handles mobile layout adjustments:
- Adds consistent horizontal spacing with
--half-unitmargin- Hides the UploadMCDA button on mobile screens, reducing clutter
src/features/toolbar/components/ToolbarContent/ToolbarContent.module.css (2)
11-11: LGTM! Fixed divider height.The change from
inheritto100%ensures consistent divider height throughout the container.
54-89: Mobile layout adjustments look good.The changes create a more touch-friendly interface with improved spacing and visual hierarchy.
src/features/toolbar/components/ShortToolbarButton/ShortToolbarButton.tsx
Show resolved
Hide resolved
src/features/toolbar/components/ToolbarContent/ToolbarContent.tsx
Outdated
Show resolved
Hide resolved
src/features/toolbar/components/ToolbarContent/ToolbarContent.tsx
Outdated
Show resolved
Hide resolved
src/features/toolbar/components/ToolbarButton/ToolbarButton.module.css
Outdated
Show resolved
Hide resolved
src/features/toolbar/components/ToolbarContent/ToolbarContent.module.css
Show resolved
Hide resolved
src/features/toolbar/components/ToolbarContent/ToolbarContent.module.css
Show resolved
Hide resolved
Bundle ReportChanges will decrease total bundle size by 1.07kB (-0.02%) ⬇️. This is within the configured threshold ✅ Detailed changes
|
|
@coderabbitai pause |
✅ Actions performedReviews paused. |
src/features/toolbar/components/ShortToolbarButton/ShortToolbarButton.tsx
Show resolved
Hide resolved
Natallia-Harshunova
deleted the
13373-create-mobile-layout-for-toolbar
branch
https://kontur.fibery.io/Tasks/Task/Create-mobile-layout-for-toolbar-13373
Summary by CodeRabbit
New Features
Refactor
ToolbarPanelcomponentStyle
Chores