Make left panel stories scrollable (#182)

storybookjs · May 10, 2016 · d8947c1 · d8947c1
1 parent 08af02e
commit d8947c1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/src/client/manager/modules/ui/components/left_panel/index.js b/src/client/manager/modules/ui/components/left_panel/index.js
@@ -5,7 +5,8 @@ import TextFilter from './text_filter';
 import pick from 'lodash.pick';
 
 const scrollStyle = {
-  height: '100vh',
+  height: 'calc(100vh - 105px)',
+  marginTop: 10,
   overflowY: 'auto',
 };
 
@@ -16,14 +17,14 @@ const mainStyle = {
 const storyProps = ['stories', 'selectedKind', 'selectedStory', 'onSelectStory'];
 
 const LeftPanel = (props) => (
-  <div style={scrollStyle}>
-    <div style={mainStyle}>
-      <Header openShortcutsHelp={props.openShortcutsHelp} />
-      <TextFilter
-        text={props.storyFilter}
-        onClear={() => props.onStoryFilter('')}
-        onChange={(text) => props.onStoryFilter(text)}
-      />
+  <div style={mainStyle}>
+    <Header openShortcutsHelp={props.openShortcutsHelp} />
+    <TextFilter
+      text={props.storyFilter}
+      onClear={() => props.onStoryFilter('')}
+      onChange={(text) => props.onStoryFilter(text)}
+    />
+    <div style={scrollStyle}>
       {props.stories ? (<Stories {...pick(props, storyProps)} />) : null}
     </div>
   </div>

diff --git a/src/client/manager/modules/ui/components/left_panel/stories.js b/src/client/manager/modules/ui/components/left_panel/stories.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { baseFonts } from '../theme';
 
 const listStyle = {
-  marginTop: 10,
   ...baseFonts,
 };