style(suite): Container query in Sidebar

packages/components/src/components/ResizableBox/ResizableBox.stories.tsx

@@ -32,12 +32,14 @@ export const ResizableBox: StoryObj<ResizableBoxProps> = {
         children: <Content>Resize me from any side!</Content>,
         directions: ['top', 'left', 'right', 'bottom'],
         isLocked: false,
-        width: 100,
-        minWidth: 50,
-        maxWidth: 300,
+        width: 240,
+        minWidth: 80,
+        maxWidth: 400,
         height: 100,
         minHeight: 50,
         maxHeight: 300,
+        disabledWidthInterval: [51, 100],
+        disabledHeightInterval: undefined,
         updateWidthOnWindowResize: false,
         updateHeightOnWindowResize: false,
     },

packages/components/src/components/ResizableBox/ResizableBox.tsx

@@ -6,6 +6,8 @@ import { ZIndexValues, zIndices } from '@trezor/theme';
 type Direction = 'top' | 'left' | 'right' | 'bottom';
 type Directions = Array<Direction>;
 
+type DisabledInterval = [number, number];
+
 export type ResizableBoxProps = {
     children: React.ReactNode;
     directions: Directions;
@@ -21,6 +23,10 @@ export type ResizableBoxProps = {
     zIndex?: ZIndexValues;
     onWidthResizeEnd?: (width: number) => void;
     onHeightResizeEnd?: (height: number) => void;
+    onWidthResizeMove?: (width: number) => void;
+    onHeightResizeMove?: (height: number) => void;
+    disabledWidthInterval?: DisabledInterval;
+    disabledHeightInterval?: DisabledInterval;
 };
 
 type ResizerHandlersProps = {
@@ -41,7 +47,6 @@ type ResizersProps = ResizerHandlersProps & {
 const MINIMAL_BOX_SIZE = 1;
 const REACTIVE_AREA_WIDTH = 16;
 const BORDER_WIDTH = 4;
-
 const Resizers = styled.div<ResizersProps>(
     ({ $width, $minWidth, $maxWidth, $height, $minHeight, $maxHeight, $isResizing }) => `
         ${$width ? `width: ${$width}px;` : 'width: auto;'};
@@ -52,11 +57,7 @@ const Resizers = styled.div<ResizersProps>(
         ${$maxHeight && `max-height: ${$maxHeight}px;`};
         box-sizing: border-box;
         position: relative;
-        ${
-            $isResizing &&
-            `user-select: none;
-            -webkit-user-select: none;`
-        };
+        ${$isResizing && `user-select: none; -webkit-user-select: none; cursor: ${$isResizing ? 'ns-resize' : 'auto'};`};
     `,
 );
 
@@ -171,6 +172,36 @@ const getMinResult = (min: number, result: number) => (result > min ? result : m
 const getMaxResult = (max: number | undefined, result: number) =>
     max === undefined || result < max ? result : max;
 
+const isInDisabledInterval = (value: number, interval?: DisabledInterval) => {
+    return interval && value > interval[0] && value < interval[1];
+};
+
+const calculateDisabledHeightInterval = (
+    result: number,
+    disabledHeightInterval?: DisabledInterval,
+) => {
+    if (disabledHeightInterval && isInDisabledInterval(result, disabledHeightInterval)) {
+        return result < (disabledHeightInterval[0] + disabledHeightInterval[1]) / 2
+            ? disabledHeightInterval[0]
+            : disabledHeightInterval[1];
+    }
+
+    return result;
+};
+
+const calculateDisabledWidthInterval = (
+    result: number,
+    disabledWidthInterval?: DisabledInterval,
+) => {
+    if (disabledWidthInterval && isInDisabledInterval(result, disabledWidthInterval)) {
+        return result < (disabledWidthInterval[0] + disabledWidthInterval[1]) / 2
+            ? disabledWidthInterval[0]
+            : disabledWidthInterval[1];
+    }
+
+    return result;
+};
+
 export const ResizableBox = ({
     children,
     directions,
@@ -186,6 +217,10 @@ export const ResizableBox = ({
     zIndex = zIndices.draggableComponent,
     onWidthResizeEnd,
     onHeightResizeEnd,
+    onWidthResizeMove,
+    onHeightResizeMove,
+    disabledWidthInterval,
+    disabledHeightInterval,
 }: ResizableBoxProps) => {
     const resizableBoxRef = useRef<HTMLDivElement>(null);
 
@@ -213,6 +248,7 @@ export const ResizableBox = ({
 
             if (direction === 'top') {
                 result = ensureMinimalSize(-difY);
+                result = calculateDisabledHeightInterval(result, disabledHeightInterval);
 
                 if (difY < 0) {
                     setNewHeight(getMaxResult(maxHeight, result));
@@ -221,6 +257,7 @@ export const ResizableBox = ({
                 }
             } else if (direction === 'bottom') {
                 result = ensureMinimalSize(newHeight + difY);
+                result = calculateDisabledHeightInterval(result, disabledHeightInterval);
 
                 if (difY > 0) {
                     setNewHeight(getMaxResult(maxHeight, result));
@@ -229,6 +266,7 @@ export const ResizableBox = ({
                 }
             } else if (direction === 'left') {
                 result = ensureMinimalSize(-difX);
+                result = calculateDisabledWidthInterval(result, disabledWidthInterval);
 
                 if (difX < 0) {
                     setNewWidth(getMaxResult(maxWidth, result));
@@ -237,6 +275,7 @@ export const ResizableBox = ({
                 }
             } else if (direction === 'right') {
                 result = ensureMinimalSize(newWidth + difX);
+                result = calculateDisabledWidthInterval(result, disabledWidthInterval);
 
                 if (difX > 0) {
                     setNewWidth(getMaxResult(maxWidth, result));
@@ -247,7 +286,19 @@ export const ResizableBox = ({
                 return;
             }
         },
-        [direction, maxHeight, maxWidth, minHeight, minWidth, newHeight, newWidth, newX, newY],
+        [
+            newX,
+            newWidth,
+            newY,
+            newHeight,
+            direction,
+            disabledHeightInterval,
+            maxHeight,
+            minHeight,
+            disabledWidthInterval,
+            maxWidth,
+            minWidth,
+        ],
     );
 
     const startResizing = (direction: Direction) => {
@@ -271,25 +322,23 @@ export const ResizableBox = ({
         }
 
         document.onmousemove = event => {
-            if (isResizing && direction !== null && resizeCooldown() === true) {
+            if (isResizing && direction !== null && resizeCooldown()) {
                 resize(event);
+                onWidthResizeMove?.(newWidth);
+                onHeightResizeMove?.(newHeight);
             }
         };
 
         document.onmouseup = () => {
             if (isResizing) {
                 setIsResizing(false);
-                if (onWidthResizeEnd) {
-                    onWidthResizeEnd(newWidth);
-                }
-                if (onHeightResizeEnd) {
-                    onHeightResizeEnd(newHeight);
-                }
+                onWidthResizeEnd?.(newWidth);
+                onHeightResizeEnd?.(newHeight);
             }
         };
 
         window.onresize = () => {
-            if (resizeCooldown() === true) {
+            if (resizeCooldown()) {
                 if (updateHeightOnWindowResize) {
                     setNewHeight(getMaxResult(maxHeight, window.innerHeight));
                 }
@@ -307,7 +356,9 @@ export const ResizableBox = ({
         newHeight,
         newWidth,
         onHeightResizeEnd,
+        onHeightResizeMove,
         onWidthResizeEnd,
+        onWidthResizeMove,
         resizableBoxRef,
         resize,
         resizeCooldown,

packages/components/src/components/ResizableBox/ResizableBoxExamples.stories.tsx

@@ -35,6 +35,8 @@ export const ResizableBoxExamples: StoryObj = {
                 height={100}
                 maxWidth={400}
                 maxHeight={300}
+                disabledWidthInterval={[100, 200]}
+                disabledHeightInterval={[100, 200]}
             >
                 <Content $color="green">Resize me from bottom and/or right</Content>
             </ResizableBox>
@@ -46,6 +48,8 @@ export const ResizableBoxExamples: StoryObj = {
                     height={100}
                     maxWidth={400}
                     maxHeight={300}
+                    disabledWidthInterval={[100, 200]}
+                    disabledHeightInterval={[100, 200]}
                 >
                     <Content $color="salmon">Resize me from top and/or left</Content>
                 </ResizableBox>

packages/suite/src/components/suite/layouts/SuiteLayout/DeviceSelector/DeviceSelector.tsx

@@ -9,6 +9,7 @@ import { borders, spacingsPx } from '@trezor/theme';
 import { focusStyleTransition, getFocusShadowStyle } from '@trezor/components/src/utils/utils';
 import { SidebarDeviceStatus } from './SidebarDeviceStatus';
 import { ViewOnlyTooltip } from 'src/views/view-only/ViewOnlyTooltip';
+import { ExpandedSidebarOnly } from '../Sidebar/ExpandedSidebarOnly';
 import { Icon } from '@trezor/components';
 
 const CaretContainer = styled.div`
@@ -52,6 +53,7 @@ const InnerContainer = styled.div`
     align-items: center;
     cursor: pointer;
     gap: ${spacingsPx.md};
+    min-height: 42px;
 `;
 
 export const DeviceSelector = () => {
@@ -113,11 +115,13 @@ export const DeviceSelector = () => {
                 >
                     <SidebarDeviceStatus />
 
-                    {selectedDevice && selectedDevice.state && (
-                        <CaretContainer>
-                            <Icon size={20} name="caretCircleDown" />
-                        </CaretContainer>
-                    )}
+                    <ExpandedSidebarOnly>
+                        {selectedDevice && selectedDevice.state && (
+                            <CaretContainer>
+                                <Icon size={20} name="caretCircleDown" />
+                            </CaretContainer>
+                        )}
+                    </ExpandedSidebarOnly>
                 </InnerContainer>
             </ViewOnlyTooltip>
         </Wrapper>

packages/suite/src/components/suite/layouts/SuiteLayout/DeviceSelector/DeviceStatus.tsx

@@ -7,6 +7,8 @@ import { TrezorDevice } from 'src/types/suite';
 import { spacingsPx } from '@trezor/theme';
 import { RotateDeviceImage } from '@trezor/components';
 import { DeviceStatusText } from 'src/views/suite/SwitchDevice/DeviceItem/DeviceStatusText';
+import { ExpandedSidebarOnly } from '../Sidebar/ExpandedSidebarOnly';
+import { isCollapsedSidebar } from '../Sidebar/consts';
 
 type DeviceStatusProps = {
     deviceModel: DeviceModelInternal;
@@ -21,6 +23,10 @@ const Container = styled.div`
     gap: ${spacingsPx.md};
     flex: 1;
     align-items: center;
+
+    @container ${isCollapsedSidebar} {
+        justify-content: center;
+    }
 `;
 
 const DeviceWrapper = styled.div<{ $isLowerOpacity: boolean }>`
@@ -54,15 +60,17 @@ export const DeviceStatus = ({
                 />
             </DeviceWrapper>
 
-            {device && (
-                <DeviceDetail label={device.label}>
-                    <DeviceStatusText
-                        onRefreshClick={handleRefreshClick}
-                        device={device}
-                        forceConnectionInfo={forceConnectionInfo}
-                    />
-                </DeviceDetail>
-            )}
+            <ExpandedSidebarOnly>
+                {device && (
+                    <DeviceDetail label={device.label}>
+                        <DeviceStatusText
+                            onRefreshClick={handleRefreshClick}
+                            device={device}
+                            forceConnectionInfo={forceConnectionInfo}
+                        />
+                    </DeviceDetail>
+                )}
+            </ExpandedSidebarOnly>
         </Container>
     );
 };

packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/CollapsedSidebarOnly.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SIDEBAR_COLLAPSED_WIDTH } from './consts';
+import { useResponsiveContext } from '../../../../../support/suite/ResponsiveContext';
+
+type Props = {
+    children: React.ReactNode;
+};
+
+export const CollapsedSidebarOnly = ({ children }: Props) => {
+    const { sidebarWidth } = useResponsiveContext();
+
+    if (sidebarWidth && sidebarWidth > SIDEBAR_COLLAPSED_WIDTH) return null;
+
+    return children;
+};

packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/ExpandedSidebarOnly.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SIDEBAR_COLLAPSED_WIDTH } from './consts';
+import { useResponsiveContext } from '../../../../../support/suite/ResponsiveContext';
+
+type Props = {
+    children: React.ReactNode;
+};
+
+export const ExpandedSidebarOnly = ({ children }: Props) => {
+    const { sidebarWidth } = useResponsiveContext();
+
+    if (sidebarWidth && sidebarWidth <= SIDEBAR_COLLAPSED_WIDTH) return null;
+
+    return children;
+};

packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/Navigation.tsx

@@ -5,12 +5,18 @@ import { NavigationItem, NavigationItemProps } from './NavigationItem';
 import { NotificationDropdown } from './NotificationDropdown';
 import { useSelector } from 'src/hooks/suite';
 import { selectHasExperimentalFeature } from 'src/reducers/suite/suiteReducer';
+import { isCollapsedSidebar } from './consts';
 
 const Nav = styled.nav`
     display: flex;
     flex-direction: column;
     gap: ${spacingsPx.xxs};
     margin: ${spacingsPx.xs};
+    align-items: stretch;
+
+    @container ${isCollapsedSidebar} {
+        align-items: center;
+    }
 `;
 
 const PasswordManagerNavItem = (props: NavigationItemProps) => {