diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss
index 3fea0f7c5..27d80a3d7 100644
--- a/frontend/resources/styles/main/partials/sidebar.scss
+++ b/frontend/resources/styles/main/partials/sidebar.scss
@@ -6,6 +6,7 @@
 // Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 $width-settings-bar: 15rem;
+  // This width is also used in update-viewport-size at frontend/src/uxbox/main/data/workspace.cljs
 
 .settings-bar {
   background-color: $color-gray-50;
diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs
index 54bc1e44a..febfcfa85 100644
--- a/frontend/src/uxbox/main/data/workspace.cljs
+++ b/frontend/src/uxbox/main/data/workspace.cljs
@@ -221,7 +221,7 @@
               (cond
                 (or (not (mth/finite? (:width srect)))
                     (not (mth/finite? (:height srect))))
-                (assoc local :vbox (assoc size :x 0 :y 0))
+                (assoc local :vbox (assoc size :x 0 :y 0 :left-offset 0))
 
                 (or (> (:width srect) width)
                     (> (:height srect) height))
@@ -267,15 +267,17 @@
     ptk/UpdateEvent
     (update [_ state]
       (update state :workspace-local
-              (fn [{:keys [vbox vport] :as local}]
+              (fn [{:keys [vbox vport left-sidebar? zoom] :as local}]
                 (let [wprop (/ (:width vport) width)
-                      hprop (/ (:height vport) height)]
-                  (-> local
-                      (assoc :vport size)
+                      hprop (/ (:height vport) height)
+                      left-offset (if left-sidebar? 0 (/ (* -1 15 16) zoom))]
+                  (-> local                           ;; This matches $width-settings-bar
+                      (assoc :vport size)             ;; in frontend/resources/styles/main/partials/sidebar.scss
                       (update :vbox (fn [vbox]
                                       (-> vbox
                                           (update :width #(/ % wprop))
-                                          (update :height #(/ % hprop))))))))))))
+                                          (update :height #(/ % hprop))
+                                          (assoc :left-offset left-offset)))))))))))
 
 ;; ---
 
diff --git a/frontend/src/uxbox/main/ui/workspace/rules.cljs b/frontend/src/uxbox/main/ui/workspace/rules.cljs
index 160ef7bf8..58cb9e34b 100644
--- a/frontend/src/uxbox/main/ui/workspace/rules.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/rules.cljs
@@ -91,7 +91,7 @@
          (draw-rule! dctx {:zoom zoom
                            :type :horizontal
                            :size width
-                           :start (:x vbox)}))))
+                           :start (+ (:x vbox) (:left-offset vbox))}))))
 
     [:canvas.horizontal-rule
      {:ref canvas
diff --git a/frontend/src/uxbox/main/ui/workspace/viewport.cljs b/frontend/src/uxbox/main/ui/workspace/viewport.cljs
index 91fca0e54..a891c2dcd 100644
--- a/frontend/src/uxbox/main/ui/workspace/viewport.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/viewport.cljs
@@ -381,41 +381,37 @@
                 prnt (dom/get-parent node)]
             (st/emit! (dw/update-viewport-size (dom/get-client-size prnt)))))
 
-        on-mount
-        (fn []
-          (let [node (mf/ref-val viewport-ref)
-                prnt (dom/get-parent node)
-
-                key1 (events/listen js/document EventType.KEYDOWN on-key-down)
-                key2 (events/listen js/document EventType.KEYUP on-key-up)
-                key3 (events/listen node EventType.MOUSEMOVE on-mouse-move)
-                ;; bind with passive=false to allow the event to be cancelled
-                ;; https://stackoverflow.com/a/57582286/3219895
-                key4 (events/listen js/window EventType.WHEEL on-mouse-wheel #js {:passive false})
-                key5 (events/listen js/window EventType.RESIZE on-resize)]
-
-            (st/emit! (dw/initialize-viewport (dom/get-client-size prnt)))
-
-            (fn []
-              (events/unlistenByKey key1)
-              (events/unlistenByKey key2)
-              (events/unlistenByKey key3)
-              (events/unlistenByKey key4)
-              (events/unlistenByKey key5)
-              )))
-
         options (mf/deref refs/workspace-page-options)]
 
-    (mf/use-effect on-mount)
-    (mf/use-effect (mf/deps layout) on-resize)
+    (mf/use-layout-effect
+     (fn []
+       (let [node (mf/ref-val viewport-ref)
+             prnt (dom/get-parent node)
+
+             key1 (events/listen js/document EventType.KEYDOWN on-key-down)
+             key2 (events/listen js/document EventType.KEYUP on-key-up)
+             key3 (events/listen node EventType.MOUSEMOVE on-mouse-move)
+             ;; bind with passive=false to allow the event to be cancelled
+             ;; https://stackoverflow.com/a/57582286/3219895
+             key4 (events/listen js/window EventType.WHEEL on-mouse-wheel #js {:passive false})
+             key5 (events/listen js/window EventType.RESIZE on-resize)]
+         (st/emit! (dw/initialize-viewport (dom/get-client-size prnt)))
+         (fn []
+           (events/unlistenByKey key1)
+           (events/unlistenByKey key2)
+           (events/unlistenByKey key3)
+           (events/unlistenByKey key4)
+           (events/unlistenByKey key5)))))
+
+    (mf/use-layout-effect (mf/deps layout) on-resize)
 
     [:svg.viewport
      {:preserveAspectRatio "xMidYMid meet"
       :width (:width vport 0)
       :height (:height vport 0)
-      :view-box (str/join " " [(:x vbox 0)
+      :view-box (str/join " " [(+ (:x vbox 0) (:left-offset vbox 0))
                                (:y vbox 0)
-                               (:width vbox 0 )
+                               (:width vbox 0)
                                (:height vbox 0)])
       :ref viewport-ref
       :class (when drawing-tool "drawing")