diff --git a/src/listbox/ListBoxOption.tsx b/src/listbox/ListBoxOption.tsx index 7d2336ea..d36c8458 100644 --- a/src/listbox/ListBoxOption.tsx +++ b/src/listbox/ListBoxOption.tsx @@ -99,9 +99,15 @@ export function ListBoxOption(props: OptionProps) { css={css` display: flex; justify-content: space-between; - align-items: center; + align-items: flex-start; color: ${theme.textColors.white90}; padding: ${theme.spacing.padding8}px ${theme.spacing.padding16}px; + position: relative; + & > .ac-icon-wrap { + position: absolute; + top: ${theme.spacing.padding8}px; + right: ${theme.spacing.padding8}px; + } `} > {contents} diff --git a/stories/Picker.stories.tsx b/stories/Picker.stories.tsx index a757cb1c..cea9ec83 100644 --- a/stories/Picker.stories.tsx +++ b/stories/Picker.stories.tsx @@ -94,7 +94,7 @@ const Gallery: Story = () => {
* + * { margin-top: 16px; } `} @@ -116,35 +116,44 @@ const Gallery: Story = () => { Sometimes Always - setFrequency(selected as string)} +
- -
- Rarely - - Only run on occasion - -
-
- -
- Sometimes - - Run once a day - -
-
- -
- Always - - Run continuously - -
-
- + setFrequency(selected as string)} + > + +
+ Rarely + + Only run on occasion + +
+
+ +
+ Sometimes + + Run once a day so that things are synchronized on the daily + +
+
+ +
+ Always + + Run continuously so that everything stays up to date + +
+
+
+
);