CSS: Add variables for listbox size

* Make the listbox size explicitly configurable with custom CSS
  variables. This includes the width and the height, but also a toggle
  for forcing the scaling of the listbox to the left. This should make
  the default CSS easily usable on pages with a wide range of search
  box locations. The demo page is updated to present this.

* Remove the `@media` sections. They were very opinionated, the current
  approach is more flexible. The viewport width ranges didn't match each
  other, so there were actually 3 width ranges, each of them with a
  different set of CSS attributes. The result was that only in the wide
  viewport the listbox was flexible and good looking, and narrowing it
  caused glitches.

* Move `.tsmb-form--slash::after` sections closer to each other,
  so it's easier to follow the slash icon behavior.

* Clean up white spaces.

Closes #2.

Author: CodeSandwich

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 always 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.
 

demo/demo-theme.css

@@ -22,10 +22,12 @@ header > * {
 }
 
 header .tsmb-form {
+  width: 30em;
   --tsmb-color-base-background: #691c69;
   --tsmb-color-base30: var(--tsmb-color-primary90);
   --tsmb-color-base50: #c090c0;
   --tsmb-color-base90: #c090c0;
+  --tsmb-size-listbox-width: calc(min(50rem, 80vw));
 }
 header .tsmb-form:not(:focus-within)::before {
   filter: invert();

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;
 }

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;
-  }
-}