fix: wrap tool browser in a flex element, fix layout issues on smalle…

…r breakpoints
sanity-io · May 4, 2022 · 20b1877 · 20b1877
1 parent 7f67460
commit 20b1877
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 17 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,4 +1,12 @@
-import {Box, Portal, PortalProvider, studioTheme, ThemeProvider, ToastProvider} from '@sanity/ui'
+import {
+  Box,
+  Flex,
+  Portal,
+  PortalProvider,
+  studioTheme,
+  ThemeProvider,
+  ToastProvider
+} from '@sanity/ui'
 import {AssetSourceComponentProps} from '@types'
 import React, {FC, forwardRef, MouseEvent, Ref} from 'react'
 import {ThemeProvider as LegacyThemeProvider} from 'theme-ui'
@@ -36,9 +44,9 @@ const AssetBrowser: FC<Props> = forwardRef((props: Props, ref: Ref<HTMLDivElemen
                 <GlobalStyle />
 
                 {!onClose ? (
-                  <Box ref={ref} style={{background: 'red', height: '100%', position: 'relative'}}>
+                  <Flex direction="column" ref={ref}>
                     <Browser />
-                  </Box>
+                  </Flex>
                 ) : (
                   <Portal>
                     <Box

diff --git a/src/components/Browser/index.tsx b/src/components/Browser/index.tsx
@@ -94,19 +94,8 @@ const Browser: FC<Props> = (props: Props) => {
       <Dialogs />
       <Notifications />
 
-      <Card
-        style={{
-          height: '100%',
-          minHeight: '100%'
-        }}
-      >
-        <Flex
-          direction="column"
-          style={{
-            height: '100%',
-            minHeight: '100%'
-          }}
-        >
+      <Card display="flex" height="fill">
+        <Flex direction="column" flex={1}>
           {/* Header */}
           <Header onClose={onClose} />
 
@@ -118,7 +107,6 @@ const Browser: FC<Props> = (props: Props) => {
               <PickedBar />
               <Items />
             </Flex>
-
             <TagsPanel />
           </Flex>