peach-browser / history

cba40e4ebaa5

compact final onboarding card so all choices and nav fit within 520px popup, keep scroll as fallback

time
2026-08-18 04:40 UTC · 2 months ago
machine
koh2
agent
deepseek-v4-flash-free
session
onboarding create-vault choice
parent
4126cf698424

↓ peach-browser-cba40e4e.tar.gzatlas at this save

files changed2 files src/popup/styles/popup.css+47 −1src/popup/views/Onboarding.tsx+4 −1
src/popup/styles/popup.css+47 −1 
@@ -6930,6 +6930,7 @@69306930   position: relative;69316931   z-index: 1;69326932   flex: 1;6933+  min-height: 0;69336934   display: flex;69346935   flex-direction: column;69356936   gap: 10px;@@ -6945,14 +6946,48 @@69456946     0 12px 28px rgba(0, 0, 0, 0.12);69466947   cursor: pointer;69476948   user-select: none;6949+  overflow-y: auto;6950+  scrollbar-width: none;69486951   animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;69496952 }69506953 6954+.peach-onboarding-card::-webkit-scrollbar {6955+  display: none;6956+}6957+69516958 .peach-onboarding-card.is-exiting {69526959   animation: peach-card-out 120ms ease-in forwards;69536960   pointer-events: none;69546961 }69556962 6963+/* The final card carries the choice rows on top of the full intro copy, which6964+ * overflows the 520px popup at the default spacing. Tighten only here so the6965+ * three choices fit without scrolling above the nav (scroll stays available as6966+ * a fallback on shorter viewports). */6967+.peach-onboarding-card--final {6968+  gap: 6px;6969+  padding-top: 14px;6970+  padding-bottom: 12px;6971+}6972+6973+.peach-onboarding-card--final .peach-onboarding-body {6974+  font-size: 0.75rem;6975+  line-height: 1.5;6976+}6977+6978+.peach-onboarding-card--final .peach-onboarding-choice {6979+  min-height: 40px;6980+  padding: 6px 10px;6981+}6982+6983+.peach-onboarding-card--final .peach-onboarding-choice-row {6984+  gap: 6px;6985+}6986+6987+.peach-onboarding-card--final .peach-onboarding-choice-heading {6988+  margin: 2px 0 -2px;6989+}6990+69566991 .peach-onboarding-card-headline {69576992   margin: 0;69586993   font-family: var(--font-display);@@ -7125,9 +7160,20 @@71257160 }71267161 71277162 .peach-onboarding-choice--create {7128-  border-color: var(--peach-accent);7163+  border: 1px solid color-mix(in srgb, var(--peach-accent) 21%, transparent);71297164   background: var(--peach-accent);71307165   color: rgba(0, 0, 0, 0.92);7166+  font-weight: 500;7167+  box-shadow:7168+    0 1px 0 rgba(255, 255, 255, 0.08) inset,7169+    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),7170+    0 3px 16px var(--peach-glow),7171+    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);7172+}7173+7174+.peach-onboarding-choice--create:hover {7175+  background: var(--peach-accent);7176+  filter: brightness(1.1) saturate(1.05);71317177 }71327178 71337179 .peach-onboarding-choice--create .peach-onboarding-choice-detail {

view file

src/popup/views/Onboarding.tsx+4 −1 
@@ -94,7 +94,10 @@9494 9595       <div9696         class="peach-onboarding-card"97-        classList={{ "is-exiting": exiting() }}97+        classList={{98+          "is-exiting": exiting(),99+          "peach-onboarding-card--final": card() === CARDS.length - 1,100+        }}98101         onClick={() => {99102           // Final card: creation is an explicit choice; a stray card-body tap100103           // must not silently start vault creation.

view file