Fixes AdminUI overflow bug (#8754) introduced in #8702

keystonejs · Aug 15, 2023 · 8c43bd3 · 8c43bd3
1 parent ef7b29d
commit 8c43bd3
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 22 deletions.
diff --git a/.changeset/fix-overscroll-ui.md b/.changeset/fix-overscroll-ui.md
@@ -0,0 +1,5 @@
+---
+'@keystone-6/core': patch
+---
+
+Fixes AdminUI overflow bug (#8754) introduced in #8702
diff --git a/packages/core/src/admin-ui/components/CellContainer.tsx b/packages/core/src/admin-ui/components/CellContainer.tsx
@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { jsx, useTheme } from '@keystone-ui/core';
 
 /**

diff --git a/packages/core/src/admin-ui/components/CreateButtonLink.tsx b/packages/core/src/admin-ui/components/CreateButtonLink.tsx
@@ -2,10 +2,10 @@
 /** @jsx jsx */
 import { Button } from '@keystone-ui/button';
 import { jsx } from '@keystone-ui/core';
-import { ListMeta } from '../../types';
+import type { ListMeta } from '../../types';
 import { Link } from '../router';
 
-export const CreateButtonLink = (props: { list: ListMeta }) => {
+export function CreateButtonLink (props: { list: ListMeta }) {
   return (
     <Button
       css={{
@@ -23,4 +23,4 @@ export const CreateButtonLink = (props: { list: ListMeta }) => {
       Create {props.list.singular}
     </Button>
   );
-};
+}
diff --git a/packages/core/src/admin-ui/components/PageContainer.tsx b/packages/core/src/admin-ui/components/PageContainer.tsx
@@ -2,7 +2,7 @@
 /** @jsx jsx */
 
 import { jsx, useTheme } from '@keystone-ui/core';
-import { Dispatch, Fragment, HTMLAttributes, ReactNode, SetStateAction, useState } from 'react';
+import { Fragment, HTMLAttributes, ReactNode, useState } from 'react';
 import { MenuIcon, XCircleIcon } from '@keystone-ui/icons';
 
 import { Navigation } from './Navigation';
@@ -46,15 +46,14 @@ const Sidebar = ({
   ...props
 }: HTMLAttributes<HTMLElement> & {
   isSidebarOpen: boolean;
-  setIsSidebarOpen: Dispatch<SetStateAction<boolean>>;
 }) => {
   // const { colors } = useTheme();
 
   return (
     <div
       css={{
         gridColumn: '1/2',
-        gridRow: '1/4',
+        gridRow: '2/4',
         display: isSidebarOpen ? 'block' : 'none',
         height: '100vh',
         '@media (min-width: 576px)': {
@@ -63,21 +62,10 @@ const Sidebar = ({
           display: 'block',
           height: '100%',
         },
+        overflowY: 'auto',
+        WebkitOverflowScrolling: 'touch',
       }}
     >
-      <div
-        onClick={() => {
-          props.setIsSidebarOpen(!isSidebarOpen);
-        }}
-        css={{
-          float: 'right',
-          padding: '10px',
-          display: 'block',
-          '@media (min-width: 576px)': { display: 'none' },
-        }}
-      >
-        <XCircleIcon />
-      </div>
       <aside
         css={{
           // borderRight: `1px solid ${colors.border}`,
@@ -133,7 +121,7 @@ export const PageContainer = ({ children, header, title }: PageContainerProps) =
           }}
           css={{ display: 'block', '@media (min-width: 576px)': { display: 'none' } }}
         >
-          <MenuIcon />
+          {isSidebarOpen ? <XCircleIcon /> : <MenuIcon />}
         </div>
       </div>
       <header
@@ -146,13 +134,14 @@ export const PageContainer = ({ children, header, title }: PageContainerProps) =
           minWidth: 0, // fix flex text truncation
           paddingLeft: spacing.xlarge,
           paddingRight: spacing.xlarge,
+          visibility: isSidebarOpen ? 'hidden' : 'visible',
         }}
       >
         <title>{title ? `Keystone - ${title}` : 'Keystone'}</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         {header}
       </header>
-      <Sidebar isSidebarOpen={isSidebarOpen} setIsSidebarOpen={setIsSidebarOpen}>
+      <Sidebar isSidebarOpen={isSidebarOpen}>
         <Navigation />
       </Sidebar>
       <Content>{children}</Content>