From 65e61bf8993e29288b5f6b351461540d1b1f6cd9 Mon Sep 17 00:00:00 2001
From: skeptrune <nick.k@trieve.ai>
Date: Tue, 17 Dec 2024 14:49:44 -0800
Subject: [PATCH] cleanup: mobile view of search component modal

---
 .../src/TrieveModal/index.css                 | 12 +++++---
 .../src/TrieveModal/index.tsx                 | 28 +++++++++++++++++++
 server/src/public/navbar.html                 |  2 +-
 server/src/public/page.html                   | 20 +++++++++----
 server/src/public/product.html                |  6 ++--
 server/static/output.css                      | 27 ++++++++++++------
 6 files changed, 72 insertions(+), 23 deletions(-)

diff --git a/clients/search-component/src/TrieveModal/index.css b/clients/search-component/src/TrieveModal/index.css
index 55eb6ff9c..b2fb16621 100644
--- a/clients/search-component/src/TrieveModal/index.css
+++ b/clients/search-component/src/TrieveModal/index.css
@@ -23,7 +23,7 @@ body {
   }
 
   #trieve-search-modal {
-    @apply animate-contentShow scroll-smooth fixed top-[calc(40%-30vh)] sm:top-[calc(25vh-225px)] left-[50%] max-h-[60vh] w-[90vw] sm:max-w-[800px] -translate-x-[50%] rounded-lg shadow-2xl focus:outline-none z-[999] overflow-hidden text-base;
+    @apply animate-contentShow scroll-smooth fixed top-[calc(40%-30vh)] left-[50%] max-h-[60vh] w-[90vw] sm:max-w-[800px] -translate-x-[50%] rounded-lg shadow-2xl focus:outline-none z-[999] overflow-hidden text-base;
 
     color: var(--tv-zinc-950);
     background-color: var(--tv-zinc-50);
@@ -56,7 +56,7 @@ body {
     }
 
     &.chat-modal-mobile {
-      @apply flex flex-col top-0 sm:top-[calc(25vh-225px)] pt-4 max-h-[100vh] w-full sm:w-[90vw] rounded-none sm:rounded-lg;
+      @apply flex flex-col top-0 sm:top-[calc(40%-30vh)] pt-4 max-h-[100vh] w-full sm:w-[90vw] rounded-none sm:rounded-lg;
 
       .chat-outer-wrapper {
         @apply justify-between w-full h-full mt-10 sm:mt-12;
@@ -188,7 +188,7 @@ body {
     }
 
     .trieve-footer {
-      @apply sticky px-3 items-center bottom-0 flex flex-col;
+      @apply sticky px-3 items-center bottom-[1px] flex flex-col;
       background-color: var(--tv-zinc-50);
       border-color: var(--tv-zinc-200);
 
@@ -651,6 +651,10 @@ body {
       }
     }
 
+    input.search-input {
+      @apply pr-8;
+    }
+
     input.search-input.ecommerce {
       @apply rounded-sm;
     }
@@ -752,7 +756,7 @@ body {
       }
 
       &.start-chat {
-        @apply items-center flex max-w-[calc(90vw-70px)] sm:max-w-none;
+        @apply items-center flex max-w-[calc(90vw)] sm:max-w-none;
 
         h4 {
           @apply pl-0 pt-0 max-w-[calc(90vw-120px)] sm:max-w-[400px];
diff --git a/clients/search-component/src/TrieveModal/index.tsx b/clients/search-component/src/TrieveModal/index.tsx
index 70ce614cb..83947f9a5 100644
--- a/clients/search-component/src/TrieveModal/index.tsx
+++ b/clients/search-component/src/TrieveModal/index.tsx
@@ -22,6 +22,34 @@ const Modal = () => {
   const { mode, open, setOpen, setMode, props } = useModalState();
   const { askQuestion, chatWithGroup } = useChatState();
 
+  useEffect(() => {
+    const onViewportResize = () => {
+      const viewportHeight = window.visualViewport?.height;
+      const trieveSearchModal = document.getElementById("trieve-search-modal");
+      if (trieveSearchModal) {
+        trieveSearchModal.style.maxHeight = `${viewportHeight}px`;
+      }
+
+      const chatOuterWrapper = document.querySelector(
+        ".chat-outer-wrapper"
+      );
+      if (chatOuterWrapper) {
+        (chatOuterWrapper as HTMLElement).style.maxHeight =
+          `calc(${viewportHeight}px - 100px)`;
+      }
+      if (chatOuterWrapper) {
+        chatOuterWrapper.scrollTop =
+          chatOuterWrapper.scrollHeight;
+      }
+    };
+
+    window.addEventListener("resize", onViewportResize);
+
+    return () => {
+      window.removeEventListener("resize", onViewportResize);
+    };
+  }, [open]);
+
   useEffect(() => {
     const script = document.createElement("script");
     script.src =
diff --git a/server/src/public/navbar.html b/server/src/public/navbar.html
index 0d7cc5bf3..c22a58411 100644
--- a/server/src/public/navbar.html
+++ b/server/src/public/navbar.html
@@ -1,6 +1,6 @@
 <nav class="bg-white border-b">
   <div
-    class="max-w-screen-2xl mx-auto w-full p-2 flex items-center justify-center flex-col gap-2 sm:gap-4 sm:justify-between sm:!flex-row"
+    class="max-w-screen-2xl mx-auto w-full p-2 flex items-center justify-center flex-col gap-2 sm:gap-4 sm:justify-between sm:!flex-row md:gap-4 lg:gap-6"
   >
     <a class="flex items-center" href="https://trieve.ai">
       <img
diff --git a/server/src/public/page.html b/server/src/public/page.html
index 87676e639..a7834d629 100644
--- a/server/src/public/page.html
+++ b/server/src/public/page.html
@@ -54,8 +54,6 @@
     <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/languages/javascript.min.js"></script>
 
     <script type="module">
-      hljs.highlightAll();
-
       window.paramsData = {{params | tojson}};
 
       const brandFontFamily = window.paramsData.brandFontFamily;
@@ -81,6 +79,7 @@
       :root {
         --brand-color: #a33eb5;
         --brand-color: {{params.brandColor}};
+        --hero-bg-color: {{params.heroPattern.backgroundColor}};
       }
 
       *,
@@ -91,6 +90,10 @@
         padding: 0;
       }
 
+      #product-display {
+        background-color: var(--hero-bg-color);
+      }
+
       nav {
         border-color: var(--brand-color);
 
@@ -150,6 +153,11 @@
         font-family: "Maven Pro", sans-serif;
       }
 
+      h1,h2,h3,h4,h5,h6,p,pre,button,nav,.paragraph-text {
+        position: relative;
+        z-index: 15;
+      }
+
       main {
         line-height: 1.6;
         position: relative;
@@ -345,7 +353,7 @@
     const circleSearchAnimation = annotate(openTrieveModalElement, {
       type: "circle",
       color: window.paramsData.brandColor || "black",
-      padding: 35,
+      padding: 40,
     });
 
     const brandUnderlineAnimation = annotate(brandNameElement, {
@@ -363,17 +371,17 @@
       document.documentElement.clientWidth || document.body.clientWidth;
     canvas.height =
       document.documentElement.clientHeight || document.body.clientHeight;
-    canvas.style.zIndex = "-1";
+    canvas.style.zIndex = "1";
     const rc = rough.canvas(canvas);
 
     const openTrieveRect = openTrieveModalElement.getBoundingClientRect();
-    let endOpenX = openTrieveRect.right + 133;
+    let endOpenX = openTrieveRect.right + 138;
     let endOpenY = openTrieveRect.bottom + 45;
     if (endOpenX > window.innerWidth) {
       endOpenX = window.innerWidth - 125;
       endOpenY += 15;
     }
-    const startOpenX = openTrieveRect.right + 55;
+    const startOpenX = openTrieveRect.right + 60;
     const startOpenY = openTrieveRect.bottom - 15;
 
     rc.path(
diff --git a/server/src/public/product.html b/server/src/public/product.html
index 378266ce3..5cd058885 100644
--- a/server/src/public/product.html
+++ b/server/src/public/product.html
@@ -1,7 +1,5 @@
 <div class="max-w-full">
-  <div
-    class="mx-auto px-4 pt-16 sm:px-6 sm:pt-24 lg:max-w-7xl lg:px-8 mt-24 sm:mt-6"
-  >
+  <div id="product-display" class="mx-auto py-4 px-4 mt-40 sm:px-6 sm:mt-30 lg:max-w-7xl lg:px-8">
     <section class="lg:flex gap-2 lg:gap-x-8 lg:gap-y-10 xl:gap-x-16">
       <div class="lg:w-1/2">
         <img
@@ -16,7 +14,7 @@ <h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">
           {{ params.singleProductOptions.productName }}
         </h1>
 
-        <div class="mt-2 text-gray-500">
+        <div class="mt-2 text-gray-500 paragraph-text">
           {{ params.singleProductOptions.productDescriptionHtml|safe }}
         </div>
 
diff --git a/server/static/output.css b/server/static/output.css
index 76ef9558a..639146673 100644
--- a/server/static/output.css
+++ b/server/static/output.css
@@ -604,6 +604,10 @@ video {
   margin-top: 1rem;
 }
 
+.mt-40 {
+  margin-top: 10rem;
+}
+
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -845,12 +849,13 @@ video {
   padding-bottom: 0.75rem;
 }
 
-.pl-0\.5 {
-  padding-left: 0.125rem;
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
 }
 
-.pt-16 {
-  padding-top: 4rem;
+.pl-0\.5 {
+  padding-left: 0.125rem;
 }
 
 .text-center {
@@ -972,16 +977,18 @@ video {
     padding-bottom: 6rem;
   }
 
-  .sm\:pt-24 {
-    padding-top: 6rem;
-  }
-
   .sm\:text-3xl {
     font-size: 1.875rem;
     line-height: 2.25rem;
   }
 }
 
+@media (min-width: 768px) {
+  .md\:gap-4 {
+    gap: 1rem;
+  }
+}
+
 @media (min-width: 1024px) {
   .lg\:mr-8 {
     margin-right: 2rem;
@@ -1003,6 +1010,10 @@ video {
     max-width: 80rem;
   }
 
+  .lg\:gap-6 {
+    gap: 1.5rem;
+  }
+
   .lg\:gap-x-8 {
     -moz-column-gap: 2rem;
          column-gap: 2rem;