fix(dataset): resizable dataset layout left column (#24829)

superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx

@@ -37,7 +37,6 @@ interface LeftPanelProps {
 
 const LeftPanelStyle = styled.div`
   ${({ theme }) => `
-    max-width: ${theme.gridUnit * 87.5}px;
     padding: ${theme.gridUnit * 4}px;
     height: 100%;
     background-color: ${theme.colors.grayscale.light5};

superset-frontend/src/features/datasets/DatasetLayout/index.tsx

@@ -17,6 +17,9 @@
  * under the License.
  */
 import React, { ReactElement, JSXElementConstructor } from 'react';
+import { useTheme } from '@superset-ui/core';
+import ResizableSidebar from 'src/components/ResizableSidebar';
+
 import {
   StyledLayoutWrapper,
   LeftColumn,
@@ -46,14 +49,25 @@ export default function DatasetLayout({
   rightPanel,
   footer,
 }: DatasetLayoutProps) {
+  const theme = useTheme();
+
   return (
     <StyledLayoutWrapper data-test="dataset-layout-wrapper">
       {header && <StyledLayoutHeader>{header}</StyledLayoutHeader>}
       <OuterRow>
         {leftPanel && (
-          <LeftColumn>
-            <StyledLayoutLeftPanel>{leftPanel}</StyledLayoutLeftPanel>
-          </LeftColumn>
+          <ResizableSidebar
+            id="dataset"
+            initialWidth={theme.gridUnit * 80}
+            minWidth={theme.gridUnit * 80}
+            enable
+          >
+            {adjustedWidth => (
+              <LeftColumn width={adjustedWidth}>
+                <StyledLayoutLeftPanel>{leftPanel}</StyledLayoutLeftPanel>
+              </LeftColumn>
+            )}
+          </ResizableSidebar>
         )}
         <RightColumn>
           <PanelRow>

superset-frontend/src/features/datasets/styles.ts

@@ -25,22 +25,17 @@ export const StyledLayoutWrapper = styled.div`
   background-color: ${({ theme }) => theme.colors.grayscale.light5};
 `;
 
-const Column = styled.div`
-  width: 100%;
-  height: 100%;
+export const LeftColumn = styled.div<{ width?: number }>`
+  width: ${({ theme, width }) => width ?? theme.gridUnit * 80}px;
+  max-width: ${({ theme, width }) => width ?? theme.gridUnit * 80}px;
   flex-direction: column;
-`;
-
-export const LeftColumn = styled(Column)`
-  width: ${({ theme }) => theme.gridUnit * 80}px;
-  height: auto;
-`;
-
-export const RightColumn = styled(Column)`
-  height: auto;
-  display: flex;
   flex: 1 0 auto;
-  width: calc(100% - ${({ theme }) => theme.gridUnit * 80}px);
+`;
+
+export const RightColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
 `;
 
 const Row = styled.div`
@@ -52,6 +47,7 @@ const Row = styled.div`
 
 export const OuterRow = styled(Row)`
   flex: 1 0 auto;
+  position: relative;
 `;
 
 export const PanelRow = styled(Row)`
@@ -87,7 +83,6 @@ export const StyledCreateDatasetTitle = styled.div`
 
 export const StyledLayoutLeftPanel = styled.div`
   ${({ theme }) => `
-  width: ${theme.gridUnit * 80}px;
   height: 100%;
   border-right: 1px solid ${theme.colors.grayscale.light2};
   `}