Fix overflow when using custom width on web component

In the demo, the two right-aligned instances in the header, set
a custom width like so:

```
header .tsmb-form,
header typesense-minibar form {
  width: 30em;
}
```

Which overrides the default:

```
.tsmb-form,
typesense-minibar form {
  width: 20rem;
  max-width: 100%;
```

The problem is that, when using the new web component variant,
this `max-width` is uneffective because that relates to the
parent, and when using the HTML class, that works as expected,
but when using the web component, the parent is our own element,
`<typesense-minibar>`, which if it's in a default static postition,
or flex box without special shrink handling, then the parent will
default to 30rem to encompass the child, so the child limiting itself
to 100% max-width of the parent is not meaningful.

To fix this, set it on the `typesense-minibar` selector directly
as well.

This fixes an obvious bug in the demos when viewed on mobile or other
narrow viewports. Without the fix, the form overflows and causes
a scrollbar.

Author: Krinkle

typesense-minibar.css

@@ -24,6 +24,8 @@ typesense-minibar {
   --tsmb-color-primary30: #390f39;
   --tsmb-color-primary50: #9c3493;
   --tsmb-color-primary90: #fbdbfb;
+
+  max-width: 100%;
 }
 
 .tsmb-form,