CLEANUP no extra div in Bar && FIX sometimes sqaushed Bar

storybookjs · Feb 27, 2019 · 2b597ff · 2b597ff
1 parent 03c9b04
commit 2b597ff
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/lib/components/src/bar/bar.js b/lib/components/src/bar/bar.js
@@ -31,11 +31,12 @@ const Side = styled.div(
 );
 Side.displayName = 'Side';
 
-export const Bar = styled.div(
+export const Bar = styled(props => <ScrollArea horizontal {...props} />)(
   ({ theme }) => ({
     color: theme.barTextColor,
     width: '100%',
     height: 40,
+    flexShrink: 0,
   }),
 
   ({ theme, border }) =>
@@ -53,19 +54,18 @@ const BarInner = styled.div({
   justifyContent: 'space-between',
   position: 'relative',
   flexWrap: 'nowrap',
+  flexShrink: 0,
   height: 40,
 });
 
 export const FlexBar = ({ children, ...rest }) => {
   const [left, right] = Children.toArray(children);
   return (
     <Bar {...rest}>
-      <ScrollArea horizontal>
-        <BarInner>
-          <Side left>{left}</Side>
-          {right ? <Side right>{right}</Side> : null}
-        </BarInner>
-      </ScrollArea>
+      <BarInner>
+        <Side left>{left}</Side>
+        {right ? <Side right>{right}</Side> : null}
+      </BarInner>
     </Bar>
   );
 };