Merge pull request #17663 from LucaCras/17202-fix-vertical-scrollbar-…

…panel-resize Stop add-on Draggable from overlapping the vertical scrollbar when stories overflow
storybookjs · Jun 30, 2022 · 83b38b8 · 83b38b8
2 parents 79ca046 + e962b47
commit 83b38b8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/lib/ui/src/components/layout/container.tsx b/lib/ui/src/components/layout/container.tsx
@@ -569,10 +569,11 @@ class Layout extends Component<LayoutProps, LayoutState> {
                       marginTop: -margin,
                     }
                   : {
-                      marginLeft: -margin,
+                      marginLeft: 1,
                     }
               }
               axis={isPanelBottom ? 'y' : 'x'}
+              reverse
             />
           </Draggable>
         )}

diff --git a/lib/ui/src/components/layout/draggers.tsx b/lib/ui/src/components/layout/draggers.tsx
@@ -3,7 +3,7 @@ import { styled } from '@storybook/theming';
 
 export type Axis = 'x' | 'y';
 
-const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
+const Handle = styled.div<{ isDragging: boolean; axis: Axis; reverse?: boolean }>(
   ({ theme, isDragging }) => ({
     zIndex: 10,
     position: 'absolute',
@@ -17,7 +17,7 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
 
     overflow: 'hidden',
     transition:
-      'color 0.2s linear, background-position 0.2s linear, background-size 0.2s linear, background 0.2s linear',
+      'color 0.2s linear, background-size 0.2s linear, background 0.2s linear, background-position 0s linear',
     '&:hover': {
       color: theme.color.secondary,
     },
@@ -37,7 +37,7 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
           width: '100%',
           marginTop: 0,
         },
-  ({ axis, isDragging }) => {
+  ({ axis, isDragging, reverse = false }) => {
     if (axis === 'y') {
       const style = {
         backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`,
@@ -57,7 +57,7 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
       const style = {
         backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`,
         backgroundSize: '50px 100%',
-        backgroundPosition: '0 50%',
+        backgroundPosition: reverse ? '100% 50%' : '0 50%',
         backgroundRepeat: 'no-repeat',
       };
       return isDragging