a2ae3ccee74d
fix tab overlap, add hover lift/glow, scroll-to-expand replaces SECTIONS button
- time
- 2026-05-19 14:27 UTC · 5 months ago
- machine
- koh2
- parent
- 10b1e40ac44f
↓ peach-browser-a2ae3cce.tar.gzatlas at this save
files changed3 files
src/popup/components/settings/StackCard.tsx+12 −2src/popup/components/settings/StackDeck.tsx+2 −11src/popup/styles/settings-stack.css+8 −0src/popup/components/settings/StackCard.tsx+12 −2
@@ -11,6 +11,7 @@1111 zIndex: number;1212 height: number;1313 onClick: () => void;14+ onScrollToTop?: () => void;1415 children: JSX.Element;1516 }1617 @@ -37,7 +38,8 @@3738 style={{3839 background: `var(${props.spec.bgVar})`,3940 color: `var(${props.spec.fgVar})`,40- transform: `translateY(${props.top}px)`,41+ "--stk-card-top": `${props.top}px`,42+ transform: `translateY(var(--stk-card-top))`,4143 "z-index": props.zIndex,4244 height: `${props.height}px`,4345 }}@@ -50,7 +52,15 @@5052 </div>5153 <h2 class="stk-card-title">{props.spec.title}</h2>5254 <p class="stk-card-lede">{props.spec.lede}</p>53- <div class="stk-card-body">{props.children}</div>55+ <div56+ class="stk-card-body"57+ onWheel={(e) => {58+ if (!props.onScrollToTop) return;59+ if (e.deltaY < 0 && (e.currentTarget as HTMLElement).scrollTop === 0) {60+ props.onScrollToTop();61+ }62+ }}63+ >{props.children}</div>5464 </article>5565 );5666 }src/popup/components/settings/StackDeck.tsx+2 −11
@@ -71,7 +71,7 @@7171 const top = () => {7272 if (active()) return 0;7373 if (!deckOpen()) return FOCUS_H + 44 + distance() * 8;74- return EXPANDED_H + distance() * (TAB_H - TAB_OVERLAP);74+ return EXPANDED_H - TAB_OVERLAP + distance() * (TAB_H - TAB_OVERLAP);7575 };7676 const zIndex = () => (active() ? 99 : 50 - distance());7777 @@ -89,22 +89,13 @@8989 props.onActiveChange(card.id);9090 setDeckOpen(false);9191 }}92+ onScrollToTop={active() && !deckOpen() ? () => setDeckOpen(true) : undefined}9293 >9394 {props.bodies[card.id]}9495 </StackCard>9596 );9697 }}9798 </For>98- <Show when={!deckOpen()}>99- <button100- class="stk-tray-handle"101- type="button"102- aria-label="Show settings sections"103- onClick={() => setDeckOpen(true)}104- >105- <span>sections</span>106- </button>107- </Show>10899 </div>109100 </section>110101 );src/popup/styles/settings-stack.css+8 −0
@@ -112,6 +112,14 @@112112 cursor: default;113113 }114114 115+.stk-card.is-tab:hover {116+ transform: translateY(calc(var(--stk-card-top) - 3px));117+ box-shadow:118+ 0 1px 0 color-mix(in srgb, var(--peach-t0) 5%, transparent) inset,119+ 0 8px 20px rgba(0, 0, 0, 0.25),120+ 0 0 18px color-mix(in srgb, currentColor 12%, transparent);121+}122+115123 .stk-card.is-concealed {116124 opacity: 0;117125 pointer-events: none;