cleanup: fixed mode switch on mobile such that it's on top-right with

margin for chat container
devflowinc · Nov 11, 2024 · 3ac55e3 · 3ac55e3
1 parent 247decc
commit 3ac55e3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/clients/search-component/src/TrieveModal/Chat/ChatMode.tsx b/clients/search-component/src/TrieveModal/Chat/ChatMode.tsx
@@ -29,7 +29,7 @@ export const ChatMode = () => {
     <Suspense>
       <div className="chat-outer-wrapper" ref={modalRef}>
         <div
-          className={`close-modal-button ${props.type}`}
+          className={`close-modal-button chat ${props.type}`}
           onClick={() => setOpen(false)}
         >
           <svg

diff --git a/clients/search-component/src/TrieveModal/Search/SearchMode.tsx b/clients/search-component/src/TrieveModal/Search/SearchMode.tsx
@@ -100,7 +100,7 @@ export const SearchMode = () => {
   return (
     <Suspense fallback={<div className="hidden"> </div>}>
       <div
-        className={`close-modal-button ${props.type}`}
+        className={`close-modal-button search ${props.type}`}
         onClick={() => setOpen(false)}
       >
         <svg

diff --git a/clients/search-component/src/TrieveModal/index.css b/clients/search-component/src/TrieveModal/index.css
@@ -46,7 +46,7 @@ body {
       @apply flex flex-col h-full top-0 sm:top-[calc(40vh-225px)] pt-4 max-h-[100vh] sm:h-fit w-full sm:w-[90vw] rounded-none sm:rounded-lg;
 
       .chat-outer-wrapper {
-        @apply justify-between w-full h-full m-0 sm:mt-12;
+        @apply justify-between w-full h-full mt-10 sm:mt-12;
       }
       .system-information-wrapper {
         @apply sm:mb-8;
@@ -112,7 +112,6 @@ body {
     .mode-switch-wrapper {
       @apply flex items-center justify-end mt-2 absolute top-0.5 right-2 z-30 font-medium;
 
-      /* apply hidden if both .search and .has-query are present */
       &.search.has-query {
         @apply hidden;
       }
@@ -138,12 +137,16 @@ body {
       }
     }
 
-    .mode-switch-wrapper.ecommerce {
+    .mode-switch-wrapper.ecommerce.search {
       @apply top-[2.625rem];
 
       right: calc(max(calc(50vw - 36rem), 1.25rem) + 0.5rem);
     }
 
+    .mode-switch-wrapper.ecommerce.chat {
+      @apply right-[4.5rem] -top-0.5;
+    }
+
     ul.tags {
       @apply flex flex-wrap items-center text-xs relative !mt-0;
       color: var(--tv-zinc-800);
@@ -543,13 +546,12 @@ body {
     }
 
     .close-modal-button.ecommerce {
-      @apply w-full flex justify-end text-xs items-center absolute top-0 right-1.5 p-2 gap-0.5 cursor-pointer;
+      @apply w-full flex justify-end text-xs items-center absolute top-1 right-1.5 p-2 gap-0.5 cursor-pointer;
 
       > .close-icon {
         @apply w-4 h-4 fill-current;
       }
     }
-
     .input-wrapper {
       @apply sticky top-0 z-10 flex flex-col gap-2;
       background-color: var(--bg-color);