From 7c943429deb48da008e627ff6d22aefe25c76c88 Mon Sep 17 00:00:00 2001
From: Mukesh Ranjan Sahay <43108986+mukeshsahay@users.noreply.github.com>
Date: Sun, 28 Aug 2022 10:01:19 -0700
Subject: [PATCH] Remove duplicate toolbar from scene composer (#72)

* Remove duplicate toolbar from scene composer
---
 .../SceneComposerInternal.spec.tsx.snap       |   33 -
 .../src/layouts/SceneLayout/SceneLayout.tsx   |    1 -
 .../__snapshots__/SceneLayout.spec.tsx.snap   | 2830 ++++-------------
 3 files changed, 693 insertions(+), 2171 deletions(-)

diff --git a/packages/scene-composer/src/components/__snapshots__/SceneComposerInternal.spec.tsx.snap b/packages/scene-composer/src/components/__snapshots__/SceneComposerInternal.spec.tsx.snap
index bb80b2928..dd024bf0e 100644
--- a/packages/scene-composer/src/components/__snapshots__/SceneComposerInternal.spec.tsx.snap
+++ b/packages/scene-composer/src/components/__snapshots__/SceneComposerInternal.spec.tsx.snap
@@ -12,9 +12,6 @@ exports[`SceneComposerInternal should render a default error view when loading a
   }
   mainContent={
     <React.Fragment>
-      <FloatingToolbar
-        isViewing={false}
-      />
       <LogProvider
         ErrorView={[Function]}
         namespace="SceneLayout"
@@ -90,9 +87,6 @@ exports[`SceneComposerInternal should render both valid and invalid scene correc
     }
     mainContent={
       <React.Fragment>
-        <FloatingToolbar
-          isViewing={false}
-        />
         <LogProvider
           ErrorView={[Function]}
           namespace="SceneLayout"
@@ -141,9 +135,6 @@ exports[`SceneComposerInternal should render both valid and invalid scene correc
     }
     mainContent={
       <React.Fragment>
-        <FloatingToolbar
-          isViewing={false}
-        />
         <LogProvider
           ErrorView={[Function]}
           namespace="SceneLayout"
@@ -196,9 +187,6 @@ exports[`SceneComposerInternal should render correctly with a valid scene in edi
   }
   mainContent={
     <React.Fragment>
-      <FloatingToolbar
-        isViewing={false}
-      />
       <LogProvider
         ErrorView={[Function]}
         namespace="SceneLayout"
@@ -250,9 +238,6 @@ exports[`SceneComposerInternal should render correctly with an empty scene in ed
   }
   mainContent={
     <React.Fragment>
-      <FloatingToolbar
-        isViewing={false}
-      />
       <LogProvider
         ErrorView={[Function]}
         namespace="SceneLayout"
@@ -300,9 +285,6 @@ exports[`SceneComposerInternal should render correctly with an empty scene in vi
   }
   mainContent={
     <React.Fragment>
-      <FloatingToolbar
-        isViewing={true}
-      />
       <LogProvider
         ErrorView={[Function]}
         namespace="SceneLayout"
@@ -348,9 +330,6 @@ exports[`SceneComposerInternal should render error when major version is newer 1
   }
   mainContent={
     <React.Fragment>
-      <FloatingToolbar
-        isViewing={false}
-      />
       <LogProvider
         ErrorView={[Function]}
         namespace="SceneLayout"
@@ -402,9 +381,6 @@ exports[`SceneComposerInternal should render error when specVersion is invalid 1
   }
   mainContent={
     <React.Fragment>
-      <FloatingToolbar
-        isViewing={false}
-      />
       <LogProvider
         ErrorView={[Function]}
         namespace="SceneLayout"
@@ -456,9 +432,6 @@ exports[`SceneComposerInternal should render warning when minor version is newer
   }
   mainContent={
     <React.Fragment>
-      <FloatingToolbar
-        isViewing={false}
-      />
       <LogProvider
         ErrorView={[Function]}
         namespace="SceneLayout"
@@ -511,9 +484,6 @@ exports[`SceneComposerInternal should support rendering multiple valid scenes 1`
     }
     mainContent={
       <React.Fragment>
-        <FloatingToolbar
-          isViewing={false}
-        />
         <LogProvider
           ErrorView={[Function]}
           namespace="SceneLayout"
@@ -562,9 +532,6 @@ exports[`SceneComposerInternal should support rendering multiple valid scenes 1`
     }
     mainContent={
       <React.Fragment>
-        <FloatingToolbar
-          isViewing={false}
-        />
         <LogProvider
           ErrorView={[Function]}
           namespace="SceneLayout"
diff --git a/packages/scene-composer/src/layouts/SceneLayout/SceneLayout.tsx b/packages/scene-composer/src/layouts/SceneLayout/SceneLayout.tsx
index ae1c4eeed..951cd4d11 100644
--- a/packages/scene-composer/src/layouts/SceneLayout/SceneLayout.tsx
+++ b/packages/scene-composer/src/layouts/SceneLayout/SceneLayout.tsx
@@ -81,7 +81,6 @@ const SceneLayout: FC<SceneLayoutProps> = ({ isViewing, onPointerMissed, Loading
     <StaticLayout
       mainContent={
         <Fragment>
-          <FloatingToolbar isViewing={isViewing} />
           <LogProvider
             namespace={'SceneLayout'}
             ErrorView={DefaultErrorFallback}
diff --git a/packages/scene-composer/src/layouts/SceneLayout/__snapshots__/SceneLayout.spec.tsx.snap b/packages/scene-composer/src/layouts/SceneLayout/__snapshots__/SceneLayout.spec.tsx.snap
index 216530532..974d6ac8c 100644
--- a/packages/scene-composer/src/layouts/SceneLayout/__snapshots__/SceneLayout.spec.tsx.snap
+++ b/packages/scene-composer/src/layouts/SceneLayout/__snapshots__/SceneLayout.spec.tsx.snap
@@ -1038,1760 +1038,582 @@ exports[`SceneLayout should render correctly in Edit mode 1`] = `
           </div>
         </div>
         <div
-          className="c10"
+          className="c23"
+          style={
+            Object {
+              "height": "100%",
+              "overflow": "hidden",
+              "position": "relative",
+              "width": "100%",
+            }
+          }
+        >
+          <canvas
+            style={
+              Object {
+                "display": "block",
+              }
+            }
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="c24"
+      data-mocked="Box"
+    >
+      <div
+        className="c25"
+      >
+        <div
+          className="c5"
         >
           <div
-            className="c11"
+            className="c26"
           >
             <div
-              className="c11"
-            >
-              <div
-                className="c12"
-                data-testid="undo"
-                onPointerDown={[Function]}
-                onPointerEnter={[Function]}
-                onPointerLeave={[Function]}
-                onPointerUp={[Function]}
-              >
-                <div
-                  className="c13"
-                >
-                  <span
-                    aria-label="Undo"
-                    role="img"
-                    title="Undo"
-                  >
-                    <div
-                      className="c14"
-                      data-mocked="Icon"
-                      name="undo"
-                      variant="disabled"
-                    />
-                  </span>
-                </div>
-              </div>
-              <div
-                className="c12"
-                data-testid="redo"
-                onPointerDown={[Function]}
-                onPointerEnter={[Function]}
-                onPointerLeave={[Function]}
-                onPointerUp={[Function]}
-              >
-                <div
-                  className="c13"
-                >
-                  <span
-                    aria-label="Redo"
-                    role="img"
-                    title="Redo"
-                  >
-                    <div
-                      className="c15"
-                      data-mocked="Icon"
-                      isMirrored={true}
-                      name="undo"
-                      variant="disabled"
-                    />
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div
-              className="c11"
-            >
-              <div
-                className="c16"
-                data-testid="add-object"
-                onPointerDown={[Function]}
-                onPointerEnter={[Function]}
-                onPointerLeave={[Function]}
-                onPointerUp={[Function]}
-              >
-                <div
-                  className="c13"
-                >
-                  <span
-                    aria-label="Add object"
-                    role="img"
-                    title="Add object"
-                  >
-                    <div
-                      className="c14"
-                      data-mocked="Icon"
-                      name="add-plus"
-                      variant="normal"
-                    />
-                  </span>
-                </div>
-                <div
-                  className="c17"
-                >
-                  <svg
-                    viewBox="0 0 16 16"
-                  >
-                    <path
-                      d="M16 0v16L0 0z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
-                <div
-                  className="c18"
-                >
-                  <div
-                    className="c16"
-                    data-testid="add-object-empty"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c19"
-                      color="inherit"
-                      data-mocked="Box"
-                      variant="small"
-                    >
-                      Add empty node
-                    </div>
-                  </div>
-                  <div
-                    className="c12"
-                    data-testid="add-object-model"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c19"
-                      color="text-status-inactive"
-                      data-mocked="Box"
-                      variant="small"
-                    >
-                      Add 3D model
-                    </div>
-                  </div>
-                  <div
-                    className="c16"
-                    data-testid="add-object-light"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c19"
-                      color="inherit"
-                      data-mocked="Box"
-                      variant="small"
-                    >
-                      Add light
-                    </div>
-                  </div>
-                  <div
-                    className="c16"
-                    data-testid="add-object-tag"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c19"
-                      color="inherit"
-                      data-mocked="Box"
-                      variant="small"
-                    >
-                      Add tag
-                    </div>
-                  </div>
-                  <div
-                    className="c12"
-                    data-testid="add-effect-model-shader"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c19"
-                      color="text-status-inactive"
-                      data-mocked="Box"
-                      variant="small"
-                    >
-                      Add model shader
-                    </div>
-                  </div>
-                  <div
-                    className="c16"
-                    data-testid="add-object-motion-indicator"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c19"
-                      color="inherit"
-                      data-mocked="Box"
-                      variant="small"
-                    >
-                      Add motion indicator
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                className="c16"
-                data-testid="camera-controls-orbit"
-                onPointerDown={[Function]}
-                onPointerEnter={[Function]}
-                onPointerLeave={[Function]}
-                onPointerUp={[Function]}
-              >
-                <div
-                  className="c13"
-                >
-                  <span
-                    aria-label="Orbit"
-                    role="img"
-                    title="Orbit"
-                  >
-                    <div
-                      className="c20"
-                      data-mocked="Icon"
-                      scale={1.04}
-                      variant="normal"
-                    >
-                      <div>
-                        <span>
-                          <svg />
-                        </span>
-                      </div>
-                    </div>
-                  </span>
-                </div>
-                <div
-                  className="c17"
-                >
-                  <svg
-                    viewBox="0 0 16 16"
-                  >
-                    <path
-                      d="M16 0v16L0 0z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
-                <div
-                  className="c18"
-                >
-                  <div
-                    className="c16"
-                    data-testid="camera-controls-orbit"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c13"
-                    >
-                      <span
-                        aria-label="Orbit"
-                        role="img"
-                        title="Orbit"
-                      >
-                        <div
-                          className="c20"
-                          data-mocked="Icon"
-                          scale={1.04}
-                          variant="normal"
-                        >
-                          <div>
-                            <span>
-                              <svg />
-                            </span>
-                          </div>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="c21"
-                      color="inherit"
-                      data-mocked="Box"
-                      leftPadding={0}
-                      variant="small"
-                    >
-                      3D Orbit
-                    </div>
-                  </div>
-                  <div
-                    className="c16"
-                    data-testid="camera-controls-pan"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c13"
-                    >
-                      <span
-                        aria-label="Pan"
-                        role="img"
-                        title="Pan"
-                      >
-                        <div
-                          className="c20"
-                          data-mocked="Icon"
-                          scale={1.04}
-                          variant="normal"
-                        >
-                          <div>
-                            <span>
-                              <svg />
-                            </span>
-                          </div>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="c21"
-                      color="inherit"
-                      data-mocked="Box"
-                      leftPadding={0}
-                      variant="small"
-                    >
-                      3D Pan
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="c11"
-            >
-              <div
-                className="c12"
-                data-testid="delete"
-                onPointerDown={[Function]}
-                onPointerEnter={[Function]}
-                onPointerLeave={[Function]}
-                onPointerUp={[Function]}
-              >
-                <div
-                  className="c13"
-                >
-                  <span
-                    aria-label="Delete"
-                    role="img"
-                    title="Delete"
-                  >
-                    <div
-                      className="c14"
-                      data-mocked="Icon"
-                      variant="disabled"
-                    >
-                      <div>
-                        <span>
-                          <svg
-                            viewBox="0 0 14 15"
-                          >
-                            <path
-                              d="M9 0a1 1 0 0 1 1 1h3a1 1 0 0 1 .117 1.993L13 3h-.08l-.923 11.077a1 1 0 0 1-.878.916L11 15H3a1 1 0 0 1-.997-.923L1.079 3H1a1 1 0 0 1-.117-1.993L1 1h3a1 1 0 0 1 .883-.993L5 0h4Zm1.919 3H3.08l.846 10h6.147l.846-10Z"
-                              fill="currentColor"
-                              fillRule="nonzero"
-                            />
-                          </svg>
-                        </span>
-                      </div>
-                    </div>
-                  </span>
-                </div>
-              </div>
-              <div
-                className="c16"
-                data-testid="transform-translate"
-                onPointerDown={[Function]}
-                onPointerEnter={[Function]}
-                onPointerLeave={[Function]}
-                onPointerUp={[Function]}
-              >
-                <div
-                  className="c13"
-                >
-                  <span
-                    aria-label="Translate"
-                    role="img"
-                    title="Translate"
-                  >
-                    <div
-                      className="c22"
-                      data-mocked="Icon"
-                      scale={1.06}
-                      variant="normal"
-                    >
-                      <div>
-                        <span>
-                          <svg
-                            viewBox="0 0 16 16"
-                          >
-                            <g
-                              fill="currentColor"
-                              fillRule="nonzero"
-                              stroke="currentColor"
-                              strokeLinejoin="round"
-                              strokeWidth={1.2}
-                            >
-                              <path
-                                d="M6.04 4h4l-2-3zM6.04 12h4l-2 3zM12 10V6l3 2zM4 10V6L1 8z"
-                              />
-                            </g>
-                          </svg>
-                        </span>
-                      </div>
-                    </div>
-                  </span>
-                </div>
-                <div
-                  className="c17"
-                >
-                  <svg
-                    viewBox="0 0 16 16"
-                  >
-                    <path
-                      d="M16 0v16L0 0z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
-                <div
-                  className="c18"
-                >
-                  <div
-                    className="c16"
-                    data-testid="transform-translate"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c13"
-                    >
-                      <span
-                        aria-label="Translate"
-                        role="img"
-                        title="Translate"
-                      >
-                        <div
-                          className="c22"
-                          data-mocked="Icon"
-                          scale={1.06}
-                          variant="normal"
-                        >
-                          <div>
-                            <span>
-                              <svg
-                                viewBox="0 0 16 16"
-                              >
-                                <g
-                                  fill="currentColor"
-                                  fillRule="nonzero"
-                                  stroke="currentColor"
-                                  strokeLinejoin="round"
-                                  strokeWidth={1.2}
-                                >
-                                  <path
-                                    d="M6.04 4h4l-2-3zM6.04 12h4l-2 3zM12 10V6l3 2zM4 10V6L1 8z"
-                                  />
-                                </g>
-                              </svg>
-                            </span>
-                          </div>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="c21"
-                      color="inherit"
-                      data-mocked="Box"
-                      leftPadding={0}
-                      variant="small"
-                    >
-                      Translate object
-                    </div>
-                  </div>
-                  <div
-                    className="c16"
-                    data-testid="transform-rotate"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c13"
-                    >
-                      <span
-                        aria-label="Rotate"
-                        role="img"
-                        title="Rotate"
-                      >
-                        <div
-                          className="c22"
-                          data-mocked="Icon"
-                          scale={1.06}
-                          variant="normal"
-                        >
-                          <div>
-                            <span>
-                              <svg
-                                viewBox="0 0 16 16"
-                              >
-                                <g
-                                  fill="none"
-                                  fillRule="evenodd"
-                                  stroke="currentColor"
-                                  strokeWidth={1.7}
-                                  transform="translate(1)"
-                                >
-                                  <path
-                                    d="M9 5h5V0"
-                                  />
-                                  <path
-                                    d="M0 8a7 7 0 0 1 7-7 6.87 6.87 0 0 1 6.3 4M5 11H0v5"
-                                  />
-                                  <path
-                                    d="M14 8a7 7 0 0 1-7 7 6.87 6.87 0 0 1-6.3-4"
-                                  />
-                                  <circle
-                                    cx="7"
-                                    cy="8"
-                                    fill="currentColor"
-                                    fillRule="nonzero"
-                                    r="1"
-                                  />
-                                </g>
-                              </svg>
-                            </span>
-                          </div>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="c21"
-                      color="inherit"
-                      data-mocked="Box"
-                      leftPadding={0}
-                      variant="small"
-                    >
-                      Rotate object
-                    </div>
-                  </div>
-                  <div
-                    className="c16"
-                    data-testid="transform-scale"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c13"
-                    >
-                      <span
-                        aria-label="Scale"
-                        role="img"
-                        title="Scale"
-                      >
-                        <div
-                          className="c22"
-                          data-mocked="Icon"
-                          scale={1.06}
-                          variant="normal"
-                        >
-                          <div>
-                            <span>
-                              <svg
-                                viewBox="0 0 16 16"
-                              >
-                                <g
-                                  fill="none"
-                                  fillRule="evenodd"
-                                  stroke="currentColor"
-                                  strokeWidth={1.7}
-                                >
-                                  <path
-                                    d="M.5 10.5v5h5v-5z"
-                                    fill="currentColor"
-                                    fillRule="nonzero"
-                                  />
-                                  <path
-                                    d="M.5 10V.5h15v15H6"
-                                  />
-                                  <path
-                                    d="M7 4h5v5M12 4 8 8"
-                                  />
-                                </g>
-                              </svg>
-                            </span>
-                          </div>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="c21"
-                      color="inherit"
-                      data-mocked="Box"
-                      leftPadding={0}
-                      variant="small"
-                    >
-                      Scale object
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="c23"
-          style={
-            Object {
-              "height": "100%",
-              "overflow": "hidden",
-              "position": "relative",
-              "width": "100%",
-            }
-          }
-        >
-          <canvas
-            style={
-              Object {
-                "display": "block",
-              }
-            }
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="c24"
-      data-mocked="Box"
-    >
-      <div
-        className="c25"
-      >
-        <div
-          className="c5"
-        >
-          <div
-            className="c26"
-          >
-            <div
-              className="sidePanelTabs"
-              data-mocked="Tabs"
-              tabs={
-                Array [
-                  Object {
-                    "content": <SceneNodeInspectorPanel />,
-                    "id": "Inspector",
-                    "label": "Inspector",
-                  },
-                ]
-              }
-            />
-          </div>
-        </div>
-        <div
-          className="c7"
-          onClick={[Function]}
-        >
-          <div
-            data-mocked="Icon"
-            name="angle-right"
-            size="small"
-            variant="normal"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SceneLayout should render correctly in Edit mode with Modal 1`] = `
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  height: 100%;
-}
-
-.c27 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row-reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  height: 100%;
-}
-
-.c7 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c9 {
-  -webkit-flex: none;
-  -ms-flex: none;
-  flex: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border-left: 1px solid colorBorderDividerDefault;
-  border-right: 1px solid colorBorderDividerDefault;
-}
-
-.c9:hover {
-  background-color: colorBackgroundDropdownItemHover;
-}
-
-.c8 {
-  width: 400px;
-  height: 100%;
-  overflow-y: auto;
-}
-
-.c28 {
-  width: 400px;
-  height: 100%;
-  overflow-y: auto;
-}
-
-.c2 {
-  width: 600px;
-  margin: auto;
-  -webkit-flex: none;
-  -ms-flex: none;
-  flex: none;
-  z-index: 1000;
-}
-
-.c0 {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  background-color: colorBackgroundLayoutMain;
-}
-
-.c3 {
-  background-color: colorBackgroundContainerHeader;
-  z-index: 100;
-}
-
-.c4 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  position: relative;
-  overflow: hidden;
-}
-
-.c10 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  overflow: hidden;
-}
-
-.c11 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  overflow: hidden;
-  padding: 4px;
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c1 {
-  position: absolute;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1000;
-  background-color: rgba(0,0,0,0.7);
-}
-
-.c5 {
-  background-color: colorBackgroundContainerContent;
-  -webkit-flex: none;
-  -ms-flex: none;
-  flex: none;
-  z-index: 99;
-}
-
-.c26 {
-  background-color: colorBackgroundContainerContent;
-  -webkit-flex: none;
-  -ms-flex: none;
-  flex: none;
-  height: 100%;
-}
-
-.c19 {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 16%;
-  height: 16%;
-  pointer-events: none;
-  z-index: 1;
-  color: colorTextHeadingDefault;
-}
-
-.c19 > svg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
-}
-
-.c16 {
-  shape-rendering: geometricPrecision;
-  -webkit-transform: scale(1);
-  -ms-transform: scale(1);
-  transform: scale(1);
-}
-
-.c17 {
-  shape-rendering: geometricPrecision;
-  -webkit-transform: scale(1);
-  -ms-transform: scale(1);
-  transform: scale(1);
-  -webkit-transform: scaleX(-1);
-  -ms-transform: scaleX(-1);
-  transform: scaleX(-1);
-}
-
-.c24 {
-  shape-rendering: geometricPrecision;
-  -webkit-transform: scale(1.06);
-  -ms-transform: scale(1.06);
-  transform: scale(1.06);
-}
-
-.c22 {
-  shape-rendering: geometricPrecision;
-  -webkit-transform: scale(1.04);
-  -ms-transform: scale(1.04);
-  transform: scale(1.04);
-}
-
-.c14 {
-  -webkit-flex: none;
-  -ms-flex: none;
-  flex: none;
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  min-width: 40px;
-  height: 40px;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: default;
-  pointer-events: none;
-  background-color: colorBackgroundDropdownItemDefault;
-  border-top: 1px solid colorBorderDividerDefault;
-}
-
-.c14:first-of-type {
-  border-top: 0;
-}
-
-.c18 {
-  -webkit-flex: none;
-  -ms-flex: none;
-  flex: none;
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  min-width: 40px;
-  height: 40px;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  pointer-events: initial;
-  background-color: colorBackgroundDropdownItemDefault;
-  border-top: 1px solid colorBorderDividerDefault;
-}
-
-.c18:hover {
-  background-color: colorBackgroundDropdownItemHover;
-}
-
-.c18:first-of-type {
-  border-top: 0;
-}
-
-.c13 {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border-top: 3px solid colorBorderDividerDefault;
-}
-
-.c13:first-of-type {
-  border-top: 0;
-}
-
-.c15 {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-}
-
-.c20 {
-  display: none;
-  position: absolute;
-  left: 41px;
-  top: 0;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  background-color: colorBackgroundDropdownItemDefault;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  z-index: 1;
-}
-
-.c20 > div {
-  border-top: 1px solid colorBorderDividerDefault;
-}
-
-.c20 > div:first-of-type {
-  border-top: 0;
-}
-
-.c23 {
-  padding: 0 20px 0 0px;
-  white-space: nowrap;
-}
-
-.c21 {
-  padding: 0 20px 0 20px;
-  white-space: nowrap;
-}
-
-.c12 {
-  position: absolute;
-  left: 10px;
-  top: 10px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  z-index: 999;
-  background-color: colorBackgroundDropdownItemDefault;
-}
-
-.c25 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  z-index: 0;
-}
-
-<div
-  className="c0"
-  data-mocked="Box"
->
-  <div
-    className="c1"
-  >
-    <div
-      className="c2"
-      data-mocked="Container"
-    >
-      <div>
-        <div
-          data-mocked="Header"
-          variant="h2"
-        >
-          Notice
-        </div>
-      </div>
-      <div>
-        <div
-          data-mocked="Box"
-          float="right"
-          padding="{\\"bottom\\":\\"s\\"}"
-        >
-          <div
-            data-mocked="Button"
-            onClick={[Function]}
-            variant="primary"
-          >
-            Ok
-          </div>
-        </div>
-      </div>
-      <div
-        data-mocked="SpaceBetween"
-        size="s"
-      >
-        <div
-          data-mocked="Box"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="c3"
-    data-mocked="Box"
-  />
-  <div
-    className="c4"
-    data-mocked="Box"
-  >
-    <div
-      className="c5"
-      data-mocked="Box"
-      isFloating={false}
-    >
-      <div
-        className="c6"
-      >
-        <div
-          className="c7"
-        >
-          <div
-            className="c8"
-          >
-            <div
-              className="sidePanelTabs"
-              data-mocked="Tabs"
-              tabs={
-                Array [
-                  Object {
-                    "content": <Panel />,
-                    "id": "Hierarchy",
-                    "label": "Hierarchy",
-                  },
-                  Object {
-                    "content": <SceneRulesPanel />,
-                    "id": "Rules",
-                    "label": "Rules",
-                  },
-                  Object {
-                    "content": <SettingsPanel />,
-                    "id": "Settings",
-                    "label": "Settings",
-                  },
-                ]
-              }
-            />
-          </div>
-        </div>
-        <div
-          className="c9"
-          onClick={[Function]}
-        >
-          <div
-            data-mocked="Icon"
-            name="angle-left"
-            size="small"
-            variant="normal"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="c10"
-      data-mocked="Box"
-    >
-      <div
-        className="c11"
-        data-mocked="Box"
-      >
-        <div
-          className="c12"
-        >
-          <div
-            className="c13"
-          >
-            <div
-              className="c13"
-            >
-              <div
-                className="c14"
-                data-testid="undo"
-                onPointerDown={[Function]}
-                onPointerEnter={[Function]}
-                onPointerLeave={[Function]}
-                onPointerUp={[Function]}
-              >
-                <div
-                  className="c15"
-                >
-                  <span
-                    aria-label="Undo"
-                    role="img"
-                    title="Undo"
-                  >
-                    <div
-                      className="c16"
-                      data-mocked="Icon"
-                      name="undo"
-                      variant="disabled"
-                    />
-                  </span>
-                </div>
-              </div>
-              <div
-                className="c14"
-                data-testid="redo"
-                onPointerDown={[Function]}
-                onPointerEnter={[Function]}
-                onPointerLeave={[Function]}
-                onPointerUp={[Function]}
-              >
-                <div
-                  className="c15"
-                >
-                  <span
-                    aria-label="Redo"
-                    role="img"
-                    title="Redo"
-                  >
-                    <div
-                      className="c17"
-                      data-mocked="Icon"
-                      isMirrored={true}
-                      name="undo"
-                      variant="disabled"
-                    />
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div
-              className="c13"
-            >
-              <div
-                className="c18"
-                data-testid="add-object"
-                onPointerDown={[Function]}
-                onPointerEnter={[Function]}
-                onPointerLeave={[Function]}
-                onPointerUp={[Function]}
-              >
-                <div
-                  className="c15"
-                >
-                  <span
-                    aria-label="Add object"
-                    role="img"
-                    title="Add object"
-                  >
-                    <div
-                      className="c16"
-                      data-mocked="Icon"
-                      name="add-plus"
-                      variant="normal"
-                    />
-                  </span>
-                </div>
-                <div
-                  className="c19"
-                >
-                  <svg
-                    viewBox="0 0 16 16"
-                  >
-                    <path
-                      d="M16 0v16L0 0z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
-                <div
-                  className="c20"
-                >
-                  <div
-                    className="c18"
-                    data-testid="add-object-empty"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c21"
-                      color="inherit"
-                      data-mocked="Box"
-                      variant="small"
-                    >
-                      Add empty node
-                    </div>
-                  </div>
-                  <div
-                    className="c14"
-                    data-testid="add-object-model"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c21"
-                      color="text-status-inactive"
-                      data-mocked="Box"
-                      variant="small"
-                    >
-                      Add 3D model
-                    </div>
-                  </div>
-                  <div
-                    className="c18"
-                    data-testid="add-object-light"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c21"
-                      color="inherit"
-                      data-mocked="Box"
-                      variant="small"
-                    >
-                      Add light
-                    </div>
-                  </div>
-                  <div
-                    className="c18"
-                    data-testid="add-object-tag"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c21"
-                      color="inherit"
-                      data-mocked="Box"
-                      variant="small"
-                    >
-                      Add tag
-                    </div>
-                  </div>
-                  <div
-                    className="c14"
-                    data-testid="add-effect-model-shader"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c21"
-                      color="text-status-inactive"
-                      data-mocked="Box"
-                      variant="small"
-                    >
-                      Add model shader
-                    </div>
-                  </div>
-                  <div
-                    className="c18"
-                    data-testid="add-object-motion-indicator"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c21"
-                      color="inherit"
-                      data-mocked="Box"
-                      variant="small"
-                    >
-                      Add motion indicator
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                className="c18"
-                data-testid="camera-controls-orbit"
-                onPointerDown={[Function]}
-                onPointerEnter={[Function]}
-                onPointerLeave={[Function]}
-                onPointerUp={[Function]}
-              >
-                <div
-                  className="c15"
-                >
-                  <span
-                    aria-label="Orbit"
-                    role="img"
-                    title="Orbit"
-                  >
-                    <div
-                      className="c22"
-                      data-mocked="Icon"
-                      scale={1.04}
-                      variant="normal"
-                    >
-                      <div>
-                        <span>
-                          <svg />
-                        </span>
-                      </div>
-                    </div>
-                  </span>
-                </div>
-                <div
-                  className="c19"
-                >
-                  <svg
-                    viewBox="0 0 16 16"
-                  >
-                    <path
-                      d="M16 0v16L0 0z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
-                <div
-                  className="c20"
-                >
-                  <div
-                    className="c18"
-                    data-testid="camera-controls-orbit"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c15"
-                    >
-                      <span
-                        aria-label="Orbit"
-                        role="img"
-                        title="Orbit"
-                      >
-                        <div
-                          className="c22"
-                          data-mocked="Icon"
-                          scale={1.04}
-                          variant="normal"
-                        >
-                          <div>
-                            <span>
-                              <svg />
-                            </span>
-                          </div>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="c23"
-                      color="inherit"
-                      data-mocked="Box"
-                      leftPadding={0}
-                      variant="small"
-                    >
-                      3D Orbit
-                    </div>
-                  </div>
-                  <div
-                    className="c18"
-                    data-testid="camera-controls-pan"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c15"
-                    >
-                      <span
-                        aria-label="Pan"
-                        role="img"
-                        title="Pan"
-                      >
-                        <div
-                          className="c22"
-                          data-mocked="Icon"
-                          scale={1.04}
-                          variant="normal"
-                        >
-                          <div>
-                            <span>
-                              <svg />
-                            </span>
-                          </div>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="c23"
-                      color="inherit"
-                      data-mocked="Box"
-                      leftPadding={0}
-                      variant="small"
-                    >
-                      3D Pan
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="c13"
-            >
-              <div
-                className="c14"
-                data-testid="delete"
-                onPointerDown={[Function]}
-                onPointerEnter={[Function]}
-                onPointerLeave={[Function]}
-                onPointerUp={[Function]}
-              >
-                <div
-                  className="c15"
-                >
-                  <span
-                    aria-label="Delete"
-                    role="img"
-                    title="Delete"
-                  >
-                    <div
-                      className="c16"
-                      data-mocked="Icon"
-                      variant="disabled"
-                    >
-                      <div>
-                        <span>
-                          <svg
-                            viewBox="0 0 14 15"
-                          >
-                            <path
-                              d="M9 0a1 1 0 0 1 1 1h3a1 1 0 0 1 .117 1.993L13 3h-.08l-.923 11.077a1 1 0 0 1-.878.916L11 15H3a1 1 0 0 1-.997-.923L1.079 3H1a1 1 0 0 1-.117-1.993L1 1h3a1 1 0 0 1 .883-.993L5 0h4Zm1.919 3H3.08l.846 10h6.147l.846-10Z"
-                              fill="currentColor"
-                              fillRule="nonzero"
-                            />
-                          </svg>
-                        </span>
-                      </div>
-                    </div>
-                  </span>
-                </div>
-              </div>
-              <div
-                className="c18"
-                data-testid="transform-translate"
-                onPointerDown={[Function]}
-                onPointerEnter={[Function]}
-                onPointerLeave={[Function]}
-                onPointerUp={[Function]}
-              >
-                <div
-                  className="c15"
-                >
-                  <span
-                    aria-label="Translate"
-                    role="img"
-                    title="Translate"
-                  >
-                    <div
-                      className="c24"
-                      data-mocked="Icon"
-                      scale={1.06}
-                      variant="normal"
-                    >
-                      <div>
-                        <span>
-                          <svg
-                            viewBox="0 0 16 16"
-                          >
-                            <g
-                              fill="currentColor"
-                              fillRule="nonzero"
-                              stroke="currentColor"
-                              strokeLinejoin="round"
-                              strokeWidth={1.2}
-                            >
-                              <path
-                                d="M6.04 4h4l-2-3zM6.04 12h4l-2 3zM12 10V6l3 2zM4 10V6L1 8z"
-                              />
-                            </g>
-                          </svg>
-                        </span>
-                      </div>
-                    </div>
-                  </span>
-                </div>
-                <div
-                  className="c19"
-                >
-                  <svg
-                    viewBox="0 0 16 16"
-                  >
-                    <path
-                      d="M16 0v16L0 0z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
-                <div
-                  className="c20"
-                >
-                  <div
-                    className="c18"
-                    data-testid="transform-translate"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c15"
-                    >
-                      <span
-                        aria-label="Translate"
-                        role="img"
-                        title="Translate"
-                      >
-                        <div
-                          className="c24"
-                          data-mocked="Icon"
-                          scale={1.06}
-                          variant="normal"
-                        >
-                          <div>
-                            <span>
-                              <svg
-                                viewBox="0 0 16 16"
-                              >
-                                <g
-                                  fill="currentColor"
-                                  fillRule="nonzero"
-                                  stroke="currentColor"
-                                  strokeLinejoin="round"
-                                  strokeWidth={1.2}
-                                >
-                                  <path
-                                    d="M6.04 4h4l-2-3zM6.04 12h4l-2 3zM12 10V6l3 2zM4 10V6L1 8z"
-                                  />
-                                </g>
-                              </svg>
-                            </span>
-                          </div>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="c23"
-                      color="inherit"
-                      data-mocked="Box"
-                      leftPadding={0}
-                      variant="small"
-                    >
-                      Translate object
-                    </div>
-                  </div>
-                  <div
-                    className="c18"
-                    data-testid="transform-rotate"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c15"
-                    >
-                      <span
-                        aria-label="Rotate"
-                        role="img"
-                        title="Rotate"
-                      >
-                        <div
-                          className="c24"
-                          data-mocked="Icon"
-                          scale={1.06}
-                          variant="normal"
-                        >
-                          <div>
-                            <span>
-                              <svg
-                                viewBox="0 0 16 16"
-                              >
-                                <g
-                                  fill="none"
-                                  fillRule="evenodd"
-                                  stroke="currentColor"
-                                  strokeWidth={1.7}
-                                  transform="translate(1)"
-                                >
-                                  <path
-                                    d="M9 5h5V0"
-                                  />
-                                  <path
-                                    d="M0 8a7 7 0 0 1 7-7 6.87 6.87 0 0 1 6.3 4M5 11H0v5"
-                                  />
-                                  <path
-                                    d="M14 8a7 7 0 0 1-7 7 6.87 6.87 0 0 1-6.3-4"
-                                  />
-                                  <circle
-                                    cx="7"
-                                    cy="8"
-                                    fill="currentColor"
-                                    fillRule="nonzero"
-                                    r="1"
-                                  />
-                                </g>
-                              </svg>
-                            </span>
-                          </div>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="c23"
-                      color="inherit"
-                      data-mocked="Box"
-                      leftPadding={0}
-                      variant="small"
-                    >
-                      Rotate object
-                    </div>
-                  </div>
-                  <div
-                    className="c18"
-                    data-testid="transform-scale"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c15"
-                    >
-                      <span
-                        aria-label="Scale"
-                        role="img"
-                        title="Scale"
-                      >
-                        <div
-                          className="c24"
-                          data-mocked="Icon"
-                          scale={1.06}
-                          variant="normal"
-                        >
-                          <div>
-                            <span>
-                              <svg
-                                viewBox="0 0 16 16"
-                              >
-                                <g
-                                  fill="none"
-                                  fillRule="evenodd"
-                                  stroke="currentColor"
-                                  strokeWidth={1.7}
-                                >
-                                  <path
-                                    d="M.5 10.5v5h5v-5z"
-                                    fill="currentColor"
-                                    fillRule="nonzero"
-                                  />
-                                  <path
-                                    d="M.5 10V.5h15v15H6"
-                                  />
-                                  <path
-                                    d="M7 4h5v5M12 4 8 8"
-                                  />
-                                </g>
-                              </svg>
-                            </span>
-                          </div>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="c23"
-                      color="inherit"
-                      data-mocked="Box"
-                      leftPadding={0}
-                      variant="small"
-                    >
-                      Scale object
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+              className="sidePanelTabs"
+              data-mocked="Tabs"
+              tabs={
+                Array [
+                  Object {
+                    "content": <SceneNodeInspectorPanel />,
+                    "id": "Inspector",
+                    "label": "Inspector",
+                  },
+                ]
+              }
+            />
+          </div>
+        </div>
+        <div
+          className="c7"
+          onClick={[Function]}
+        >
+          <div
+            data-mocked="Icon"
+            name="angle-right"
+            size="small"
+            variant="normal"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SceneLayout should render correctly in Edit mode with Modal 1`] = `
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  height: 100%;
+}
+
+.c27 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  height: 100%;
+}
+
+.c7 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.c9 {
+  -webkit-flex: none;
+  -ms-flex: none;
+  flex: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-left: 1px solid colorBorderDividerDefault;
+  border-right: 1px solid colorBorderDividerDefault;
+}
+
+.c9:hover {
+  background-color: colorBackgroundDropdownItemHover;
+}
+
+.c8 {
+  width: 400px;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.c28 {
+  width: 400px;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.c2 {
+  width: 600px;
+  margin: auto;
+  -webkit-flex: none;
+  -ms-flex: none;
+  flex: none;
+  z-index: 1000;
+}
+
+.c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background-color: colorBackgroundLayoutMain;
+}
+
+.c3 {
+  background-color: colorBackgroundContainerHeader;
+  z-index: 100;
+}
+
+.c4 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  position: relative;
+  overflow: hidden;
+}
+
+.c10 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+.c11 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  overflow: hidden;
+  padding: 4px;
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c1 {
+  position: absolute;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  background-color: rgba(0,0,0,0.7);
+}
+
+.c5 {
+  background-color: colorBackgroundContainerContent;
+  -webkit-flex: none;
+  -ms-flex: none;
+  flex: none;
+  z-index: 99;
+}
+
+.c26 {
+  background-color: colorBackgroundContainerContent;
+  -webkit-flex: none;
+  -ms-flex: none;
+  flex: none;
+  height: 100%;
+}
+
+.c19 {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 16%;
+  height: 16%;
+  pointer-events: none;
+  z-index: 1;
+  color: colorTextHeadingDefault;
+}
+
+.c19 > svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.c16 {
+  shape-rendering: geometricPrecision;
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.c17 {
+  shape-rendering: geometricPrecision;
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transform: scaleX(-1);
+  -ms-transform: scaleX(-1);
+  transform: scaleX(-1);
+}
+
+.c24 {
+  shape-rendering: geometricPrecision;
+  -webkit-transform: scale(1.06);
+  -ms-transform: scale(1.06);
+  transform: scale(1.06);
+}
+
+.c22 {
+  shape-rendering: geometricPrecision;
+  -webkit-transform: scale(1.04);
+  -ms-transform: scale(1.04);
+  transform: scale(1.04);
+}
+
+.c14 {
+  -webkit-flex: none;
+  -ms-flex: none;
+  flex: none;
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  min-width: 40px;
+  height: 40px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: default;
+  pointer-events: none;
+  background-color: colorBackgroundDropdownItemDefault;
+  border-top: 1px solid colorBorderDividerDefault;
+}
+
+.c14:first-of-type {
+  border-top: 0;
+}
+
+.c18 {
+  -webkit-flex: none;
+  -ms-flex: none;
+  flex: none;
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  min-width: 40px;
+  height: 40px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  pointer-events: initial;
+  background-color: colorBackgroundDropdownItemDefault;
+  border-top: 1px solid colorBorderDividerDefault;
+}
+
+.c18:hover {
+  background-color: colorBackgroundDropdownItemHover;
+}
+
+.c18:first-of-type {
+  border-top: 0;
+}
+
+.c13 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-top: 3px solid colorBorderDividerDefault;
+}
+
+.c13:first-of-type {
+  border-top: 0;
+}
+
+.c15 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+}
+
+.c20 {
+  display: none;
+  position: absolute;
+  left: 41px;
+  top: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  background-color: colorBackgroundDropdownItemDefault;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: 1;
+}
+
+.c20 > div {
+  border-top: 1px solid colorBorderDividerDefault;
+}
+
+.c20 > div:first-of-type {
+  border-top: 0;
+}
+
+.c23 {
+  padding: 0 20px 0 0px;
+  white-space: nowrap;
+}
+
+.c21 {
+  padding: 0 20px 0 20px;
+  white-space: nowrap;
+}
+
+.c12 {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: 999;
+  background-color: colorBackgroundDropdownItemDefault;
+}
+
+.c25 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: 0;
+}
+
+<div
+  className="c0"
+  data-mocked="Box"
+>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+      data-mocked="Container"
+    >
+      <div>
+        <div
+          data-mocked="Header"
+          variant="h2"
+        >
+          Notice
+        </div>
+      </div>
+      <div>
+        <div
+          data-mocked="Box"
+          float="right"
+          padding="{\\"bottom\\":\\"s\\"}"
+        >
+          <div
+            data-mocked="Button"
+            onClick={[Function]}
+            variant="primary"
+          >
+            Ok
+          </div>
+        </div>
+      </div>
+      <div
+        data-mocked="SpaceBetween"
+        size="s"
+      >
+        <div
+          data-mocked="Box"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    className="c3"
+    data-mocked="Box"
+  />
+  <div
+    className="c4"
+    data-mocked="Box"
+  >
+    <div
+      className="c5"
+      data-mocked="Box"
+      isFloating={false}
+    >
+      <div
+        className="c6"
+      >
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+          >
+            <div
+              className="sidePanelTabs"
+              data-mocked="Tabs"
+              tabs={
+                Array [
+                  Object {
+                    "content": <Panel />,
+                    "id": "Hierarchy",
+                    "label": "Hierarchy",
+                  },
+                  Object {
+                    "content": <SceneRulesPanel />,
+                    "id": "Rules",
+                    "label": "Rules",
+                  },
+                  Object {
+                    "content": <SettingsPanel />,
+                    "id": "Settings",
+                    "label": "Settings",
+                  },
+                ]
+              }
+            />
           </div>
         </div>
+        <div
+          className="c9"
+          onClick={[Function]}
+        >
+          <div
+            data-mocked="Icon"
+            name="angle-left"
+            size="small"
+            variant="normal"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="c10"
+      data-mocked="Box"
+    >
+      <div
+        className="c11"
+        data-mocked="Box"
+      >
         <div
           className="c12"
         >
@@ -3662,264 +2484,131 @@ exports[`SceneLayout should render correctly in Viewing mode 1`] = `
   display: -ms-flexbox;
   display: flex;
   -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-}
-
-.c15 {
-  display: none;
-  position: absolute;
-  left: 41px;
-  top: 0;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  background-color: colorBackgroundDropdownItemDefault;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  z-index: 1;
-}
-
-.c15 > div {
-  border-top: 1px solid colorBorderDividerDefault;
-}
-
-.c15 > div:first-of-type {
-  border-top: 0;
-}
-
-.c16 {
-  padding: 0 20px 0 0px;
-  white-space: nowrap;
-}
-
-.c9 {
-  position: absolute;
-  left: 10px;
-  top: 10px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  z-index: 999;
-  background-color: colorBackgroundDropdownItemDefault;
-}
-
-.c17 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  z-index: 0;
-}
-
-<div
-  className="c0"
-  data-mocked="Box"
->
-  <div
-    className="c1"
-    data-mocked="Box"
-  >
-    <div
-      className="c2"
-      data-mocked="Box"
-      isFloating={false}
-    >
-      <div
-        className="c3"
-      >
-        <div
-          className="c4"
-        >
-          <div
-            className="c5"
-          >
-            <div
-              className="sidePanelTabs"
-              data-mocked="Tabs"
-              tabs={
-                Array [
-                  Object {
-                    "content": <Panel />,
-                    "id": "Hierarchy",
-                    "label": "Hierarchy",
-                  },
-                ]
-              }
-            />
-          </div>
-        </div>
-        <div
-          className="c6"
-          onClick={[Function]}
-        >
-          <div
-            data-mocked="Icon"
-            name="angle-left"
-            size="small"
-            variant="normal"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="c7"
-      data-mocked="Box"
-    >
-      <div
-        className="c8"
-        data-mocked="Box"
-      >
-        <div
-          className="c9"
-        >
-          <div
-            className="c10"
-          >
-            <div
-              className="c10"
-            >
-              <div
-                className="c11"
-                data-testid="camera-controls-orbit"
-                onPointerDown={[Function]}
-                onPointerEnter={[Function]}
-                onPointerLeave={[Function]}
-                onPointerUp={[Function]}
-              >
-                <div
-                  className="c12"
-                >
-                  <span
-                    aria-label="Orbit"
-                    role="img"
-                    title="Orbit"
-                  >
-                    <div
-                      className="c13"
-                      data-mocked="Icon"
-                      scale={1.04}
-                      variant="normal"
-                    >
-                      <div>
-                        <span>
-                          <svg />
-                        </span>
-                      </div>
-                    </div>
-                  </span>
-                </div>
-                <div
-                  className="c14"
-                >
-                  <svg
-                    viewBox="0 0 16 16"
-                  >
-                    <path
-                      d="M16 0v16L0 0z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
-                <div
-                  className="c15"
-                >
-                  <div
-                    className="c11"
-                    data-testid="camera-controls-orbit"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c12"
-                    >
-                      <span
-                        aria-label="Orbit"
-                        role="img"
-                        title="Orbit"
-                      >
-                        <div
-                          className="c13"
-                          data-mocked="Icon"
-                          scale={1.04}
-                          variant="normal"
-                        >
-                          <div>
-                            <span>
-                              <svg />
-                            </span>
-                          </div>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="c16"
-                      color="inherit"
-                      data-mocked="Box"
-                      leftPadding={0}
-                      variant="small"
-                    >
-                      3D Orbit
-                    </div>
-                  </div>
-                  <div
-                    className="c11"
-                    data-testid="camera-controls-pan"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c12"
-                    >
-                      <span
-                        aria-label="Pan"
-                        role="img"
-                        title="Pan"
-                      >
-                        <div
-                          className="c13"
-                          data-mocked="Icon"
-                          scale={1.04}
-                          variant="normal"
-                        >
-                          <div>
-                            <span>
-                              <svg />
-                            </span>
-                          </div>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="c16"
-                      color="inherit"
-                      data-mocked="Box"
-                      leftPadding={0}
-                      variant="small"
-                    >
-                      3D Pan
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+}
+
+.c15 {
+  display: none;
+  position: absolute;
+  left: 41px;
+  top: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  background-color: colorBackgroundDropdownItemDefault;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: 1;
+}
+
+.c15 > div {
+  border-top: 1px solid colorBorderDividerDefault;
+}
+
+.c15 > div:first-of-type {
+  border-top: 0;
+}
+
+.c16 {
+  padding: 0 20px 0 0px;
+  white-space: nowrap;
+}
+
+.c9 {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: 999;
+  background-color: colorBackgroundDropdownItemDefault;
+}
+
+.c17 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: 0;
+}
+
+<div
+  className="c0"
+  data-mocked="Box"
+>
+  <div
+    className="c1"
+    data-mocked="Box"
+  >
+    <div
+      className="c2"
+      data-mocked="Box"
+      isFloating={false}
+    >
+      <div
+        className="c3"
+      >
+        <div
+          className="c4"
+        >
+          <div
+            className="c5"
+          >
+            <div
+              className="sidePanelTabs"
+              data-mocked="Tabs"
+              tabs={
+                Array [
+                  Object {
+                    "content": <Panel />,
+                    "id": "Hierarchy",
+                    "label": "Hierarchy",
+                  },
+                ]
+              }
+            />
           </div>
         </div>
+        <div
+          className="c6"
+          onClick={[Function]}
+        >
+          <div
+            data-mocked="Icon"
+            name="angle-left"
+            size="small"
+            variant="normal"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="c7"
+      data-mocked="Box"
+    >
+      <div
+        className="c8"
+        data-mocked="Box"
+      >
         <div
           className="c9"
         >
@@ -4614,139 +3303,6 @@ exports[`SceneLayout should render correctly in Viewing mode with modal 1`] = `
             </div>
           </div>
         </div>
-        <div
-          className="c11"
-        >
-          <div
-            className="c12"
-          >
-            <div
-              className="c12"
-            >
-              <div
-                className="c13"
-                data-testid="camera-controls-orbit"
-                onPointerDown={[Function]}
-                onPointerEnter={[Function]}
-                onPointerLeave={[Function]}
-                onPointerUp={[Function]}
-              >
-                <div
-                  className="c14"
-                >
-                  <span
-                    aria-label="Orbit"
-                    role="img"
-                    title="Orbit"
-                  >
-                    <div
-                      className="c15"
-                      data-mocked="Icon"
-                      scale={1.04}
-                      variant="normal"
-                    >
-                      <div>
-                        <span>
-                          <svg />
-                        </span>
-                      </div>
-                    </div>
-                  </span>
-                </div>
-                <div
-                  className="c16"
-                >
-                  <svg
-                    viewBox="0 0 16 16"
-                  >
-                    <path
-                      d="M16 0v16L0 0z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
-                <div
-                  className="c17"
-                >
-                  <div
-                    className="c13"
-                    data-testid="camera-controls-orbit"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c14"
-                    >
-                      <span
-                        aria-label="Orbit"
-                        role="img"
-                        title="Orbit"
-                      >
-                        <div
-                          className="c15"
-                          data-mocked="Icon"
-                          scale={1.04}
-                          variant="normal"
-                        >
-                          <div>
-                            <span>
-                              <svg />
-                            </span>
-                          </div>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="c18"
-                      color="inherit"
-                      data-mocked="Box"
-                      leftPadding={0}
-                      variant="small"
-                    >
-                      3D Orbit
-                    </div>
-                  </div>
-                  <div
-                    className="c13"
-                    data-testid="camera-controls-pan"
-                    onPointerUp={[Function]}
-                  >
-                    <div
-                      className="c14"
-                    >
-                      <span
-                        aria-label="Pan"
-                        role="img"
-                        title="Pan"
-                      >
-                        <div
-                          className="c15"
-                          data-mocked="Icon"
-                          scale={1.04}
-                          variant="normal"
-                        >
-                          <div>
-                            <span>
-                              <svg />
-                            </span>
-                          </div>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="c18"
-                      color="inherit"
-                      data-mocked="Box"
-                      leftPadding={0}
-                      variant="small"
-                    >
-                      3D Pan
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
         <div
           className="c19"
           style={