ad2ecd73807a
fix: Use full Settings focused-card height (v3.6.45)
- time
- 2026-05-19 22:19 UTC · 5 months ago
- machine
- koh2
- parent
- c89a6e60f3e1
↓ peach-browser-ad2ecd73.tar.gzatlas at this save
files changed6 files
manifest.firefox.json+1 −1manifest.json+1 −1package-lock.json+2 −2package.json+1 −1src/popup/components/settings/StackDeck.tsx+24 −4src/popup/styles/settings-stack.css+0 −39manifest.firefox.json+1 −1
@@ -2,7 +2,7 @@22 "_comment_audio_capture": "Firefox does not honor the Chrome 'audioCapture' optional_permission — getUserMedia in WebExtensions is gated solely by the runtime permission prompt. Microphone access for chirp pairing works from the popup under the existing '<all_urls>' host permission; no manifest entry is required or accepted here.",33 "manifest_version": 3,44 "name": "Peach",5- "version": "3.6.44",5+ "version": "3.6.45",66 "description": "Zero-knowledge password manager",77 "browser_specific_settings": {88 "gecko": {manifest.json+1 −1
@@ -1,7 +1,7 @@11 {22 "manifest_version": 3,33 "name": "Peach",4- "version": "3.6.44",4+ "version": "3.6.45",55 "description": "Zero-knowledge password manager",66 "action": {77 "default_popup": "src/popup/index.html",package-lock.json+2 −2
@@ -1,12 +1,12 @@11 {22 "name": "peach",3- "version": "3.6.44",3+ "version": "3.6.45",44 "lockfileVersion": 3,55 "requires": true,66 "packages": {77 "": {88 "name": "peach",9- "version": "3.6.44",9+ "version": "3.6.45",1010 "dependencies": {1111 "@bokuweb/zstd-wasm": "^0.0.27",1212 "@stablelib/blake2s": "^2.0.1",package.json+1 −1
@@ -1,6 +1,6 @@11 {22 "name": "peach",3- "version": "3.6.44",3+ "version": "3.6.45",44 "description": "Zero-knowledge password manager",55 "type": "module",66 "scripts": {src/popup/components/settings/StackDeck.tsx+24 −4
@@ -13,13 +13,15 @@1313 }1414 1515 const EXPANDED_H = 258;16-const FOCUS_H = 420;16+const DEFAULT_FOCUS_H = 462;1717 const TAB_H = 46;1818 const TAB_OVERLAP = 14;1919 2020 export function StackDeck(props: StackDeckProps) {2121 const [deckOpen, setDeckOpen] = createSignal(true);22+ const [focusHeight, setFocusHeight] = createSignal(DEFAULT_FOCUS_H);2223 let focusedAt = 0;24+ let deckEl: HTMLDivElement | undefined;2325 2426 function handleBack() {2527 if (!deckOpen()) {@@ -32,7 +34,24 @@3234 onMount(() => {3335 const listener = () => handleBack();3436 window.addEventListener("peach:settings-back", listener);35- onCleanup(() => window.removeEventListener("peach:settings-back", listener));37+38+ const updateFocusHeight = () => {39+ if (!deckEl) return;40+ setFocusHeight(Math.round(deckEl.getBoundingClientRect().height));41+ };42+ updateFocusHeight();43+ const observer =44+ typeof ResizeObserver === "undefined"45+ ? undefined46+ : new ResizeObserver(updateFocusHeight);47+ if (deckEl) observer?.observe(deckEl);48+ if (!observer) window.addEventListener("resize", updateFocusHeight);49+50+ onCleanup(() => {51+ window.removeEventListener("peach:settings-back", listener);52+ observer?.disconnect();53+ if (!observer) window.removeEventListener("resize", updateFocusHeight);54+ });3655 });3756 3857 const activeIndex = createMemo(() => {@@ -61,6 +80,7 @@6180 </div>6281 6382 <div83+ ref={(el) => { deckEl = el; }}6484 class={`stk-deck ${deckOpen() ? "is-open" : "is-focused"}`}6585 onWheel={(e) => {6686 const cardEl = (e.target as HTMLElement).closest<HTMLElement>("[data-settings-card-id]");@@ -90,7 +110,7 @@90110 });91111 const top = () => {92112 if (active()) return 0;93- if (!deckOpen()) return FOCUS_H + 44 + distance() * 8;113+ if (!deckOpen()) return focusHeight() + 44 + distance() * 8;94114 return EXPANDED_H - TAB_OVERLAP + distance() * (TAB_H - TAB_OVERLAP);95115 };96116 const zIndex = () => (active() ? 99 : 50 - distance());@@ -103,12 +123,12 @@103123 concealed={concealed()}104124 top={top()}105125 zIndex={zIndex()}106- height={active() ? (deckOpen() ? EXPANDED_H : FOCUS_H) : TAB_H + 4}107126 onClick={() => {108127 if (active()) return;109128 props.onActiveChange(card.id);110129 setDeckOpen(false);111130 }}131+ height={active() ? (deckOpen() ? EXPANDED_H : focusHeight()) : TAB_H + 4}112132 >113133 {props.bodies[card.id]}114134 </StackCard>src/popup/styles/settings-stack.css+0 −39
@@ -217,45 +217,6 @@217217 outline-offset: 2px;218218 }219219 220-.stk-tray-handle {221- position: absolute;222- left: 50%;223- bottom: 8px;224- z-index: 120;225- transform: translateX(-50%);226- height: 30px;227- min-width: 112px;228- display: inline-flex;229- align-items: center;230- justify-content: center;231- border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);232- border-radius: 999px;233- background:234- linear-gradient(180deg, color-mix(in srgb, var(--peach-bg) 88%, transparent), color-mix(in srgb, var(--peach-bg) 72%, transparent)),235- color-mix(in srgb, var(--peach-accent) 10%, transparent);236- color: var(--peach-t1);237- font-family: var(--font-mono);238- font-size: 9px;239- letter-spacing: 0.2em;240- text-transform: uppercase;241- box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);242- cursor: pointer;243-}244-245-.stk-tray-handle::before {246- content: "";247- position: absolute;248- top: 5px;249- width: 26px;250- height: 2px;251- border-radius: 999px;252- background: color-mix(in srgb, currentColor 45%, transparent);253-}254-255-.stk-tray-handle span {256- transform: translateY(4px);257-}258-259220 .stk-row {260221 display: flex;261222 align-items: center;