From bc728708e727c9d299046c2fa4e6944eeabb3ee2 Mon Sep 17 00:00:00 2001
From: Peter Ward <pete@pennyblack.io>
Date: Tue, 12 Nov 2024 23:58:16 +0000
Subject: [PATCH] Fix centering of canvas with respect to left sidebar (#627)

* 618 Fix centering of canvas with respect to left sidebar

* f
---
 .../__snapshots__/Designer.test.tsx.snap      | 1016 +++++++++--------
 .../src/components/Designer/LeftSidebar.tsx   |    4 +-
 packages/ui/src/components/Designer/index.tsx |  116 +-
 packages/ui/src/constants.ts                  |    2 +
 4 files changed, 575 insertions(+), 563 deletions(-)

diff --git a/packages/ui/__tests__/components/__snapshots__/Designer.test.tsx.snap b/packages/ui/__tests__/components/__snapshots__/Designer.test.tsx.snap
index 6150f5c3..939fd422 100644
--- a/packages/ui/__tests__/components/__snapshots__/Designer.test.tsx.snap
+++ b/packages/ui/__tests__/components/__snapshots__/Designer.test.tsx.snap
@@ -7,88 +7,6 @@ exports[`Designer snapshot 1`] = `
   <div
     style="margin: 0px auto; width: 1200px; height: 1200px;"
   >
-    <div
-      style="position: absolute; bottom: 6%; width: 800px;"
-    >
-      <div
-        style="display: flex; align-items: center; justify-content: space-evenly; position: relative; z-index: 1; left: calc(50% - 75px); width: 150px; height: 40px; box-sizing: border-box; padding: 12px; border-radius: 6px; background-color: rgba(0, 0, 0, 0.45);"
-      >
-        <div
-          style="display: flex; align-items: center;"
-        >
-          <button
-            class="ant-btn css-dev-only-do-not-override-apn68 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
-            type="button"
-          >
-            <span
-              class="ant-btn-icon"
-            >
-              <span
-                aria-label="minus"
-                class="anticon anticon-minus"
-                role="img"
-                style="color: rgb(255, 255, 255);"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="minus"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-          <span
-            class="ant-typography css-dev-only-do-not-override-apn68"
-            style="color: rgb(255, 255, 255); font-size: 14px; margin: 8px;"
-          >
-            <strong>
-              100
-              %
-            </strong>
-          </span>
-          <button
-            class="ant-btn css-dev-only-do-not-override-apn68 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
-            type="button"
-          >
-            <span
-              class="ant-btn-icon"
-            >
-              <span
-                aria-label="plus"
-                class="anticon anticon-plus"
-                role="img"
-                style="color: rgb(255, 255, 255);"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="plus"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-                  />
-                  <path
-                    d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
     <div
       style="left: 0px; right: 0px; position: absolute; z-index: 1; height: 0px; width: 45px; background: rgb(245, 245, 245); text-align: center; overflow: auto;"
     >
@@ -197,479 +115,565 @@ exports[`Designer snapshot 1`] = `
       </div>
     </div>
     <div
-      style="position: absolute; right: 0px; z-index: 1; height: 100%; width: 400px;"
+      style="position: absolute; width: 1155px; margin-left: 45px;"
     >
-      <div>
-        <button
-          class="ant-btn css-dev-only-do-not-override-apn68 ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only"
-          style="position: absolute; display: flex; align-items: center; justify-content: center; top: 1rem; right: 1rem; z-index: 100;"
-          type="button"
-        >
-          <span
-            class="ant-btn-icon"
-          >
-            <span
-              aria-label="arrow-right"
-              class="anticon anticon-arrow-right"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="arrow-right"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 000-48.4z"
-                />
-              </svg>
-            </span>
-          </span>
-        </button>
+      <div
+        style="position: absolute; bottom: 6%; width: 755px;"
+      >
         <div
-          style="width: 400px; height: 100%; display: block; top: 0px; right: 0px; position: absolute; padding: 0.7rem 1rem; overflow-y: auto; font-family: 'Open Sans', sans-serif; box-sizing: border-box; background: rgb(245, 245, 245);"
+          style="display: flex; align-items: center; justify-content: space-evenly; position: relative; z-index: 1; left: calc(50% - 75px); width: 150px; height: 40px; box-sizing: border-box; padding: 12px; border-radius: 6px; background-color: rgba(0, 0, 0, 0.45);"
         >
-          <div>
-            <div>
-              <div
-                style="height: 40px; display: flex; align-items: center;"
+          <div
+            style="display: flex; align-items: center;"
+          >
+            <button
+              class="ant-btn css-dev-only-do-not-override-apn68 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
+              type="button"
+            >
+              <span
+                class="ant-btn-icon"
               >
                 <span
-                  class="ant-typography css-dev-only-do-not-override-apn68"
-                  style="text-align: center; width: 100%;"
+                  aria-label="minus"
+                  class="anticon anticon-minus"
+                  role="img"
+                  style="color: rgb(255, 255, 255);"
                 >
-                  <strong>
-                    Field List
-                  </strong>
-                </span>
-              </div>
-              <div
-                class="ant-divider css-dev-only-do-not-override-apn68 ant-divider-horizontal"
-                role="separator"
-                style="margin-top: 8px; margin-bottom: 8px;"
-              />
-              <div
-                style="height: 1085px;"
-              >
-                <div
-                  style="height: 100%; overflow-y: auto;"
-                >
-                  <ul
-                    style="margin: 0px; padding: 0px; list-style: none; border-radius: 5px;"
+                  <svg
+                    aria-hidden="true"
+                    data-icon="minus"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
                   >
-                    <li
-                      style="margin-top: 10px; transform: translate(0px, 0px) scale(1, 1);"
-                    >
-                      <div
-                        style="display: flex; align-items: center; cursor: pointer; border: 1px solid transparent;"
-                      >
-                        <button
-                          class="ant-btn css-dev-only-do-not-override-apn68 ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only"
-                          style="display: flex; align-items: center; background: none; box-shadow: none; padding-left: 0.25rem;"
-                          type="button"
-                        >
-                          <span
-                            class="ant-btn-icon"
-                          >
-                            <span
-                              aria-label="holder"
-                              class="anticon anticon-holder"
-                              role="img"
-                              style="cursor: grab;"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                data-icon="holder"
-                                fill="currentColor"
-                                focusable="false"
-                                height="1em"
-                                viewBox="64 64 896 896"
-                                width="1em"
-                              >
-                                <path
-                                  d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"
-                                />
-                              </svg>
-                            </span>
-                          </span>
-                        </button>
-                        <div
-                          style="width: 20px; margin-right: 0.5rem; color: rgba(0, 0, 0, 0.88); display: flex; justify-content: center;"
-                          title="text"
-                        >
-                          <svg
-                            class="lucide lucide-text-cursor-input"
-                            fill="none"
-                            height="20"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            viewBox="0 0 24 24"
-                            width="20"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M5 4h1a3 3 0 0 1 3 3 3 3 0 0 1 3-3h1"
-                            />
-                            <path
-                              d="M13 20h-1a3 3 0 0 1-3-3 3 3 0 0 1-3 3H5"
-                            />
-                            <path
-                              d="M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"
-                            />
-                            <path
-                              d="M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"
-                            />
-                            <path
-                              d="M9 7v10"
-                            />
-                          </svg>
-                        </div>
-                        <span
-                          class="ant-typography css-dev-only-do-not-override-apn68"
-                          style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%;"
-                          title="Edit"
-                        >
-                          field1
-                        </span>
-                      </div>
-                    </li>
-                    <li
-                      style="margin-top: 10px; transform: translate(0px, 0px) scale(1, 1);"
-                    >
-                      <div
-                        style="display: flex; align-items: center; cursor: pointer; border: 1px solid transparent;"
-                      >
-                        <button
-                          class="ant-btn css-dev-only-do-not-override-apn68 ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only"
-                          style="display: flex; align-items: center; background: none; box-shadow: none; padding-left: 0.25rem;"
-                          type="button"
-                        >
-                          <span
-                            class="ant-btn-icon"
-                          >
-                            <span
-                              aria-label="holder"
-                              class="anticon anticon-holder"
-                              role="img"
-                              style="cursor: grab;"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                data-icon="holder"
-                                fill="currentColor"
-                                focusable="false"
-                                height="1em"
-                                viewBox="64 64 896 896"
-                                width="1em"
-                              >
-                                <path
-                                  d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"
-                                />
-                              </svg>
-                            </span>
-                          </span>
-                        </button>
-                        <div
-                          style="width: 20px; margin-right: 0.5rem; color: rgba(0, 0, 0, 0.88); display: flex; justify-content: center;"
-                          title="image"
-                        >
-                          <svg
-                            class="lucide lucide-image"
-                            fill="none"
-                            height="20"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            viewBox="0 0 24 24"
-                            width="20"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <rect
-                              height="18"
-                              rx="2"
-                              ry="2"
-                              width="18"
-                              x="3"
-                              y="3"
-                            />
-                            <circle
-                              cx="9"
-                              cy="9"
-                              r="2"
-                            />
-                            <path
-                              d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
-                            />
-                          </svg>
-                        </div>
-                        <span
-                          class="ant-typography css-dev-only-do-not-override-apn68"
-                          style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%;"
-                          title="Edit"
-                        >
-                          field2
-                        </span>
-                      </div>
-                    </li>
-                  </ul>
+                    <path
+                      d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+            <span
+              class="ant-typography css-dev-only-do-not-override-apn68"
+              style="color: rgb(255, 255, 255); font-size: 14px; margin: 8px;"
+            >
+              <strong>
+                100
+                %
+              </strong>
+            </span>
+            <button
+              class="ant-btn css-dev-only-do-not-override-apn68 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
+              type="button"
+            >
+              <span
+                class="ant-btn-icon"
+              >
+                <span
+                  aria-label="plus"
+                  class="anticon anticon-plus"
+                  role="img"
+                  style="color: rgb(255, 255, 255);"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="plus"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                    />
+                    <path
+                      d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        style="position: absolute; right: 0px; z-index: 1; height: 100%; width: 400px;"
+      >
+        <div>
+          <button
+            class="ant-btn css-dev-only-do-not-override-apn68 ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only"
+            style="position: absolute; display: flex; align-items: center; justify-content: center; top: 1rem; right: 1rem; z-index: 100;"
+            type="button"
+          >
+            <span
+              class="ant-btn-icon"
+            >
+              <span
+                aria-label="arrow-right"
+                class="anticon anticon-arrow-right"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="arrow-right"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 000-48.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+          <div
+            style="width: 400px; height: 100%; display: block; top: 0px; right: 0px; position: absolute; padding: 0.7rem 1rem; overflow-y: auto; font-family: 'Open Sans', sans-serif; box-sizing: border-box; background: rgb(245, 245, 245);"
+          >
+            <div>
+              <div>
+                <div
+                  style="height: 40px; display: flex; align-items: center;"
+                >
+                  <span
+                    class="ant-typography css-dev-only-do-not-override-apn68"
+                    style="text-align: center; width: 100%;"
+                  >
+                    <strong>
+                      Field List
+                    </strong>
+                  </span>
                 </div>
                 <div
-                  id="DndDescribedBy-1"
-                  style="display: none;"
+                  class="ant-divider css-dev-only-do-not-override-apn68 ant-divider-horizontal"
+                  role="separator"
+                  style="margin-top: 8px; margin-bottom: 8px;"
+                />
+                <div
+                  style="height: 1085px;"
                 >
-                  
+                  <div
+                    style="height: 100%; overflow-y: auto;"
+                  >
+                    <ul
+                      style="margin: 0px; padding: 0px; list-style: none; border-radius: 5px;"
+                    >
+                      <li
+                        style="margin-top: 10px; transform: translate(0px, 0px) scale(1, 1);"
+                      >
+                        <div
+                          style="display: flex; align-items: center; cursor: pointer; border: 1px solid transparent;"
+                        >
+                          <button
+                            class="ant-btn css-dev-only-do-not-override-apn68 ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only"
+                            style="display: flex; align-items: center; background: none; box-shadow: none; padding-left: 0.25rem;"
+                            type="button"
+                          >
+                            <span
+                              class="ant-btn-icon"
+                            >
+                              <span
+                                aria-label="holder"
+                                class="anticon anticon-holder"
+                                role="img"
+                                style="cursor: grab;"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  data-icon="holder"
+                                  fill="currentColor"
+                                  focusable="false"
+                                  height="1em"
+                                  viewBox="64 64 896 896"
+                                  width="1em"
+                                >
+                                  <path
+                                    d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"
+                                  />
+                                </svg>
+                              </span>
+                            </span>
+                          </button>
+                          <div
+                            style="width: 20px; margin-right: 0.5rem; color: rgba(0, 0, 0, 0.88); display: flex; justify-content: center;"
+                            title="text"
+                          >
+                            <svg
+                              class="lucide lucide-text-cursor-input"
+                              fill="none"
+                              height="20"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              viewBox="0 0 24 24"
+                              width="20"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M5 4h1a3 3 0 0 1 3 3 3 3 0 0 1 3-3h1"
+                              />
+                              <path
+                                d="M13 20h-1a3 3 0 0 1-3-3 3 3 0 0 1-3 3H5"
+                              />
+                              <path
+                                d="M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"
+                              />
+                              <path
+                                d="M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"
+                              />
+                              <path
+                                d="M9 7v10"
+                              />
+                            </svg>
+                          </div>
+                          <span
+                            class="ant-typography css-dev-only-do-not-override-apn68"
+                            style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%;"
+                            title="Edit"
+                          >
+                            field1
+                          </span>
+                        </div>
+                      </li>
+                      <li
+                        style="margin-top: 10px; transform: translate(0px, 0px) scale(1, 1);"
+                      >
+                        <div
+                          style="display: flex; align-items: center; cursor: pointer; border: 1px solid transparent;"
+                        >
+                          <button
+                            class="ant-btn css-dev-only-do-not-override-apn68 ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only"
+                            style="display: flex; align-items: center; background: none; box-shadow: none; padding-left: 0.25rem;"
+                            type="button"
+                          >
+                            <span
+                              class="ant-btn-icon"
+                            >
+                              <span
+                                aria-label="holder"
+                                class="anticon anticon-holder"
+                                role="img"
+                                style="cursor: grab;"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  data-icon="holder"
+                                  fill="currentColor"
+                                  focusable="false"
+                                  height="1em"
+                                  viewBox="64 64 896 896"
+                                  width="1em"
+                                >
+                                  <path
+                                    d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"
+                                  />
+                                </svg>
+                              </span>
+                            </span>
+                          </button>
+                          <div
+                            style="width: 20px; margin-right: 0.5rem; color: rgba(0, 0, 0, 0.88); display: flex; justify-content: center;"
+                            title="image"
+                          >
+                            <svg
+                              class="lucide lucide-image"
+                              fill="none"
+                              height="20"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              viewBox="0 0 24 24"
+                              width="20"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <rect
+                                height="18"
+                                rx="2"
+                                ry="2"
+                                width="18"
+                                x="3"
+                                y="3"
+                              />
+                              <circle
+                                cx="9"
+                                cy="9"
+                                r="2"
+                              />
+                              <path
+                                d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+                              />
+                            </svg>
+                          </div>
+                          <span
+                            class="ant-typography css-dev-only-do-not-override-apn68"
+                            style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%;"
+                            title="Edit"
+                          >
+                            field2
+                          </span>
+                        </div>
+                      </li>
+                    </ul>
+                  </div>
+                  <div
+                    id="DndDescribedBy-1"
+                    style="display: none;"
+                  >
+                    
     To pick up a draggable item, press the space bar.
     While dragging, use the arrow keys to move the item.
     Press space again to drop the item in its new position, or press escape to cancel.
   
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-live="assertive"
-                  id="DndLiveRegion-0"
-                  role="status"
-                  style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
-                />
-                <div
-                  style="padding-top: 0.5rem; display: flex; align-items: center; justify-content: flex-end;"
-                >
-                  <button
-                    class="ant-btn css-dev-only-do-not-override-apn68 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm"
-                    type="button"
+                  </div>
+                  <div
+                    aria-atomic="true"
+                    aria-live="assertive"
+                    id="DndLiveRegion-0"
+                    role="status"
+                    style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+                  />
+                  <div
+                    style="padding-top: 0.5rem; display: flex; align-items: center; justify-content: flex-end;"
                   >
-                    <u>
-                       
-                      Bulk update field names
-                    </u>
-                  </button>
+                    <button
+                      class="ant-btn css-dev-only-do-not-override-apn68 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm"
+                      type="button"
+                    >
+                      <u>
+                         
+                        Bulk update field names
+                      </u>
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div
-      style="position: relative; overflow: auto; margin-right: 400px; width: 800px; height: 1200px;"
-    >
       <div
-        class="selecto-selection rCS179bs95 pdfme-selecto"
-        style="background-color: rgb(22, 119, 255); opacity: 0.75; border-color: #91caff;"
-      />
-      <div
-        style="transform: scale(1); transform-origin: top left; height: 1px; width: 1px;"
+        style="position: relative; overflow: auto; margin-right: 400px; width: 755px; height: 1200px;"
       >
         <div
-          style="font-family: 'Roboto'; top: 30px; left: 30px; position: relative; background-image: url(data:image/png;base64,a...); background-size: 793.700787411px 1122.5196850527px; width: 793.700787411px; height: 1122.5196850527px;"
+          class="selecto-selection rCS179bs95 pdfme-selecto"
+          style="background-color: rgb(22, 119, 255); opacity: 0.75; border-color: #91caff;"
+        />
+        <div
+          style="transform: scale(1); transform-origin: top left; height: 1px; width: 1px;"
         >
           <div
-            class="ruler-container"
-            style="position: absolute; top: -30px; left: -30px; height: 30px; width: 30px; background: rgb(51, 51, 51);"
-          />
-          <div
-            class="scena-manager scena-horizontal  rCS1dv2ewo"
-            data-styled-id="rCS1dv2ewo"
-            style="position: absolute; top: -30px; left: 0px; height: 30px; width: 793.700787411px; background: rgb(51, 51, 51);"
+            style="font-family: 'Roboto'; top: 30px; left: 30px; position: relative; background-image: url(data:image/png;base64,a...); background-size: 793.700787411px 1122.5196850527px; width: 793.700787411px; height: 1122.5196850527px;"
           >
             <div
-              class="scena-guide-origin"
-            />
-            <canvas
-              height="0"
-              style="width: 100%; height: 100%;"
-              width="0"
+              class="ruler-container"
+              style="position: absolute; top: -30px; left: -30px; height: 30px; width: 30px; background: rgb(51, 51, 51);"
             />
             <div
-              class="scena-guides"
-              style="transform: translateY(0px);"
+              class="scena-manager scena-horizontal  rCS1dv2ewo"
+              data-styled-id="rCS1dv2ewo"
+              style="position: absolute; top: -30px; left: 0px; height: 30px; width: 793.700787411px; background: rgb(51, 51, 51);"
             >
               <div
-                class="scena-guide scena-adder"
+                class="scena-guide-origin"
               />
-            </div>
-          </div>
-          <div
-            class="scena-manager scena-vertical  rCS1dv2ewo"
-            data-styled-id="rCS1dv2ewo"
-            style="position: absolute; top: 0px; left: -30px; height: 1122.5196850527px; width: 30px; background: rgb(51, 51, 51);"
-          >
-            <div
-              class="scena-guide-origin"
-            />
-            <canvas
-              height="0"
-              style="width: 100%; height: 100%;"
-              width="0"
-            />
-            <div
-              class="scena-guides"
-              style="transform: translateX(0px);"
-            >
-              <div
-                class="scena-guide scena-adder"
-              />
-            </div>
-          </div>
-          <div
-            class="moveable-control-box   pdfme-moveable rCSuehiy8"
-            data-able-draggable="true"
-            data-able-origin="true"
-            data-able-padding="true"
-            data-able-resizable="true"
-            data-able-rotatable="true"
-            data-able-snappable="true"
-            data-styled-id="rCSuehiy8"
-            style="position: absolute; display: none; transform: translate3d(0px, 0px, 0); --zoom: 1; --zoompx: 1px; --moveable-color: #1677ff;"
-          >
-            <div
-              class="moveable-rotation"
-              style="transform: translate(-50%) translate(0px, 0px) rotate(0rad);"
-            >
-              <div
-                class="moveable-line moveable-rotation-line"
-                style="transform: scaleX(1); --moveable-color: #1677ff;"
+              <canvas
+                height="0"
+                style="width: 100%; height: 100%;"
+                width="0"
               />
               <div
-                class="moveable-control moveable-rotation-control"
-                style="transform: translate(0.5px) scale(1);"
-              />
-            </div>
-            <div
-              class="moveable-control moveable-direction moveable-n "
-              data-direction="n"
-              data-rotation="0"
-              style="transform: translateZ(0px) translate(0px, 0px) rotate(0rad) scale(1);"
-            />
-            <div
-              class="moveable-control moveable-direction moveable-w "
-              data-direction="w"
-              data-rotation="90"
-              style="transform: translateZ(0px) translate(0px, 0px) rotate(0rad) scale(1);"
-            />
-            <div
-              class="moveable-control moveable-direction moveable-s "
-              data-direction="s"
-              data-rotation="0"
-              style="transform: translateZ(0px) translate(0px, 0px) rotate(0rad) scale(1);"
-            />
-            <div
-              class="moveable-control moveable-direction moveable-e "
-              data-direction="e"
-              data-rotation="90"
-              style="transform: translateZ(0px) translate(0px, 0px) rotate(0rad) scale(1);"
-            />
-            <div
-              class="moveable-control moveable-direction moveable-nw "
-              data-direction="nw"
-              data-rotation="135"
-              style="transform: translateZ(0px) translate(0px, 0px) rotate(0rad) scale(1);"
-            />
-            <div
-              class="moveable-control moveable-direction moveable-ne "
-              data-direction="ne"
-              data-rotation="45"
-              style="transform: translateZ(0px) translate(0px, 0px) rotate(0rad) scale(1);"
-            />
-            <div
-              class="moveable-control moveable-direction moveable-sw "
-              data-direction="sw"
-              data-rotation="45"
-              style="transform: translateZ(0px) translate(0px, 0px) rotate(0rad) scale(1);"
-            />
-            <div
-              class="moveable-control moveable-direction moveable-se "
-              data-direction="se"
-              data-rotation="135"
-              style="transform: translateZ(0px) translate(0px, 0px) rotate(0rad) scale(1);"
-            />
-            <div
-              class="moveable-control moveable-origin"
-              style="transform: translateZ(0px) translate(0px, 0px) rotate(0rad) scale(1);"
-            />
-            <div
-              class="moveable-line moveable-direction "
-              data-direction=""
-              data-line-index="0"
-              data-rotation="-1"
-              style="transform: translateY(-50%) translate(0px, 0px) rotate(0rad) scaleY(1); width: 0px; --moveable-color: #1677ff;"
-            />
-            <div
-              class="moveable-line moveable-direction "
-              data-direction=""
-              data-line-index="1"
-              data-rotation="-1"
-              style="transform: translateY(-50%) translate(0px, 0px) rotate(0rad) scaleY(1); width: 0px; --moveable-color: #1677ff;"
-            />
-            <div
-              class="moveable-line moveable-direction "
-              data-direction=""
-              data-line-index="2"
-              data-rotation="-1"
-              style="transform: translateY(-50%) translate(0px, 0px) rotate(0rad) scaleY(1); width: 0px; --moveable-color: #1677ff;"
-            />
-            <div
-              class="moveable-line moveable-direction "
-              data-direction=""
-              data-line-index="3"
-              data-rotation="-1"
-              style="transform: translateY(-50%) translate(0px, 0px) rotate(0rad) scaleY(1); width: 0px; --moveable-color: #1677ff;"
-            />
-          </div>
-          <div>
-            <div
-              class="selectable"
-              id="1"
-              style="position: absolute; cursor: pointer; height: 56.692913386499995px; width: 377.95275591px; top: 75.590551182px; left: 75.590551182px; transform: rotate(0deg); opacity: 1; outline: 1px dashed #1677ff;"
-              title="field1"
-            >
-              <div
-                style="height: 100%; width: 100%;"
+                class="scena-guides"
+                style="transform: translateY(0px);"
               >
                 <div
-                  style="padding: 0px; resize: none; background-color: transparent; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%; cursor: default;"
+                  class="scena-guide scena-adder"
+                />
+              </div>
+            </div>
+            <div
+              class="scena-manager scena-vertical  rCS1dv2ewo"
+              data-styled-id="rCS1dv2ewo"
+              style="position: absolute; top: 0px; left: -30px; height: 1122.5196850527px; width: 30px; background: rgb(51, 51, 51);"
+            >
+              <div
+                class="scena-guide-origin"
+              />
+              <canvas
+                height="0"
+                style="width: 100%; height: 100%;"
+                width="0"
+              />
+              <div
+                class="scena-guides"
+                style="transform: translateX(0px);"
+              >
+                <div
+                  class="scena-guide scena-adder"
+                />
+              </div>
+            </div>
+            <div
+              class="moveable-control-box   pdfme-moveable rCSuehiy8"
+              data-able-draggable="true"
+              data-able-origin="true"
+              data-able-padding="true"
+              data-able-resizable="true"
+              data-able-rotatable="true"
+              data-able-snappable="true"
+              data-styled-id="rCSuehiy8"
+              style="position: absolute; display: none; transform: translate3d(0px, 0px, 0); --zoom: 1; --zoompx: 1px; --moveable-color: #1677ff;"
+            >
+              <div
+                class="moveable-rotation"
+                style="transform: translate(-50%) translate(0px, 0px) rotate(0rad);"
+              >
+                <div
+                  class="moveable-line moveable-rotation-line"
+                  style="transform: scaleX(1); --moveable-color: #1677ff;"
+                />
+                <div
+                  class="moveable-control moveable-rotation-control"
+                  style="transform: translate(0.5px) scale(1);"
+                />
+              </div>
+              <div
+                class="moveable-control moveable-direction moveable-n "
+                data-direction="n"
+                data-rotation="0"
+                style="transform: translateZ(0px) translate(0px, 0px) rotate(0rad) scale(1);"
+              />
+              <div
+                class="moveable-control moveable-direction moveable-w "
+                data-direction="w"
+                data-rotation="90"
+                style="transform: translateZ(0px) translate(0px, 0px) rotate(0rad) scale(1);"
+              />
+              <div
+                class="moveable-control moveable-direction moveable-s "
+                data-direction="s"
+                data-rotation="0"
+                style="transform: translateZ(0px) translate(0px, 0px) rotate(0rad) scale(1);"
+              />
+              <div
+                class="moveable-control moveable-direction moveable-e "
+                data-direction="e"
+                data-rotation="90"
+                style="transform: translateZ(0px) translate(0px, 0px) rotate(0rad) scale(1);"
+              />
+              <div
+                class="moveable-control moveable-direction moveable-nw "
+                data-direction="nw"
+                data-rotation="135"
+                style="transform: translateZ(0px) translate(0px, 0px) rotate(0rad) scale(1);"
+              />
+              <div
+                class="moveable-control moveable-direction moveable-ne "
+                data-direction="ne"
+                data-rotation="45"
+                style="transform: translateZ(0px) translate(0px, 0px) rotate(0rad) scale(1);"
+              />
+              <div
+                class="moveable-control moveable-direction moveable-sw "
+                data-direction="sw"
+                data-rotation="45"
+                style="transform: translateZ(0px) translate(0px, 0px) rotate(0rad) scale(1);"
+              />
+              <div
+                class="moveable-control moveable-direction moveable-se "
+                data-direction="se"
+                data-rotation="135"
+                style="transform: translateZ(0px) translate(0px, 0px) rotate(0rad) scale(1);"
+              />
+              <div
+                class="moveable-control moveable-origin"
+                style="transform: translateZ(0px) translate(0px, 0px) rotate(0rad) scale(1);"
+              />
+              <div
+                class="moveable-line moveable-direction "
+                data-direction=""
+                data-line-index="0"
+                data-rotation="-1"
+                style="transform: translateY(-50%) translate(0px, 0px) rotate(0rad) scaleY(1); width: 0px; --moveable-color: #1677ff;"
+              />
+              <div
+                class="moveable-line moveable-direction "
+                data-direction=""
+                data-line-index="1"
+                data-rotation="-1"
+                style="transform: translateY(-50%) translate(0px, 0px) rotate(0rad) scaleY(1); width: 0px; --moveable-color: #1677ff;"
+              />
+              <div
+                class="moveable-line moveable-direction "
+                data-direction=""
+                data-line-index="2"
+                data-rotation="-1"
+                style="transform: translateY(-50%) translate(0px, 0px) rotate(0rad) scaleY(1); width: 0px; --moveable-color: #1677ff;"
+              />
+              <div
+                class="moveable-line moveable-direction "
+                data-direction=""
+                data-line-index="3"
+                data-rotation="-1"
+                style="transform: translateY(-50%) translate(0px, 0px) rotate(0rad) scaleY(1); width: 0px; --moveable-color: #1677ff;"
+              />
+            </div>
+            <div>
+              <div
+                class="selectable"
+                id="1"
+                style="position: absolute; cursor: pointer; height: 56.692913386499995px; width: 377.95275591px; top: 75.590551182px; left: 75.590551182px; transform: rotate(0deg); opacity: 1; outline: 1px dashed #1677ff;"
+                title="field1"
+              >
+                <div
+                  style="height: 100%; width: 100%;"
                 >
                   <div
-                    id="text-1"
-                    style="font-family: inherit; color: rgb(0, 0, 0); font-size: 30pt; letter-spacing: 0pt; line-height: 1em; text-align: left; white-space: pre-wrap; word-break: break-word; resize: none; outline: none; margin-bottom: 0px; padding-top: 3.436640625px; background-color: transparent;"
+                    style="padding: 0px; resize: none; background-color: transparent; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%; cursor: default;"
                   >
-                    <span
-                      style="letter-spacing:inherit;"
+                    <div
+                      id="text-1"
+                      style="font-family: inherit; color: rgb(0, 0, 0); font-size: 30pt; letter-spacing: 0pt; line-height: 1em; text-align: left; white-space: pre-wrap; word-break: break-word; resize: none; outline: none; margin-bottom: 0px; padding-top: 3.436640625px; background-color: transparent;"
                     >
-                      b
-                    </span>
-                    <span
-                      style="letter-spacing:0;"
-                    >
-                      b
-                    </span>
+                      <span
+                        style="letter-spacing:inherit;"
+                      >
+                        b
+                      </span>
+                      <span
+                        style="letter-spacing:0;"
+                      >
+                        b
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div>
-            <div
-              class="selectable"
-              id="2"
-              style="position: absolute; cursor: pointer; height: 151.181102364px; width: 377.95275591px; top: 132.2834645685px; left: 75.590551182px; transform: rotate(0deg); opacity: 1; outline: 1px dashed #1677ff;"
-              title="field2"
-            >
+            <div>
               <div
-                style="height: 100%; width: 100%;"
+                class="selectable"
+                id="2"
+                style="position: absolute; cursor: pointer; height: 151.181102364px; width: 377.95275591px; top: 132.2834645685px; left: 75.590551182px; transform: rotate(0deg); opacity: 1; outline: 1px dashed #1677ff;"
+                title="field2"
               >
                 <div
-                  style="width: 100%; height: 100%; background-image: none; background-size: contain; background-repeat: no-repeat; background-position: center;"
+                  style="height: 100%; width: 100%;"
                 >
-                  <img
-                    src="aaaaaaaaaaaa"
-                    style="height: 100%; width: 100%; border-radius: 0; object-fit: contain;"
-                  />
+                  <div
+                    style="width: 100%; height: 100%; background-image: none; background-size: contain; background-repeat: no-repeat; background-position: center;"
+                  >
+                    <img
+                      src="aaaaaaaaaaaa"
+                      style="height: 100%; width: 100%; border-radius: 0; object-fit: contain;"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/packages/ui/src/components/Designer/LeftSidebar.tsx b/packages/ui/src/components/Designer/LeftSidebar.tsx
index e8408253..e1fa090a 100644
--- a/packages/ui/src/components/Designer/LeftSidebar.tsx
+++ b/packages/ui/src/components/Designer/LeftSidebar.tsx
@@ -8,9 +8,11 @@ import { theme, Button } from 'antd';
 import { useDraggable } from '@dnd-kit/core';
 import { CSS } from "@dnd-kit/utilities";
 import Renderer from '../Renderer';
+import { LEFT_SIDEBAR_WIDTH } from '../../constants';
 import { PluginsRegistry } from '../../contexts';
 import PluginIcon from "./PluginIcon";
 
+
 const Draggable = (props: { plugin: Plugin<any>, scale: number, basePdf: BasePdf, children: React.ReactNode }) => {
   const { scale, basePdf, plugin } = props;
   const { token } = theme.useToken();
@@ -67,7 +69,7 @@ const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number
       position: 'absolute',
       zIndex: 1,
       height,
-      width: 45,
+      width: LEFT_SIDEBAR_WIDTH,
       background: token.colorBgLayout,
       textAlign: 'center',
       overflow: isDragging ? 'visible' : 'auto',
diff --git a/packages/ui/src/components/Designer/index.tsx b/packages/ui/src/components/Designer/index.tsx
index 4a5c24c1..62975e35 100644
--- a/packages/ui/src/components/Designer/index.tsx
+++ b/packages/ui/src/components/Designer/index.tsx
@@ -15,7 +15,7 @@ import { DndContext } from '@dnd-kit/core';
 import RightSidebar from './RightSidebar/index';
 import LeftSidebar from './LeftSidebar';
 import Canvas from './Canvas/index';
-import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH } from '../../constants';
+import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH, LEFT_SIDEBAR_WIDTH } from '../../constants';
 import { I18nContext, OptionsContext, PluginsRegistry } from '../../contexts';
 import {
   schemasList2template,
@@ -235,8 +235,9 @@ const TemplateEditor = ({
     void updateTemplate(template);
   }
 
-  const sizeExcSidebar = {
-    width: sidebarOpen ? size.width - RIGHT_SIDEBAR_WIDTH : size.width,
+  const canvasWidth = size.width - LEFT_SIDEBAR_WIDTH;
+  const sizeExcSidebars = {
+    width: sidebarOpen ? canvasWidth - RIGHT_SIDEBAR_WIDTH : canvasWidth,
     height: size.height,
   };
 
@@ -271,66 +272,69 @@ const TemplateEditor = ({
         }}
         onDragStart={onEditEnd}
       >
-        <CtlBar
-          size={sizeExcSidebar}
-          pageCursor={pageCursor}
-          pageNum={schemasList.length}
-          setPageCursor={(p) => {
-            if (!canvasRef.current) return;
-            canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
-            setPageCursor(p);
-            onEditEnd();
-          }}
-          zoomLevel={zoomLevel}
-          setZoomLevel={setZoomLevel}
-          {...pageManipulation}
-        />
         <LeftSidebar
           height={canvasRef.current ? canvasRef.current.clientHeight : 0}
           scale={scale}
           basePdf={template.basePdf}
         />
 
-        <RightSidebar
-          hoveringSchemaId={hoveringSchemaId}
-          onChangeHoveringSchemaId={onChangeHoveringSchemaId}
-          height={canvasRef.current ? canvasRef.current.clientHeight : 0}
-          size={size}
-          pageSize={pageSizes[pageCursor] ?? []}
-          activeElements={activeElements}
-          schemasList={schemasList}
-          schemas={schemasList[pageCursor] ?? []}
-          changeSchemas={changeSchemas}
-          onSortEnd={onSortEnd}
-          onEdit={id => {
-            const editingElem = document.getElementById(id);
-            editingElem && onEdit([editingElem]);
-          }}
-          onEditEnd={onEditEnd}
-          deselectSchema={onEditEnd}
-          sidebarOpen={sidebarOpen}
-          setSidebarOpen={setSidebarOpen}
-        />
+        <div style={{ position: 'absolute', width: canvasWidth, marginLeft: LEFT_SIDEBAR_WIDTH }}>
+          <CtlBar
+            size={sizeExcSidebars}
+            pageCursor={pageCursor}
+            pageNum={schemasList.length}
+            setPageCursor={(p) => {
+              if (!canvasRef.current) return;
+              canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
+              setPageCursor(p);
+              onEditEnd();
+            }}
+            zoomLevel={zoomLevel}
+            setZoomLevel={setZoomLevel}
+            {...pageManipulation}
+          />
 
-        <Canvas
-          ref={canvasRef}
-          paperRefs={paperRefs}
-          basePdf={template.basePdf}
-          hoveringSchemaId={hoveringSchemaId}
-          onChangeHoveringSchemaId={onChangeHoveringSchemaId}
-          height={size.height - RULER_HEIGHT * ZOOM}
-          pageCursor={pageCursor}
-          scale={scale}
-          size={sizeExcSidebar}
-          pageSizes={pageSizes}
-          backgrounds={backgrounds}
-          activeElements={activeElements}
-          schemasList={schemasList}
-          changeSchemas={changeSchemas}
-          removeSchemas={removeSchemas}
-          sidebarOpen={sidebarOpen}
-          onEdit={onEdit}
-        />
+          <RightSidebar
+            hoveringSchemaId={hoveringSchemaId}
+            onChangeHoveringSchemaId={onChangeHoveringSchemaId}
+            height={canvasRef.current ? canvasRef.current.clientHeight : 0}
+            size={size}
+            pageSize={pageSizes[pageCursor] ?? []}
+            activeElements={activeElements}
+            schemasList={schemasList}
+            schemas={schemasList[pageCursor] ?? []}
+            changeSchemas={changeSchemas}
+            onSortEnd={onSortEnd}
+            onEdit={id => {
+              const editingElem = document.getElementById(id);
+              editingElem && onEdit([editingElem]);
+            }}
+            onEditEnd={onEditEnd}
+            deselectSchema={onEditEnd}
+            sidebarOpen={sidebarOpen}
+            setSidebarOpen={setSidebarOpen}
+          />
+
+          <Canvas
+            ref={canvasRef}
+            paperRefs={paperRefs}
+            basePdf={template.basePdf}
+            hoveringSchemaId={hoveringSchemaId}
+            onChangeHoveringSchemaId={onChangeHoveringSchemaId}
+            height={size.height - RULER_HEIGHT * ZOOM}
+            pageCursor={pageCursor}
+            scale={scale}
+            size={sizeExcSidebars}
+            pageSizes={pageSizes}
+            backgrounds={backgrounds}
+            activeElements={activeElements}
+            schemasList={schemasList}
+            changeSchemas={changeSchemas}
+            removeSchemas={removeSchemas}
+            sidebarOpen={sidebarOpen}
+            onEdit={onEdit}
+          />
+        </div>
       </DndContext>
     </Root>
   );
diff --git a/packages/ui/src/constants.ts b/packages/ui/src/constants.ts
index dc58bb85..eed492d3 100644
--- a/packages/ui/src/constants.ts
+++ b/packages/ui/src/constants.ts
@@ -8,6 +8,8 @@ export const RULER_HEIGHT = 30;
 
 export const PAGE_GAP = 10;
 
+export const LEFT_SIDEBAR_WIDTH = 45;
+
 export const RIGHT_SIDEBAR_WIDTH = 400;
 
 export const BACKGROUND_COLOR = 'rgb(74, 74, 74)';