MEdia query for sandbox

Tools/Config/config.json

@@ -60,7 +60,8 @@
         "gui",
         "inspector",
         "viewer",
-        "nodeEditor"
+        "nodeEditor",
+        "sandbox"
     ],
     "lintModules": [
         "core",

sandbox/src/components/footerButton.tsx

@@ -15,6 +15,7 @@ export class FooterButton extends React.Component<IFooterButtonProps> {
         if (!this.props.enabled) {
             return null;
         }
+        
 
         return (
             <div className="button" onClick={() => this.props.onClick()}>

sandbox/src/scss/animationBar.scss

@@ -126,4 +126,10 @@
         background: var(--footer-background);
         margin-top: 0px;
     }
-}
+}
+
+@media (max-width: 768px) {
+    .animationBar {       
+        margin-left: 0;
+    }
+}

sandbox/src/scss/footer.scss

@@ -164,4 +164,23 @@
             }
         }
     }
-}
+}
+
+@media (max-width: 768px) {
+    .footer {       
+        grid-template-columns: 0px 1fr 150px;
+
+        .dropup {
+            .dropup-content {    
+                width: 100px;
+            }
+        }
+
+        .button {    
+            &.long {
+                width: 100px;                
+                grid-template-columns: var(--footer-height) calc(100px - var(--footer-height));
+            }
+        }
+    }
+}

sandbox/src/scss/main.scss

@@ -96,3 +96,10 @@ html, body, #root {
             }
         }
 }
+
+@media (max-width: 768px) {
+    html {
+        --footer-height: 50px;
+        --font-size: 16px;
+    }
+}