From 12cbc18f8df705d026c16229b19b43aa6de2b8fd Mon Sep 17 00:00:00 2001
From: kohakukun <paraprogramar@gmail.com>
Date: Wed, 1 May 2019 02:33:48 +0200
Subject: [PATCH] fix: Preserve dimensions on resizing for panel

- Update resizer position when changing the boundaries of the container
for the addon panel and preview
---
 lib/ui/src/components/layout/container.js | 26 ++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/lib/ui/src/components/layout/container.js b/lib/ui/src/components/layout/container.js
index 7f39d8a3d26..d053f03ca83 100644
--- a/lib/ui/src/components/layout/container.js
+++ b/lib/ui/src/components/layout/container.js
@@ -1,3 +1,5 @@
+/* eslint-disable react/no-did-update-set-state */
+
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { styled, withTheme } from '@storybook/theming';
@@ -285,13 +287,35 @@ class Layout extends Component {
     };
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps, prevState) {
     const { resizerPanel, resizerNav } = this.state;
 
     persistance.set({
       resizerPanel,
       resizerNav,
     });
+    const { width: prevWidth, height: prevHeight } = prevProps.bounds;
+    const { bounds, options } = this.props;
+    const { width, height } = bounds;
+    if (width !== prevWidth || height !== prevHeight) {
+      const { panelPosition } = options;
+      const isPanelBottom = panelPosition === 'bottom';
+      if (isPanelBottom) {
+        this.setState({
+          resizerPanel: {
+            x: prevState.resizerPanel.x,
+            y: prevState.resizerPanel.y - (prevHeight - height),
+          },
+        });
+      } else {
+        this.setState({
+          resizerPanel: {
+            x: prevState.resizerPanel.x - (prevWidth - width),
+            y: prevState.resizerPanel.y,
+          },
+        });
+      }
+    }
   }
 
   static getDerivedStateFromProps(props, state) {