From 4106f154502887980664246c8db6c0f942b6c104 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Fri, 22 Jan 2021 23:58:34 -0800
Subject: [PATCH] fix: Content jump when leaving edit mode

---
 app/components/Layout.js          | 3 ++-
 app/components/Sidebar/Sidebar.js | 4 ++++
 app/stores/UiStore.js             | 6 ++++++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/components/Layout.js b/app/components/Layout.js
index 6a2c5957b..8db6aeb7d 100644
--- a/app/components/Layout.js
+++ b/app/components/Layout.js
@@ -141,6 +141,7 @@ class Layout extends React.Component<Props> {
           <Content
             auto
             justify="center"
+            $isResizing={ui.sidebarIsResizing}
             $sidebarCollapsed={sidebarCollapsed}
             style={
               sidebarCollapsed
@@ -192,7 +193,7 @@ const MobileMenuButton = styled(Button)`
 const Content = styled(Flex)`
   margin: 0;
   transition: ${(props) =>
-    props.$sidebarCollapsed ? `margin-left 100ms ease-out` : "none"};
+    props.$isResizing ? "none" : `margin-left 100ms ease-out`};
 
   @media print {
     margin: 0;
diff --git a/app/components/Sidebar/Sidebar.js b/app/components/Sidebar/Sidebar.js
index b3cd91b6d..79e4d3d03 100644
--- a/app/components/Sidebar/Sidebar.js
+++ b/app/components/Sidebar/Sidebar.js
@@ -111,6 +111,10 @@ function Sidebar({ location, children }: Props) {
     ui.setSidebarWidth(theme.sidebarWidth);
   }, [ui, theme.sidebarWidth]);
 
+  React.useEffect(() => {
+    ui.setSidebarResizing(isResizing);
+  }, [ui, isResizing]);
+
   React.useEffect(() => {
     if (location !== previousLocation) {
       ui.hideMobileSidebar();
diff --git a/app/stores/UiStore.js b/app/stores/UiStore.js
index d5c702e26..859022af0 100644
--- a/app/stores/UiStore.js
+++ b/app/stores/UiStore.js
@@ -26,6 +26,7 @@ class UiStore {
   @observable mobileSidebarVisible: boolean = false;
   @observable sidebarWidth: number;
   @observable sidebarCollapsed: boolean = false;
+  @observable sidebarIsResizing: boolean = false;
   @observable toasts: Map<string, Toast> = new Map();
   lastToastId: string;
 
@@ -97,6 +98,11 @@ class UiStore {
     }
   };
 
+  @action
+  setSidebarResizing = (sidebarIsResizing: boolean): void => {
+    this.sidebarIsResizing = sidebarIsResizing;
+  };
+
   @action
   setActiveCollection = (collection: Collection): void => {
     this.activeCollectionId = collection.id;