update resizable button style

Signed-off-by: tygao <tygao@amazon.com>
raintygao · Feb 22, 2024 · 09eca2f · 09eca2f
1 parent 0c344fe
commit 09eca2f
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 14 deletions.
diff --git a/src/core/public/overlays/sidecar/resizable_button.tsx b/src/core/public/overlays/sidecar/resizable_button.tsx
@@ -10,21 +10,14 @@ import { getPosition } from './helper';
 import { ISidecarConfig, SIDECAR_DOCKED_MODE } from './sidecar_service';
 
 interface Props {
-  isHorizontal: boolean;
   onResize: (size: number) => void;
   flyoutSize: number;
   dockedMode: ISidecarConfig['dockedMode'] | undefined;
-  minSize?: number;
 }
 
-const MIN_SIDECAR_SIZE = 200;
+const MIN_SIDECAR_SIZE = 350;
 
-export const ResizableButton = ({
-  dockedMode,
-  onResize,
-  flyoutSize,
-  minSize = MIN_SIDECAR_SIZE,
-}: Props) => {
+export const ResizableButton = ({ dockedMode, onResize, flyoutSize }: Props) => {
   const isHorizontal = dockedMode !== SIDECAR_DOCKED_MODE.TAKEOVER;
 
   const classes = classNames('resizableButton', {
@@ -54,7 +47,7 @@ export const ResizableButton = ({
         }
         const newFlyoutSize = initialFlyoutSize.current + offset;
 
-        onResize(Math.max(newFlyoutSize, minSize));
+        onResize(Math.max(newFlyoutSize, MIN_SIDECAR_SIZE));
       };
       window.addEventListener('mousemove', onMouseMove);
       window.addEventListener('mouseup', onMouseUp);
@@ -63,7 +56,7 @@ export const ResizableButton = ({
       initialMouseXorY.current = getPosition(event, isHorizontal);
       initialFlyoutSize.current = flyoutSize;
     },
-    [isHorizontal, flyoutSize, dockedMode, minSize, onResize]
+    [isHorizontal, flyoutSize, dockedMode, onResize]
   );
 
   return (

diff --git a/src/core/public/overlays/sidecar/sidecar.tsx b/src/core/public/overlays/sidecar/sidecar.tsx
@@ -60,11 +60,9 @@ export const Sidecar = ({ sidecarConfig$, options, setSidecarConfig, i18n, mount
     <i18n.Context>
       <div data-test-subj={options['data-test-subj']} style={flyoutSizeStyle} className={classes}>
         <ResizableButton
-          isHorizontal={sidecarConfig?.dockedMode !== 'takeover'}
           onResize={handleResize}
           dockedMode={sidecarConfig?.dockedMode}
           flyoutSize={sidecarConfig?.paddingSize ?? 0}
-          minSize={sidecarConfig?.minSize}
         />
         <MountWrapper mount={mount} className="osdSidecarMountWrapper" />
       </div>

diff --git a/src/core/public/overlays/sidecar/sidecar_service.scss b/src/core/public/overlays/sidecar/sidecar_service.scss
@@ -15,19 +15,22 @@
     height: 100vh;
     right: 0;
     flex-direction: row;
+    padding-left: 8px;
   }
 
   &.osdSidecarFlyout--dockedLeft {
     top: 0;
     height: 100vh;
     left: 0;
     flex-direction: row-reverse;
+    padding-right: 8px;
   }
 
   &.osdSidecarFlyout--dockedTakeover {
     width: 100vw !important;
     bottom: 0;
     flex-direction: column;
+    padding-top: 8px;
   }
 
   &.osdSidecarFlyout--hide {

diff --git a/src/core/public/overlays/sidecar/sidecar_service.tsx b/src/core/public/overlays/sidecar/sidecar_service.tsx
@@ -115,7 +115,6 @@ export interface ISidecarConfig {
   // takeover mode will docked to bottom
   dockedMode: SIDECAR_DOCKED_MODE;
   paddingSize: number;
-  minSize?: number;
   isHidden?: boolean;
 }