Fix stories scroll

storybookjs · Apr 7, 2016 · 33e0a85 · 33e0a85
1 parent 72bdc26
commit 33e0a85
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 18 deletions.
diff --git a/dist/client/ui/controls.js b/dist/client/ui/controls.js
@@ -154,10 +154,19 @@ var StorybookControls = function (_React$Component) {
       var kindNames = this.getKindNames();
       var mainStyle = {
         fontFamily: '\n        -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",\n        "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif\n      ',
-        padding: '20px 10px 10px 10px',
         color: '#444'
       };
 
+      var h1WrapStyle = {
+        background: '#F7F7F7',
+        borderBottom: '1px solid #EEE',
+        paddingBottom: '20px',
+        position: 'absolute',
+        top: '20px',
+        right: '10px',
+        left: '20px'
+      };
+
       var h1Style = {
         textTransform: 'uppercase',
         letterSpacing: '3.5px',
@@ -168,21 +177,34 @@ var StorybookControls = function (_React$Component) {
         textAlign: 'center',
         borderRadius: '2px',
         padding: '5px',
-        margin: '0 0 20px 0',
-        cursor: 'default'
+        cursor: 'default',
+        margin: 0
+      };
+
+      var listStyle = {
+        overflowY: 'auto',
+        position: 'absolute',
+        top: '68px',
+        right: '10px',
+        bottom: 0,
+        left: '20px'
       };
 
       return _react2.default.createElement(
         'div',
         { style: mainStyle },
         _react2.default.createElement(
-          'h3',
-          { style: h1Style },
-          'React Storybook'
+          'div',
+          { style: h1WrapStyle },
+          _react2.default.createElement(
+            'h3',
+            { style: h1Style },
+            'React Storybook'
+          )
         ),
         _react2.default.createElement(
           'div',
-          null,
+          { style: listStyle },
           kindNames.map(this.renderKind.bind(this))
         )
       );

diff --git a/dist/client/ui/layout.js b/dist/client/ui/layout.js
@@ -65,10 +65,9 @@ var Layout = function (_React$Component) {
       };
 
       var controlsStyle = {
-        height: '100%',
-        overflowY: 'auto',
-        padding: '5px 0 5px 10px',
-        boxSizing: 'border-box'
+        position: 'absolute',
+        width: '100%',
+        height: '100%'
       };
 
       var actionStyle = {

diff --git a/src/client/ui/controls.js b/src/client/ui/controls.js
@@ -97,10 +97,19 @@ export default class StorybookControls extends React.Component {
         -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",
         "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif
       `,
-      padding: '20px 10px 10px 10px',
       color: '#444',
     };
 
+    const h1WrapStyle = {
+      background: '#F7F7F7',
+      borderBottom: '1px solid #EEE',
+      paddingBottom: '20px',
+      position: 'absolute',
+      top: '20px',
+      right: '10px',
+      left: '20px',
+    };
+
     const h1Style = {
       textTransform: 'uppercase',
       letterSpacing: '3.5px',
@@ -111,14 +120,25 @@ export default class StorybookControls extends React.Component {
       textAlign: 'center',
       borderRadius: '2px',
       padding: '5px',
-      margin: '0 0 20px 0',
       cursor: 'default',
+      margin: 0,
+    };
+
+    const listStyle = {
+      overflowY: 'auto',
+      position: 'absolute',
+      top: '68px',
+      right: '10px',
+      bottom: 0,
+      left: '20px',
     };
 
     return (
       <div style={mainStyle}>
-        <h3 style={h1Style}>React Storybook</h3>
-        <div>
+        <div style={h1WrapStyle}>
+          <h3 style={h1Style}>React Storybook</h3>
+        </div>
+        <div style={listStyle}>
           {kindNames.map(this.renderKind.bind(this))}
         </div>
       </div>

diff --git a/src/client/ui/layout.js b/src/client/ui/layout.js
@@ -14,10 +14,9 @@ class Layout extends React.Component {
     };
 
     const controlsStyle = {
+      position: 'absolute',
+      width: '100%',
       height: '100%',
-      overflowY: 'auto',
-      padding: '5px 0 5px 10px',
-      boxSizing: 'border-box',
     };
 
     const actionStyle = {