2c12e1f8fe0f

add missing peach-vault-sheet CSS (peek/open/dragging states + drag handle) so the mobile bottom sheet actually peeks instead of overlaying the entry view full-screen

time
2026-05-18 14:24 UTC · 5 months ago
machine
koh2
parent
66c3fd7b35ec
1 file src/popup/styles/popup.css+46 −0
src/popup/styles/popup.css+46 −0
@@ -1314,6 +1314,52 @@13141314   background: var(--peach-s1);13151315 }13161316 1317+/* Mobile vault bottom sheet — peeks above the entry view at rest, slides up1318+   when the user swipes or taps the peek strip. App.tsx writes1319+   `is-peeking` / `is-open` (and a live `transform` inline style during1320+   drag). PEEK_PX in App.tsx is 60. */1321+.peach-vault-sheet {1322+  position: fixed;1323+  inset: 0;1324+  z-index: 50;1325+  background: var(--peach-bg);1326+  will-change: transform;1327+  transform: translateY(100%);1328+  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);1329+  box-shadow: 0 -18px 38px -22px rgba(0, 0, 0, 0.55);1330+  border-top-left-radius: 18px;1331+  border-top-right-radius: 18px;1332+  overflow: hidden;1333+}1334+.peach-vault-sheet::before {1335+  content: "";1336+  position: absolute;1337+  top: 6px;1338+  left: 50%;1339+  transform: translateX(-50%);1340+  width: 38px;1341+  height: 4px;1342+  border-radius: 999px;1343+  background: var(--peach-t3);1344+  opacity: 0.6;1345+  z-index: 3;1346+  pointer-events: none;1347+}1348+.peach-vault-sheet.is-peeking {1349+  transform: translateY(calc(100% - 60px));1350+}1351+.peach-vault-sheet.is-open {1352+  transform: translateY(0);1353+}1354+.peach-vault-sheet.is-dragging {1355+  transition: none;1356+}1357+.peach-vault-sheet .peach-overlay-view {1358+  position: absolute;1359+  inset: 0;1360+  animation: none;1361+}1362+13171363 /* Native (mobile) variant: flat search-bar look matching the extension's13181364    `.peach-search-bar`. No back arrow — the sheet is dismissed by swipe.13191365    Search-glass icon on the left, counter on the right, no nav buttons. */

view file