jquery · CodeSandwich · Nov 22, 2023 · Nov 27, 2023 · Nov 29, 2023 · Nov 29, 2023
diff --git a/API-Style.md b/API-Style.md
@@ -25,6 +25,9 @@ Misc sizes:
 * `--tsmb-size-edge`: Line thickness of edges, e.g. border-width.
 * `--tsmb-size-radius`: Roundness, e.g. border-radius.
 * `--tsmb-size-highlight`: Line thickness of cursor highlight, e.g. border-left-width.
+* `--tsmb-size-listbox-width`: The maximum width of the listbox. The minimum is the width of the input field.
+* `--tsmb-size-listbox-max-height`: The maximum height of the listbox.
+* `--tsmb-size-listbox-right`: Set to `0` to create a right-aligned listbox that expands to the left.
 
 Base layout, for idle or inactive input field:
 * `--tsmb-color-base-background`: Background color, e.g. white in lightmode.
@@ -34,12 +37,12 @@ Base layout, for idle or inactive input field:
 
 Active layout, for active input field and result box. Defaults to the same colors as above.
 * `--tsmb-color-focus-background`: Background color, e.g. white in lightmode.
-* `--tsmb-color-focus30`: Hard contrast (focussed input text). 
-* `--tsmb-color-focus50`: Medium contrast (for search result excerpt, focussed placeholder, footer). 
+* `--tsmb-color-focus30`: Hard contrast (focussed input text).
+* `--tsmb-color-focus50`: Medium contrast (for search result excerpt, focussed placeholder, footer).
 * `--tsmb-color-focus90`: Subtle contrast (for result borders).
 
 Primary colors, by default only used in the active layout:
-* `--tsmb-color-primary30`: Hard contrast, for colorful dark background or dark text. 
+* `--tsmb-color-primary30`: Hard contrast, for colorful dark background or dark text.
 * `--tsmb-color-primary50`: Medium contrast, for colorful links or buttons.
 * `--tsmb-color-primary90`: Subtle contrast, for selection background.
 

diff --git a/demo/demo-theme.css b/demo/demo-theme.css
@@ -17,19 +17,19 @@ header > * {
   align-self: center;
 }
 
-header h2 {
-  order: 1;
-}
-
 .demo-logo {
   background-image: url(../assets/logo-text-dark.svg);
 }
 
 header .tsmb-form {
+  width: 30em;
+  margin-left: auto;
   --tsmb-color-base-background: #691c69;
   --tsmb-color-base30: var(--tsmb-color-primary90);
   --tsmb-color-base50: #c090c0;
   --tsmb-color-base90: #c090c0;
+  --tsmb-size-listbox-right: 0;
+  --tsmb-size-listbox-width: calc(min(50rem, 80vw));
 }
 header .tsmb-form:not(:focus-within)::before {
   filter: invert();

diff --git a/demo/demo.css b/demo/demo.css
@@ -62,13 +62,9 @@ main {
 
 .demo-right-form {
   margin-left: auto;
+  --tsmb-size-listbox-right: 0;
 }
 
-.demo-right-form [role="listbox"] {
-  right: 0;
-}
-
-
 .demo-stylecontrol fieldset {
   background: #fff;
 }
diff --git a/demo/index.html b/demo/index.html
@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="demo-theme.css">
 <body>
   <header>
-    <a href="../" class="demo-logo demo-logo-img">Minibar</a>
+    <a href="../" class="demo-logo">Minibar</a>
 
     <form role="search" class="tsmb-form" data-origin="https://typesense.jquery.com" data-collection="qunitjs_com" data-key="Zh8mMgohXECel9wjPwqT7lekLSG3OCgz" data-foot="true" action="https://duckduckgo.com">
       <input type="search" name="q" aria-label="Search" placeholder="Search..." autocomplete="off">

diff --git a/typesense-minibar.css b/typesense-minibar.css
@@ -7,6 +7,9 @@
   --tsmb-size-sm: 0.8rem;
   --tsmb-size-half: calc(var(--tsmb-size-sm)/2);
   --tsmb-size-input: calc(var(--tsmb-size-base) * 1.2);
+  --tsmb-size-listbox-right: auto;
+  --tsmb-size-listbox-width: calc(min(30rem, 60vw));
+  --tsmb-size-listbox-max-height: 70vh;
 
   --tsmb-color-base-background: #fff;
   --tsmb-color-base30: #333;
@@ -51,9 +54,11 @@
 .tsmb-form:focus-within {
   color: var(--tsmb-color-focus30);
 }
+
 .tsmb-form:focus-within input[type=search] {
   background: var(--tsmb-color-focus-background);
 }
+
 .tsmb-form:focus-within input[type=search]::placeholder {
   color: var(--tsmb-color-focus50);
 }
@@ -100,6 +105,10 @@
   display: block !important;
 }
 
+.tsmb-form--slash::after {
+  display: none;
+}
+
 .tsmb-form--slash:not(.tsmb-form--open):not(:focus-within)::after {
   content: '/';
   display: inline-block;
@@ -122,13 +131,16 @@
 .tsmb-form [role=listbox] {
   position: absolute;
   z-index: 10;
-
+  right: var(--tsmb-size-listbox-right);
   background: var(--tsmb-color-focus-background);
   color: var(--tsmb-color-focus30);
-  width: 100%;
-  max-height: 70vh;
+  margin-top: var(--tsmb-size-half);
+  min-width: 100%;
+  width: var(--tsmb-size-listbox-width);
+  max-height: var(--tsmb-size-listbox-max-height);
   overflow: auto;
   border: var(--tsmb-size-edge) solid var(--tsmb-color-focus90);
+  border-radius: var(--tsmb-size-radius);
   box-shadow: 0 var(--tsmb-size-sm) 20px rgba(0,0,0,0.12);
 }
 
@@ -143,9 +155,11 @@
   text-decoration: none;
   border-left: var(--tsmb-size-highlight) solid transparent;
 }
+
 .tsmb-form:not([data-group=true]) [role=option]:not(:first-child) a {
   border-top: var(--tsmb-size-edge) solid var(--tsmb-color-focus90);
 }
+
 .tsmb-form[data-group=true] [role=option] a {
   margin: 0 var(--tsmb-size-base);
   padding: var(--tsmb-size-sm);
@@ -199,33 +213,13 @@
   box-shadow: 0 0 10px rgba(0,0,0,0.12);
   text-decoration: none;
 }
+
 .tsmb-foot::before {
   content: 'Search by';
   color: var(--tsmb-color-focus50);
 }
+
 .tsmb-foot::after {
   content: ' Typesense';
   color: #0300b0;
 }
-
-@media (max-width: 480px) {
-  .tsmb-form {
-    width: 100%;
-  }
-
-  .tsmb-form input[type=search] {
-    border-radius: 0;
-  }
-}
-
-@media (min-width: 768px) {
-  .tsmb-form [role=listbox] {
-    border-radius: var(--tsmb-size-radius);
-    min-width: 500px;
-    margin-top: var(--tsmb-size-half);
-  }
-
-  .tsmb-form--slash::after {
-    display: none;
-  }
-}