From 5491389113b9e057304b07decc69f512cfeca377 Mon Sep 17 00:00:00 2001
From: Dustin Loring <dustinwloring1988@gmail.com>
Date: Thu, 16 Jan 2025 11:47:42 -0500
Subject: [PATCH] chore: friendlier ui

the ui is more responsive for smaller devices
---
 app/components/chat/BaseChat.module.scss | 22 ++++++++++++++++++++++
 app/styles/variables.scss                | 10 ++++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/app/components/chat/BaseChat.module.scss b/app/components/chat/BaseChat.module.scss
index 3d6ed4c..cc6883f 100644
--- a/app/components/chat/BaseChat.module.scss
+++ b/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;
+  }
 }
diff --git a/app/styles/variables.scss b/app/styles/variables.scss
index 38967b1..dc78516 100644
--- a/app/styles/variables.scss
+++ b/app/styles/variables.scss
@@ -218,11 +218,17 @@
 :root {
   --header-height: 54px;
   --chat-max-width: 37rem;
-  --chat-min-width: 640px;
-  --workbench-width: min(calc(100% - var(--chat-min-width)), 1536px);
+  --chat-min-width: min(640px, 100%);
+  --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);