fix: the list has too much scroll height when there are few items and…

… extra padding (#165)

* feat: remove padding from the popover

make it so that the min-height of the `.items` is the limit height given by `useListbox`

it handles the edgecase where min-height is 150px (default for `virtualize` items)
and the height of the items is smaller than  150px which renders a white scrollable area after the items

* feat: add story to test the min height edge case

* feat: add empty source story

* feat: remove `styleMap`

* feat: remove the new stories

src/listbox/index.ts

@@ -36,7 +36,11 @@ const Listbox = <I>(props: Props<I>) => {
 		[itemHeight],
 	);
 
-	return html`<div class="items" ${ref((el) => (listRef.current = el))}>
+	return html`<div
+		class="items"
+		${ref((el) => (listRef.current = el))}
+		style="min-height: ${height}px"
+	>
 		<div virtualizer-sizer></div>
 		${virtualize({
 			items,

src/listbox/style.css.ts

@@ -24,6 +24,9 @@ const style = css`
 		margin: 0;
 		border: 0;
 	}
+	:host([popover]) {
+		padding: 0;
+	}
 	.items {
 		position: relative;
 		overflow-y: auto;

stories/cosmoz-autocomplete.stories.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import { html } from 'lit-html';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { classMap } from 'lit-html/directives/class-map.js';