diff options
Diffstat (limited to 'src/ui/Selection.js')
| -rw-r--r-- | src/ui/Selection.js | 21 |
1 files changed, 12 insertions, 9 deletions
diff --git a/src/ui/Selection.js b/src/ui/Selection.js index d6e62ab..d8dfa88 100644 --- a/src/ui/Selection.js +++ b/src/ui/Selection.js @@ -6,28 +6,31 @@ import { Note } from './Note'; css` .drawer { - background: var(--theme-note-fg); + position: fixed; + inset: 0; + top: auto; - flex: 0 0 auto; + z-index: 200; + background: var(--theme-note-fg); /* wtf webkit */ -webkit-backface-visibility: hidden; } .drawer .handle { - height: 2rem; + height: 1.5rem; margin-bottom: 1rem; } .drawer .handle button { display: block; - height: 2rem; - line-height: 2rem; + height: 1rem; + line-height: 1rem; margin: -1rem auto 0; padding: 0.25rem; background: var(--theme-note-bg); - border-radius: 0.4rem; + border-radius: 0.2rem; } .drawer .scroller { @@ -44,7 +47,7 @@ css` align-items: flex-start; gap: 1rem; - padding: 0 2rem; + padding: 0 1.5rem; } .drawer .contents > * { @@ -66,7 +69,7 @@ export const Drawer = ({ height, children }) => { class="scroller" style={{ height, - 'max-height': hidden ? '0' : height, + 'max-height': hidden ? '1rem' : height, }} > <div class="contents"> @@ -78,7 +81,7 @@ export const Drawer = ({ height, children }) => { }; export const Selection = ({ items, toggleSelected }) => ( - <Drawer height="12rem" style={{ }} > + <Drawer height="8.55rem" > {items.map((item) => ( <Note {...item} |