diff --git a/main/view.js b/main/view.js
index 58492cf27..e958c9208 100644
--- a/main/view.js
+++ b/main/view.js
@@ -364,13 +364,19 @@ export function initializeUI() {
 }
 
 const adjustViewport = () => {
-	const vh = window.innerHeight * 0.01;
+	const vvHeight = window.visualViewport?.height || window.innerHeight;
+	const vh = vvHeight * 0.01;
 	document.documentElement.style.setProperty("--vh", `${vh}px`);
+	document.documentElement.style.setProperty("--app-height", `${vvHeight}px`);
 };
 
-// Adjust viewport on page load and resize
 window.addEventListener("load", adjustViewport);
 window.addEventListener("resize", adjustViewport);
+window.addEventListener("orientationchange", adjustViewport);
+
+if (window.visualViewport) {
+	window.visualViewport.addEventListener("resize", adjustViewport);
+}
 
 /*
 function toggleToolbox() {
diff --git a/style.css b/style.css
index ad47248dc..32d280c35 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,9 @@
+:root {
+  --vh: 1vh;
+  --app-height: 100vh;
+  --menu-height: 50px;
+}
+
 #info-panel {
   margin-top: 15px;
   margin-left: 10px;
@@ -150,8 +156,9 @@ body {
   user-select: none;
   outline: none;
   -webkit-tap-highlight-color: transparent;
-  height: 100vh;
-  width: 100vw;
+  width: 100%;
+  height: calc(var(--vh, 1vh) * 100); /* fallback */
+  height: 100dvh; /* modern viewport unit */
 }
 
 body {
@@ -159,6 +166,11 @@ body {
   gap: 0;
   box-sizing: border-box;
   font-family: "Asap", Helvetica, Arial, Lucida, sans-serif !important;
+
+  padding-top: env(safe-area-inset-top);
+  padding-right: env(safe-area-inset-right);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
 }
 
 /* Form Elements */
@@ -243,285 +255,48 @@ path.blocklyPath.blockly-ws-search-highlight.blockly-ws-search-current {
 
 /* Layout Styles */
 #maincontent {
-  width: 100vw;
-  height: calc(100vh - 50px);
+  width: 100%;
+  height: calc(var(--app-height, calc(var(--vh, 1vh) * 100)) - var(--menu-height));
   display: flex;
   margin: 0;
   gap: 0;
 }
 
-#blocklyDiv {
-  height: 100%;
-  width: 100%;
-  border: none;
-}
-
-#menu {
-  display: flex;
-  height: 50px;
-  min-height: 50px;
-  max-height: 50px;
-  align-items: center;
-  justify-content: space-between;
-  max-width: 100vw;
-  gap: 5px;
-  z-index: 10;
-  background-color: rgba(255, 255, 255, 0.9);
-  padding: 8px 8px 5px 0;
-  border-radius: 5px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+/* Desktop/tablet default */
+#codePanel {
+  flex: 2 1 0;
+  height: calc(var(--app-height, calc(var(--vh, 1vh) * 100)) - var(--menu-height));
   box-sizing: border-box;
 }
 
-#menuleft,
-#menumiddle,
-#menuright {
-  display: flex;
-  align-items: center;
-}
-
-#codePanelButtons {
-  display: flex;
-  height: 50px;
-  justify-content: space-between;
-  flex-shrink: 0;
-  border: none;
-}
-
-/* Buttons */
-.bigbutton {
-  display: inline-block;
-  margin: 0 3px;
-  padding: 5px;
-  font-size: 18px;
-  background-color: #f0f0f0;
-  color: black;
-  border: none;
-  border-radius: 15px;
-  cursor: pointer;
-  touch-action: manipulation;
-}
-
-.bigbutton:hover {
-  background-color: #e0e0e0;
-}
-
-/* Gizmo Buttons */
-.gizmo-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-  padding: 0;
-  margin: 0;
+#rightArea {
+  flex: 1 1 0;
+  height: calc(var(--app-height, calc(var(--vh, 1vh) * 100)) - var(--menu-height));
   box-sizing: border-box;
 }
 
-.gizmo-button {
-  padding: 5px;
-  font-size: 12px;
-  cursor: pointer;
-  border-radius: 5px;
-  border: none;
-  background-color: #004d4d;
- /*background-color: #317873;*/
-  /*background-color: #511D91;*/
-  color: white;
-}
-
-/* Dropdown Styles */
-.dropdown {
-  position: relative;
-}
-
-.dropdown-content {
-  display: none;
-  position: absolute;
-  background-color: #f9f9f9;
-  min-width: 160px;
-  max-width: 200px;
-  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
-  z-index: 1;
-  border-radius: 5px;
-  white-space: nowrap;
-  right: 0;
-  left: auto;
-}
-
-.dropdown:hover .dropdown-content {
-  display: block;
-}
-
-.dropdown-content button {
-  font-size: 1em;
-}
-
-/* Shape Menu */
-#shape-menu {
-  position: relative;
-  display: inline-block;
-  z-index: 80;
-}
-
-#shapes-dropdown {
-  position: absolute;
-  bottom: -50px;
-  left: 0;
-  display: block;
-  background-color: rgba(1, 1, 1, 0.5);
-  padding: 10px 10px 10px 5px;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-  border-radius: 5px;
-  width: 320px;
-  overflow: hidden;
-}
-
-#shapes-dropdown ul {
-  display: flex;
-  padding: 0;
-  margin: 2px;
-  list-style: none;
-  gap: 8px;
-  overflow-x: auto;
-  scroll-behavior: smooth;
-  white-space: nowrap;
-  scrollbar-width: none;
-}
-
-#shapes-dropdown ul::-webkit-scrollbar {
-  display: none;
-}
-
-#shapes-dropdown ul li {
-  background-color: rgba(255, 255, 255, 0.5);
-  border-radius: 5px;
-  padding: 5px;
-  display: inline-block;
-  cursor: pointer;
-}
-
-#shapes-dropdown ul li img {
-  width: 50px;
-  height: 50px;
-}
-
-#shapes-dropdown ul li:hover {
-  background-color: rgba(255, 255, 255, 0.7);
-}
-
-#shapes-dropdown ul li:hover img {
-  transform: scale(1.2);
-}
-
-/* Keyboard navigation styles */
-#shapes-dropdown ul li.keyboard-navigable {
-  outline: none;
-}
-
-#shapes-dropdown ul li.keyboard-focused {
-  background-color: rgba(255, 255, 255, 0.9);
-  box-shadow: 0 0 0 2px #007acc;
-  border-radius: 5px;
-}
-
-#shapes-dropdown ul li.keyboard-focused img {
-  transform: scale(1.2);
-}
-
-/* Scrollable Container with Arrows */
-.scrollable-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-#model-row {
-  overflow-x: hidden;
-  white-space: nowrap;
-  flex-grow: 1;
-  display: flex;
-  gap: 10px;
-}
-
-.scroll-button {
-  background-color: rgba(0, 0, 0, 0.5);
-  color: white;
-  border: none;
-  cursor: pointer;
-  font-size: 18px;
-  padding: 5px 10px;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 2;
-  width: 30px;
-  height: 30px;
-}
-
-.scroll-button.left {
-  left: -15px;
-}
-
-.scroll-button.right {
-  right: -15px;
-}
-
-/* Responsive Styles */
+/* Mobile */
 @media (max-width: 768px) {
-  :root {
-  --dynamic-offset: 65px;
-  }
-
-  .blocklyTreeRowContentContainer {
-  flex-direction: column !important;
-  background-color: var(--category-color) !important;
-  color: white;
-  font-size: 10px;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  }
-
-  .blocklyTreeRow {
-  flex-direction: column;
-  height: unset;
-  line-height: unset;
-  margin-bottom: 3px;
-  margin-top: 0;
-  padding: 3px;
-  padding-top: 0px;
-  white-space: nowrap;
-  }
-
-  .blocklyTreeRowContentContainer {
-    padding-top: 20px; /* Reserve space for the search box */
-  }
-
   #maincontent {
-  width: 200vw;
-  height: calc(100vh - var(--dynamic-offset));
-  overflow-x: auto;
-  }
-
-  #scene-explorer-host,
-  #inspector-host,
-  #toggleDesign {
-  display: none !important;
+    width: 200vw;
+    height: calc(var(--app-height, calc(var(--vh, 1vh) * 100)) - var(--dynamic-offset));
+    overflow-x: auto;
   }
 
   #codePanel,
   #rightArea {
-  flex-basis: 100vw;
-  max-width: 100vw;
-  height: calc(100vh - var(--dynamic-offset));
-  flex-grow: 1;
+    flex-basis: 100vw;
+    max-width: 100vw;
+    height: calc(var(--app-height, calc(var(--vh, 1vh) * 100)) - var(--dynamic-offset));
+    flex-grow: 1;
   }
+}
 
-  #bottomBar {
+#bottomBar {
   position: fixed;
-  bottom: 0;
   left: 0;
-  width: 100vw;
+  right: 0;
+  bottom: 0;
   height: 25px;
   background-color: #511D91;
   color: white;
@@ -531,19 +306,7 @@ path.blocklyPath.blockly-ws-search-highlight.blockly-ws-search-current {
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  padding: 0 2px;
-  }
-
-  #switchViews {
-  background-color: transparent;
-  border: none;
-  color: white;
-  padding: 5px 10px;
-  margin: 0;
-  font-size: 16px;
-  cursor: pointer;
-  border-radius: 5px;
-  }
+  padding: 0 2px max(0px, env(safe-area-inset-bottom)) 2px;
 }
 
 #flocklink {
@@ -618,24 +381,24 @@ path.blocklyPath.blockly-ws-search-highlight.blockly-ws-search-current {
   #maincontent {
   display: flex;
   width: 100vw;
-  height: calc(100vh - 50px);
+  height: calc(var(--app-height, calc(var(--vh, 1vh) * 100)) - var(--menu-height));
   }
 
   #codePanel {
   flex: 2 1 0;
-  height: calc(100vh - 50px);
+  height: calc(var(--app-height, calc(var(--vh, 1vh) * 100)) - var(--menu-height));
   box-sizing: border-box;
   }
 
   #rightArea {
   flex: 1 1 0;
-  height: calc(100vh - 50px);
+  height: calc(var(--app-height, calc(var(--vh, 1vh) * 100)) - var(--menu-height));
   box-sizing: border-box;
   }
 
-  #bottomBar {
+#bottomBar {
   display: none;
-  }
+}
 }
 
 /* Logo */