feature: properly shrink on page width decrease

Author: cdxker

clients/docusaurus-theme-search/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trieve/docusaurus-search-theme",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "author": "cdxker <[email protected]>",
   "license": "MIT",
   "main": "dist/index.js",
@@ -24,7 +24,7 @@
     "cli-progress": "^3.12.0",
     "micromatch": "^4.0.7",
     "pagefind": "^1.1.0",
-    "trieve-search-component": "^0.0.33"
+    "trieve-search-component": "^0.0.34"
   },
   "peerDependencies": {
     "@docusaurus/core": "^2.0.0 || ^3.0.0",

clients/search-component/README.md

@@ -92,6 +92,7 @@ declare module "solid-js" {
 | brandName            | string                                                                                         | null                                       |
 | problemLink          | string                                                                                         | null                                       |
 | accentColor          | string                                                                                         | #CB53EB                                    |
+| responsive           | boolean                                                                                        | false                                      |
 
 ### Search Results
 

clients/search-component/example/src/routes/index.lazy.tsx

@@ -113,6 +113,7 @@ export default function Home() {
               brandName="Trieve"
               brandColor="#b557c5"
               allowSwitchingModes={true}
+              responsive={false}
             />
 
             <div className="mt-8 text-sm rounded overflow-hidden max-w-[100vw]">

clients/search-component/package.json

@@ -7,7 +7,7 @@
     "dist/*",
     "dist/**/*"
   ],
-  "version": "0.0.33",
+  "version": "0.0.34",
   "license": "MIT",
   "scripts": {
     "dev": "run-p watch:css watch:js",

clients/search-component/src/TrieveModal/OpenModalButton.tsx

@@ -14,8 +14,8 @@ export const OpenModalButton = () => {
           <ButtonEl />
         </button>
       ) : (
-        <button id="open-trieve-modal" type="button" className={props.theme}>
-          <div>
+        <button id="open-trieve-modal" type="button" className={`${props.theme} ${props.responsive ?? false ? 'responsive' : ''}`}>
+          <div className={`${props.responsive ?? false ? 'responsive' : ''}`}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="16"
@@ -30,9 +30,11 @@ export const OpenModalButton = () => {
               <circle cx="11" cy="11" r="8"></circle>
               <path d="m21 21-4.3-4.3"></path>
             </svg>
-            <div>{props.placeholder}</div>
+            <div className={`${props.responsive ?? false ? 'responsive' : ''}`}>
+                {props.placeholder}
+            </div>
           </div>
-          <span key={"open-button"} className="open">
+          <span key={"open-button"} className={`open ${props.responsive ?? false ? 'responsive' : ''}`}>
             {keyCombo.map((key) => (
               <Fragment key={key.key}>
                 {key.ctrl ? (

clients/search-component/src/TrieveModal/index.css

@@ -863,7 +863,16 @@ body {
 }
 body {
   #open-trieve-modal {
-    @apply w-full flex items-center text-sm leading-6 ring-1 shadow-sm justify-between  rounded-md border-0 py-1.5 px-2 sm:text-sm truncate gap-2 min-w-[43px]  max-w-[300px];
+    @apply  flex items-center text-sm leading-6 ring-1 shadow-sm justify-between  rounded-md border-0 py-1.5 px-2 sm:text-sm truncate gap-2;
+
+    &:not(.responsive) {
+      @apply w-full min-w-[43px] max-w-[300px];
+    }
+
+    &.responsive {
+      @apply sm:w-full sm:min-w-[43px] sm:max-w-[300px];
+    }
+
     color: var(--tv-zinc-400);
     background-color: var(--tv-zinc-50);
     outline: none;
@@ -883,7 +892,15 @@ body {
     }
 
     > div {
-      @apply flex items-center gap-3 min-w-[42px];
+      @apply flex items-center gap-3;
+
+      &.responsive {
+        @apply sm:min-w-[42px];
+      }
+
+      &:not(.responsive) {
+        @apply min-w-[42px];
+      }
 
       svg {
         @apply min-w-4 flex-none;
@@ -896,6 +913,11 @@ body {
 
       > div {
         @apply truncate min-w-0;
+        &.responsive {
+          @media (max-width: 640px) {
+            display: none;
+          }
+        }
       }
     }
 
@@ -904,6 +926,12 @@ body {
       color: var(--tv-zinc-400);
       border-color: var(--tv-zinc-200);
 
+      &.responsive {
+          @media (max-width: 640px) {
+            display: none;
+          }
+      }
+
       @media screen and (-webkit-font-smoothing: antialiased) {
         .mac {
           display: block;

clients/search-component/src/utils/hooks/modal-context.tsx

@@ -51,6 +51,7 @@ export type ModalProps = {
   allowSwitchingModes?: boolean;
   defaultCurrency?: string;
   currencyPosition?: currencyPosition;
+  responsive?: boolean;
 };
 
 const defaultProps = {
@@ -70,6 +71,7 @@ const defaultProps = {
   type: "docs" as ModalTypes,
   allowSwitchingModes: true,
   currencyPosition: "after" as currencyPosition,
+  responsive: false
 };
 
 const ModalContext = createContext<{