Make left-panel scrollable.

hurley87 · May 10, 2016 · a6424b1 · a6424b1
1 parent f9046d2
commit a6424b1
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 12 deletions.
diff --git a/dist/manager.js b/dist/manager.js
diff --git a/dist/manager.js.map b/dist/manager.js.map
diff --git a/src/client/manager/modules/ui/components/left_panel/index.js b/src/client/manager/modules/ui/components/left_panel/index.js
@@ -4,21 +4,28 @@ import Stories from './stories';
 import TextFilter from './text_filter';
 import pick from 'lodash.pick';
 
+const scrollStyle = {
+  height: '100vh',
+  overflowY: 'auto',
+};
+
 const mainStyle = {
   padding: 20,
 };
 
 const storyProps = ['stories', 'selectedKind', 'selectedStory', 'onSelectStory'];
 
 const LeftPanel = (props) => (
-  <div style={mainStyle}>
-    <Header openShortcutsHelp={props.openShortcutsHelp} />
-    <TextFilter
-      text={props.storyFilter}
-      onClear={() => props.onStoryFilter('')}
-      onChange={(text) => props.onStoryFilter(text)}
-    />
-    {props.stories ? (<Stories {...pick(props, storyProps)} />) : null}
+  <div style={scrollStyle}>
+    <div style={mainStyle}>
+      <Header openShortcutsHelp={props.openShortcutsHelp} />
+      <TextFilter
+        text={props.storyFilter}
+        onClear={() => props.onStoryFilter('')}
+        onChange={(text) => props.onStoryFilter(text)}
+      />
+      {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 = {
-  overflowY: 'auto',
   marginTop: 10,
   ...baseFonts,
 };