Remember width of down panel when it's displayed on right 🎨

- fix a typo error in example readme

packages/storybook-ui/example/README.md

@@ -20,7 +20,7 @@ npm install
 
 ### Running the App
 
-Run the app with `npm start`. Then you'll be able to a cess the app via <http://localhost:9999>.
+Run the app with `npm start`. Then you'll be able to access the app via <http://localhost:9999>.
 
 Once you made a change to the example app or in the root module, the client app will reload again.
 

packages/storybook-ui/src/modules/ui/components/layout/index.js

@@ -68,20 +68,20 @@ const onDragEnd = function() {
   document.body.classList.remove('dragging');
 };
 
-const saveHeightPanel = h => {
+const savePanelPosition = (downPanelInRight, pos) => {
   try {
-    localStorage.setItem('splitPos', h);
+    localStorage.setItem(downPanelInRight ? 'verticalSplitPos' : 'horizontalSplitPos', pos);
     return true;
   } catch (e) {
     return false;
   }
 };
 
-const getSavedHeight = h => {
+const getSavedPosition = (downPanelInRight, pos) => {
   try {
-    return localStorage.getItem('splitPos');
+    return localStorage.getItem(downPanelInRight ? 'verticalSplitPos' : 'horizontalSplitPos');
   } catch (e) {
-    return h;
+    return pos;
   }
 };
 
@@ -143,7 +143,7 @@ class Layout extends React.Component {
     }
 
     // Get the value from localStorage or user downPanelDefaultSize
-    downPanelDefaultSize = getSavedHeight(downPanelDefaultSize);
+    downPanelDefaultSize = getSavedPosition(downPanelInRight, downPanelDefaultSize);
 
     return (
       <div style={rootStyle}>
@@ -168,8 +168,8 @@ class Layout extends React.Component {
             resizerChildren={downPanelInRight ? vsplit : hsplit}
             onDragStarted={onDragStart}
             onDragFinished={onDragEnd}
-            onChange={size => {
-              saveHeightPanel(size);
+            onChange={position => {
+              savePanelPosition(downPanelInRight, position);
               this.onResize();
             }}
           >