chore: friendlier ui

the ui is more responsive for smaller devices

app/components/chat/BaseChat.module.scss

@@ -12,8 +12,30 @@
       opacity: 0;
     }
   }
+
+  @media (max-width: 768px) {
+    position: fixed;
+    top: var(--header-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
+    background: var(--bolt-elements-bg-depth-1);
+
+    &[data-chat-visible='false'] {
+      display: none;
+    }
+  }
 }
 
 .Chat {
   opacity: 1;
+
+  @media (max-width: 768px) {
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
 }

app/styles/variables.scss

@@ -218,11 +218,17 @@
 :root {
   --header-height: 54px;
   --chat-max-width: 37rem;
-  --chat-min-width: 640px;
+  --chat-min-width: min(640px, 100%);
-  --workbench-width: min(calc(100% - var(--chat-min-width)), 1536px);
+  --workbench-width: min(calc(100% - min(var(--chat-min-width), 100vw)), 1536px);
   --workbench-inner-width: var(--workbench-width);
   --workbench-left: calc(100% - var(--workbench-width));
 
+  @media (max-width: 768px) {
+    --chat-min-width: 100%;
+    --workbench-width: 100%;
+    --workbench-left: 0;
+  }
+
   /* Toasts */
   --toastify-color-progress-success: var(--bolt-elements-icon-success);
   --toastify-color-progress-error: var(--bolt-elements-icon-error);