fix: some minor ui issues (#1783)

apps/web/src/components/pure/workspace-slider-bar/index.tsx

@@ -8,11 +8,11 @@ import {
   SettingsIcon,
 } from '@blocksuite/icons';
 import type { Page, PageMeta } from '@blocksuite/store';
-import { useMediaQuery, useTheme } from '@mui/material';
 import type React from 'react';
 import { useCallback, useEffect } from 'react';
 
 import {
+  useSidebarFloating,
   useSidebarResizing,
   useSidebarStatus,
   useSidebarWidth,
@@ -80,16 +80,11 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
     const page = await createPage();
     openPage(page.id);
   }, [createPage, openPage]);
-  const theme = useTheme();
-  const floatingSlider = useMediaQuery(theme.breakpoints.down('md'));
+  const floatingSlider = useSidebarFloating();
   const [sliderWidth, setSliderWidth] = useSidebarWidth();
   const [isResizing, setIsResizing] = useSidebarResizing();
   const show = isPublicWorkspace ? false : sidebarOpen;
-  const actualWidth = show
-    ? floatingSlider
-      ? 'calc(10vw + 400px)'
-      : sliderWidth
-    : 0;
+  const actualWidth = floatingSlider ? 'calc(10vw + 400px)' : sliderWidth;
   const onResizeStart = useCallback(() => {
     let resized = false;
     function onMouseMove(e: MouseEvent) {
@@ -117,13 +112,13 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
   }, [sidebarOpen]);
   return (
     <>
-      <StyledSliderBarWrapper data-testid="sliderBar-root">
-        <StyledSliderBar
-          resizing={isResizing}
-          floating={floatingSlider}
-          style={{ width: actualWidth }}
-          show={show}
-        >
+      <StyledSliderBarWrapper
+        floating={floatingSlider}
+        show={show}
+        style={{ width: actualWidth }}
+        data-testid="sliderBar-root"
+      >
+        <StyledSliderBar>
           <StyledSidebarSwitchWrapper>
             <SidebarSwitch
               visible={sidebarOpen}

apps/web/src/components/pure/workspace-slider-bar/style.ts

@@ -1,41 +1,39 @@
 import { displayFlex, styled } from '@affine/component';
-import { getEnvironment } from '@affine/env';
 import Link from 'next/link';
 
-export const StyledSliderBarWrapper = styled('div')(() => {
+const macosElectron = environment.isDesktop && environment.isMacOs;
+
+export const StyledSliderBarWrapper = styled('div')<{
+  show: boolean;
+  floating: boolean;
+}>(({ theme, show, floating }) => {
   return {
     height: '100%',
-    width: 'auto',
-    position: 'relative',
+    position: 'absolute',
     'button, a': {
       userSelect: 'none',
     },
+    zIndex: theme.zIndex.modal,
+    transition: 'transform .25s',
+    transform: show ? 'translateX(0)' : 'translateX(-100%)',
+    maxWidth: floating ? undefined : 'calc(100vw - 698px)',
+    background:
+      !floating && macosElectron ? 'transparent' : theme.colors.hubBackground,
+    borderRight: '1px solid',
+    borderColor: theme.colors.borderColor,
   };
 });
 
-export const StyledSliderBar = styled('div')<{
-  resizing: boolean;
-  show: boolean;
-  floating: boolean;
-}>(({ theme, show, floating, resizing }) => {
-  const env = getEnvironment();
-  const macosElectron = env.isDesktop && env.isMacOs;
+export const StyledSliderBar = styled('div')(({ theme }) => {
   return {
     whiteSpace: 'nowrap',
+    width: '100%',
     height: '100%',
-    background:
-      !floating && macosElectron ? 'transparent' : theme.colors.hubBackground,
-    zIndex: theme.zIndex.modal,
-    transition: !resizing ? 'width .15s, padding .15s' : '',
-    padding: show ? '0 4px' : '0',
+    padding: '0 4px',
     flexShrink: 0,
     display: 'flex',
     flexDirection: 'column',
     overflow: 'hidden',
-    position: floating ? 'absolute' : 'relative',
-    maxWidth: floating ? undefined : 'calc(100vw - 698px)',
-    borderRight: '1px solid',
-    borderColor: theme.colors.borderColor,
   };
 });
 export const StyledSidebarSwitchWrapper = styled('div')(() => {
@@ -43,7 +41,7 @@ export const StyledSidebarSwitchWrapper = styled('div')(() => {
     height: '52px',
     flexShrink: 0,
     padding: '0 16px',
-    ...displayFlex('flex-end', 'center'),
+    ...displayFlex(macosElectron ? 'flex-end' : 'flex-start', 'center'),
   };
 });
 export const StyledSliderBarInnerWrapper = styled('div')(() => {
@@ -92,11 +90,10 @@ export const StyledSliderModalBackground = styled('div')<{ active: boolean }>(
       transition: 'opacity .15s',
       pointerEvents: active ? 'auto' : 'none',
       opacity: active ? 1 : 0,
-      display: active ? 'block' : 'none',
       position: 'fixed',
       top: 0,
       left: 0,
-      right: 0,
+      right: active ? 0 : '100%',
       bottom: 0,
       zIndex: theme.zIndex.modal - 1,
       background: theme.colors.modalBackground,
@@ -104,7 +101,7 @@ export const StyledSliderModalBackground = styled('div')<{ active: boolean }>(
   }
 );
 export const StyledSliderResizer = styled('div')<{ isResizing: boolean }>(
-  ({ theme }) => {
+  () => {
     return {
       position: 'absolute',
       top: 0,
@@ -113,7 +110,7 @@ export const StyledSliderResizer = styled('div')<{ isResizing: boolean }>(
       width: '12px',
       transform: 'translateX(50%)',
       cursor: 'col-resize',
-      zIndex: theme.zIndex.modal + 1,
+      zIndex: 1,
       userSelect: 'none',
       ':hover > *': {
         background: 'rgba(0, 0, 0, 0.1)',