feat(web): mobile-friendly (responsive) preferences UI (#1234)

2022-07-09 00:38:44 +05:30
parent 961d1fb8d4
commit 66f97f0612
17 changed files with 89 additions and 71 deletions
--- a/packages/web/src/javascripts/Components/Dropdown/StyledListboxButton.tsx
+++ b/packages/web/src/javascripts/Components/Dropdown/StyledListboxButton.tsx
@@ -1,7 +1,9 @@
 import { ListboxButton } from '@reach/listbox'
 import styled from 'styled-components'

-const StyledListboxButton = styled(ListboxButton)`
+const StyledListboxButton = styled(ListboxButton).attrs(() => ({
+  className: 'w-full md:w-fit',
+}))`
  &[data-reach-listbox-button] {
    background-color: var(--sn-stylekit-background-color);
    border-radius: 0.25rem;
@@ -14,7 +16,6 @@ const StyledListboxButton = styled(ListboxButton)`
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    padding-top: 0.375rem;
-    width: fit-content;
  }
 `