Core: Fix panel overflowing issue

code/core/src/manager/components/layout/Layout.tsx

@@ -156,26 +156,16 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...s
     sidebarResizerRef,
     showPages,
     showPanel,
-    isDragging,
   } = useLayoutSyncingState({ api, managerLayoutState, setManagerLayoutState, isDesktop, hasTab });
 
   // Install landmark navigation listener in parent container of all landmarks.
   useLandmarkIndicator();
 
   return (
-    <LayoutContainer
-      navSize={navSize}
-      rightPanelWidth={rightPanelWidth}
-      bottomPanelHeight={bottomPanelHeight}
-      panelPosition={managerLayoutState.panelPosition}
-      isDragging={isDragging}
-      viewMode={managerLayoutState.viewMode}
-      showPanel={showPanel}
-    >
-      {showPages && <PagesContainer>{slots.slotPages}</PagesContainer>}
+    <LayoutContainer>
       <>
         {isDesktop && (
-          <SidebarContainer>
+          <SidebarContainer style={{ width: navSize }}>
             <Drag ref={sidebarResizerRef} />
             {slots.slotSidebar}
           </SidebarContainer>
@@ -188,62 +178,83 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...s
           />
         )}
 
-        <MainContentMatcher>{slots.slotMain}</MainContentMatcher>
-
-        {isDesktop && showPanel && (
-          <PanelContainer position={panelPosition}>
-            <Drag
-              orientation={panelPosition === 'bottom' ? 'horizontal' : 'vertical'}
-              position={panelPosition === 'bottom' ? 'left' : 'right'}
-              ref={panelResizerRef}
-            />
-            {slots.slotPanel}
-          </PanelContainer>
-        )}
+        <ContentPanelWrapper
+          panelPosition={panelPosition}
+          showPanel={showPanel}
+          rightPanelWidth={rightPanelWidth}
+          bottomPanelHeight={bottomPanelHeight}
+        >
+          {showPages ? (
+            <PagesContainer>{slots.slotPages}</PagesContainer>
+          ) : (
+            <MainContentMatcher>{slots.slotMain}</MainContentMatcher>
+          )}
+          {isDesktop && showPanel && (
+            <PanelContainer
+              position={panelPosition}
+              style={
+                panelPosition === 'right'
+                  ? { width: `${rightPanelWidth}px` }
+                  : { height: `${bottomPanelHeight}px` }
+              }
+            >
+              <Drag
+                orientation={panelPosition === 'bottom' ? 'horizontal' : 'vertical'}
+                position={panelPosition === 'bottom' ? 'left' : 'right'}
+                ref={panelResizerRef}
+              />
+              <PanelSlot
+                hidden={
+                  (panelPosition === 'bottom' ? bottomPanelHeight === 0 : rightPanelWidth === 0) ||
+                  undefined
+                }
+              >
+                {slots.slotPanel}
+              </PanelSlot>
+            </PanelContainer>
+          )}
+        </ContentPanelWrapper>
+
         {isMobile && <Notifications />}
       </>
     </LayoutContainer>
   );
 };
 
-const LayoutContainer = styled.div<LayoutState & { showPanel: boolean }>(
-  ({ navSize, rightPanelWidth, bottomPanelHeight, viewMode, panelPosition, showPanel }) => {
-    return {
-      width: '100%',
-      height: ['100vh', '100dvh'], // This array is a special Emotion syntax to set a fallback if 100dvh is not supported
-      overflow: 'hidden',
-      display: 'flex',
-      flexDirection: 'column',
-      colorScheme: 'light dark',
-
-      [MEDIA_DESKTOP_BREAKPOINT]: {
-        display: 'grid',
-        gap: 0,
-        gridTemplateColumns: `minmax(0, ${navSize}px) minmax(${MINIMUM_CONTENT_WIDTH_PX}px, 1fr) minmax(0, ${rightPanelWidth}px)`,
-        gridTemplateRows: `1fr minmax(0, ${bottomPanelHeight}px)`,
-        gridTemplateAreas: (() => {
-          if (!showPanel) {
-            // showPanel is false by default when viewMode is not 'story', but can be overridden by the user
-            return `"sidebar content content"
-                  "sidebar content content"`;
-          }
-          if (panelPosition === 'right') {
-            return `"sidebar content panel"
-                  "sidebar content panel"`;
-          }
-          return `"sidebar content content"
-                "sidebar panel   panel"`;
-        })(),
-      },
-    };
-  }
-);
+const LayoutContainer = styled.div({
+  width: '100%',
+  height: ['100vh', '100dvh'], // This array is a special Emotion syntax to set a fallback if 100dvh is not supported
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  colorScheme: 'light dark',
+
+  [MEDIA_DESKTOP_BREAKPOINT]: {
+    flexDirection: 'row',
+  },
+});
 
 const SidebarContainer = styled.div(({ theme }) => ({
   backgroundColor: theme.appBg,
-  gridArea: 'sidebar',
   position: 'relative',
   borderRight: `1px solid ${theme.appBorderColor}`,
+
+  [MEDIA_DESKTOP_BREAKPOINT]: {
+    flexShrink: 0,
+  },
+}));
+
+const ContentPanelWrapper = styled.div<{
+  panelPosition: LayoutState['panelPosition'];
+  showPanel: boolean;
+  rightPanelWidth: number;
+  bottomPanelHeight: number;
+}>(({ panelPosition }) => ({
+  display: 'flex',
+  overflow: 'hidden',
+  flex: 1,
+  minWidth: 0,
+  flexDirection: panelPosition === 'bottom' ? 'column' : 'row',
 }));
 
 const ContentContainer = styled.div<{ shown: boolean }>(({ theme, shown }) => ({
@@ -252,34 +263,34 @@ const ContentContainer = styled.div<{ shown: boolean }>(({ theme, shown }) => ({
   backgroundColor: theme.appContentBg,
   display: shown ? 'grid' : 'none', // This is needed to make the content container fill the available space
   overflow: 'auto',
+  minWidth: MINIMUM_CONTENT_WIDTH_PX,
 
   [MEDIA_DESKTOP_BREAKPOINT]: {
     flex: 'auto',
-    gridArea: 'content',
   },
 }));
 
 const PagesContainer = styled.div(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
-  gridRowStart: 'sidebar-start',
-  gridRowEnd: '-1',
-  gridColumnStart: 'sidebar-end',
-  gridColumnEnd: '-1',
+  flexGrow: 1,
   backgroundColor: theme.appContentBg,
   zIndex: 1,
 }));
 
 const PanelContainer = styled.div<{ position: LayoutState['panelPosition'] }>(
   ({ theme, position }) => ({
-    gridArea: 'panel',
     position: 'relative',
     backgroundColor: theme.appContentBg,
     borderTop: position === 'bottom' ? `1px solid ${theme.appBorderColor}` : undefined,
     borderLeft: position === 'right' ? `1px solid ${theme.appBorderColor}` : undefined,
   })
 );
 
+const PanelSlot = styled.div({
+  height: '100%',
+});
+
 const Drag = styled.div<{ orientation?: 'horizontal' | 'vertical'; position?: 'left' | 'right' }>(
   ({ theme }) => ({
     position: 'absolute',