fix: sidebar width inherit

ccontrols · Jun 7, 2020 · 05bed2d · 05bed2d
1 parent da26a05
commit 05bed2d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/ui/app-components/src/Sidebar/Sidebar.tsx b/ui/app-components/src/Sidebar/Sidebar.tsx
@@ -76,6 +76,7 @@ export const Sidebar: FC<SidebarProps & BoxProps> = ({
         sx={{
           position: !responsive ? 'fixed' : undefined,
           height: '100%',
+          width: 'inherit',
           overflowY: 'auto',
           a: {
             '&.active': {

diff --git a/ui/app/src/Page/Page.tsx b/ui/app/src/Page/Page.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC, ReactNode, useRef } from 'react';
-import { jsx, Container, Flex } from 'theme-ui';
+import { jsx, Box, Flex } from 'theme-ui';
 import * as qs from 'qs';
 import { Tabs, Tab, TabList, TabPanel } from '@component-controls/components';
 import { PageContainer, useStoryContext } from '@component-controls/blocks';
@@ -32,7 +32,7 @@ export const BasePage: FC<PageProps> = ({ pagesFn }) => {
   return (
     <Flex sx={{ flexDirection: 'row', flex: 1 }}>
       <Sidebar />
-      <Container sx={{ flex: 1 }} id="content">
+      <Box sx={{ flex: 1 }} id="content">
         <Tabs
           fontSize={16}
           selectedIndex={tabIndex}
@@ -58,14 +58,14 @@ export const BasePage: FC<PageProps> = ({ pagesFn }) => {
             </TabList>
           )}
 
-          <PageContainer maxWidth={1200} ref={pageRef}>
+          <PageContainer maxWidth="1200px" ref={pageRef}>
             {pages &&
               pages.map(page => (
                 <TabPanel key={`panel_${page.key}`}>{page.render()}</TabPanel>
               ))}
           </PageContainer>
         </Tabs>
-      </Container>
+      </Box>
       <SideContext pageRef={pageRef} />
     </Flex>
   );

diff --git a/ui/components/src/Tabs/Tabs.tsx b/ui/components/src/Tabs/Tabs.tsx
@@ -32,7 +32,13 @@ interface TabsContainerProps {
   fontSize?: number | string;
 }
 const TabsContainer = styled.div`
-  ${({ theme, fontSize = 13 }: { theme?: Theme } & TabsContainerProps) => `
+  ${({
+    theme,
+    _fontSize = 13,
+  }: {
+    theme?: Theme;
+    _fontSize?: number | string;
+  }) => `
     .react-tabs {
       -webkit-tap-highlight-color: transparent;
     }
@@ -41,7 +47,9 @@ const TabsContainer = styled.div`
       padding: 0;
     }
     .react-tabs__tab {
-      font-size: ${typeof fontSize === 'string' ? fontSize : `${fontSize}px`};
+      font-size: ${
+        typeof _fontSize === 'string' ? _fontSize : `${_fontSize}px`
+      };
       font-weight: bold;
       display: inline-block;
       border-bottom: none;
@@ -86,13 +94,14 @@ const TabsContainer = styled.div`
 `;
 
 type OwnTabsProps = TabsContainerProps & Omit<TabsProps, 'ref'>;
+
 /**
  * Create tabs and multi-page ui layouts. Uses [react-tabs](https://reactcommunity.org/react-tabs/) component.
  *
  */
 export const Tabs: FC<OwnTabsProps> = ({ fontSize, ...props }) => {
   return (
-    <TabsContainer fontSize={fontSize}>
+    <TabsContainer _fontSize={fontSize}>
       <OriginalTabs {...props} />
     </TabsContainer>
   );