fix: give electron app with minWidth = 640px (#1785)

apps/web/src/layouts/index.tsx

@@ -47,6 +47,9 @@ import {
   MainContainer,
   MainContainerWrapper,
   StyledPage,
+  StyledSliderResizer,
+  StyledSliderResizerInner,
+  StyledSpacer,
   StyledToolWrapper,
 } from './styles';
 
@@ -255,14 +258,38 @@ export const WorkspaceLayoutInner: React.FC<React.PropsWithChildren> = ({
   const handleOpenQuickSearchModal = useCallback(() => {
     setOpenQuickSearchModalAtom(true);
   }, [setOpenQuickSearchModalAtom]);
-  const [resizingSidebar] = useSidebarResizing();
+  const [resizingSidebar, setIsResizing] = useSidebarResizing();
   const lock = useAtomValue(workspaceLockAtom);
-  const [sidebarOpen] = useSidebarStatus();
+  const [sidebarOpen, setSidebarOpen] = useSidebarStatus();
   const sidebarFloating = useSidebarFloating();
-  const [sidebarWidth] = useSidebarWidth();
-  const paddingLeft =
-    sidebarFloating || !sidebarOpen ? '0' : `${sidebarWidth}px`;
+  const [sidebarWidth, setSliderWidth] = useSidebarWidth();
+  const actualSidebarWidth = sidebarFloating || !sidebarOpen ? 0 : sidebarWidth;
+  const width = `calc(100% - ${actualSidebarWidth}px)`;
   const [resizing] = useSidebarResizing();
+
+  const onResizeStart = useCallback(() => {
+    let resized = false;
+    function onMouseMove(e: MouseEvent) {
+      const newWidth = Math.min(480, Math.max(e.clientX, 256));
+      setSliderWidth(newWidth);
+      setIsResizing(true);
+      resized = true;
+    }
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener(
+      'mouseup',
+      () => {
+        // if not resized, toggle sidebar
+        if (!resized) {
+          setSidebarOpen(o => !o);
+        }
+        setIsResizing(false);
+        document.removeEventListener('mousemove', onMouseMove);
+      },
+      { once: true }
+    );
+  }, [setIsResizing, setSidebarOpen, setSliderWidth]);
+
   if (lock) {
     return <PageLoading />;
   }
@@ -284,10 +311,23 @@ export const WorkspaceLayoutInner: React.FC<React.PropsWithChildren> = ({
           currentPath={router.asPath.split('?')[0]}
           paths={isPublicWorkspace ? publicPathGenerator : pathGenerator}
         />
-        <MainContainerWrapper
+        <StyledSpacer
+          floating={sidebarFloating}
           resizing={resizing}
-          style={{ paddingLeft: paddingLeft }}
+          sidebarOpen={sidebarOpen}
+          style={{ width: actualSidebarWidth }}
         >
+          {!sidebarFloating && sidebarOpen && (
+            <StyledSliderResizer
+              data-testid="sliderBar-resizer"
+              isResizing={resizing}
+              onMouseDown={onResizeStart}
+            >
+              <StyledSliderResizerInner isResizing={resizing} />
+            </StyledSliderResizer>
+          )}
+        </StyledSpacer>
+        <MainContainerWrapper resizing={resizing} style={{ width: width }}>
           <MainContainer className="main-container">
             <AffineWorkspaceEffect />
             {children}

apps/web/src/layouts/styles.ts

@@ -18,6 +18,20 @@ export const StyledPage = styled('div')<{ resizing?: boolean }>(
   }
 );
 
+export const StyledSpacer = styled('div')<{
+  sidebarOpen: boolean;
+  resizing: boolean;
+  floating: boolean;
+}>(({ resizing, sidebarOpen, floating }) => {
+  return {
+    position: 'relative',
+    flexGrow: 1,
+    maxWidth: 'calc(100vw - 698px)',
+    minWidth: !floating && sidebarOpen ? '256px' : '0',
+    transition: resizing ? '' : 'width .3s, min-width .3s',
+  };
+});
+
 export const StyledWrapper = styled('div')(() => {
   return {
     flexGrow: 1,
@@ -27,14 +41,13 @@ export const StyledWrapper = styled('div')(() => {
 });
 
 export const MainContainerWrapper = styled('div')<{ resizing: boolean }>(
-  ({ theme, resizing }) => {
+  ({ resizing }) => {
     return {
       display: 'flex',
       flexGrow: 1,
       position: 'relative',
       maxWidth: '100vw',
       overflow: 'auto',
-      transition: resizing ? '' : 'padding-left .25s',
     };
   }
 );
@@ -43,10 +56,14 @@ export const MainContainer = styled('div')(({ theme }) => {
   return {
     position: 'relative',
     flexGrow: 1,
+    maxWidth: '100%',
     backgroundColor: theme.colors.pageBackground,
     [theme.breakpoints.up('md')]: {
       minWidth: '686px',
     },
+    [theme.breakpoints.down('sm')]: {
+      minWidth: '550px',
+    },
   };
 });
 
@@ -65,3 +82,36 @@ export const StyledToolWrapper = styled('div')(({ theme }) => {
     },
   };
 });
+
+export const StyledSliderResizer = styled('div')<{ isResizing: boolean }>(
+  ({ theme }) => {
+    return {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      width: '12px',
+      transform: 'translateX(50%)',
+      cursor: 'col-resize',
+      zIndex: theme.zIndex.modal,
+      userSelect: 'none',
+      ':hover > *': {
+        background: 'rgba(0, 0, 0, 0.1)',
+      },
+    };
+  }
+);
+export const StyledSliderResizerInner = styled('div')<{ isResizing: boolean }>(
+  ({ isResizing }) => {
+    return {
+      transition: 'background .15s .1s',
+      position: 'absolute',
+      top: 0,
+      right: '50%',
+      bottom: 0,
+      transform: 'translateX(0.5px)',
+      width: '2px',
+      background: isResizing ? 'rgba(0, 0, 0, 0.1)' : 'transparent',
+    };
+  }
+);