CSS: Fix icon overlapping long search input values

Reserve a bit of right padding equal so that typed text and input
cursor don't get obscured behind the "slash" or "close" icons.

When JS is disabled, or when the form is closed and the "slash"
option is not enabled, don't reserve this padding to avoid an
unexplained gap.

It is possible for the "slash" icon and "close" icon to have different
sizes (one is based on "sm" size, the other based on "input" size,
although currently their padding evens out). Right now, this is
setting the padding only based on the "close" icon since that is the
only icon that can appear while the text field is focussed.

I think it feels more smooth if the cut off does not change or shift
when the input is focussed/de-focussed, so I choose not to have
two different paddings.

To avoid an ugly state where old text in the input field is rendered
behind the transparent "slash" icon, I added a solid background color
to the slash icon equal to the input background color, which makes
sure that the slash icon maintains an "on top" appearance.

== npm run size ==

A few unrelated spaces are changed to improve file compression.

CSS:
* Before: 1834
* After:  1869 (+35 B, +2%)

Author: Krinkle

typesense-minibar.css

@@ -5,8 +5,8 @@
   --tsmb-size-highlight: 2px;
   --tsmb-size-base: 1rem;
   --tsmb-size-sm: 0.8rem;
-  --tsmb-size-half: calc( var(--tsmb-size-sm) * 0.5 );
-  --tsmb-size-input: calc( var(--tsmb-size-base) * 1.2 );
+  --tsmb-size-half: calc(var(--tsmb-size-sm)/2);
+  --tsmb-size-input: calc(var(--tsmb-size-base) * 1.2);
 
   --tsmb-color-base-background: #fff;
   --tsmb-color-base30: #333;
@@ -76,9 +76,16 @@
   opacity: 0.5;
 }
 
+/* js only */
+.tsmb-form--open input[type=search],
+.tsmb-form--slash input[type=search] {
+  padding-right: calc(var(--tsmb-size-sm) + var(--tsmb-size-base) + var(--tsmb-size-base));
+}
+
 .tsmb-icon-close {
+  box-sizing: border-box;
   position: absolute;
-  top: calc(50% - var(--tsmb-size-base) / 2);
+  top: calc(50% - var(--tsmb-size-base)/2);
   right: var(--tsmb-size-base);
   width: var(--tsmb-size-base);
   height: var(--tsmb-size-base);
@@ -97,7 +104,7 @@
   content: '/';
   display: inline-block;
   position: absolute;
-  top: calc(50% - (var(--tsmb-size-input) + var(--tsmb-size-sm) / 2) / 2);
+  top: calc(50% - (var(--tsmb-size-input) + var(--tsmb-size-sm)/2)/2);
   right: var(--tsmb-size-sm);
   width: calc(var(--tsmb-size-input) + var(--tsmb-size-sm)/2);
   height: calc(var(--tsmb-size-input) + var(--tsmb-size-sm)/2);
@@ -106,6 +113,7 @@
   line-height: calc(var(--tsmb-size-input) + var(--tsmb-size-sm)/2);
   text-align: center;
 
+  background: var(--tsmb-color-base-background);
   border: var(--tsmb-size-edge) solid var(--tsmb-color-base90);
   border-radius: var(--tsmb-size-radius);
   color: var(--tsmb-color-base90);