this repo has no description
fix(signin): opaque dropdown panel and per-row click handling
Drop the .glass blur for the suggestions panel so text behind it does not
bleed through; render an opaque white surface (and dark equivalent in the
dark phase). Replace the ul/li/button structure with direct buttons and
move selection to onPointerDown to make every row hoverable and clickable
regardless of focus order.
Made-with: Cursor
+72
-56
+29
-14
assets/styles.css
+29
-14
assets/styles.css
···
2416
2416
overflow: visible;
2417
2417
z-index: 1;
2418
2418
}
2419
-
/* Uses shared .glass for frosted fill + border; only layout/typography here */
2419
+
/* Dropdown: opaque white panel so text underneath does not bleed through */
2420
2420
.signin-form-preview {
2421
2421
position: absolute;
2422
2422
z-index: 200;
2423
2423
top: calc(100% + 0.45rem);
2424
2424
left: 0;
2425
2425
right: 0;
2426
-
padding: 0.45rem 0.55rem;
2427
-
display: flex;
2428
-
flex-direction: column;
2429
-
gap: 0.2rem;
2426
+
padding: 0.4rem;
2427
+
display: block;
2430
2428
font-size: 0.92rem;
2431
2429
color: #0e1428;
2430
+
isolation: isolate;
2431
+
}
2432
+
/* Override .glass so the dropdown is fully opaque (no see-through) */
2433
+
.signin-form-preview.glass {
2434
+
background: #ffffff;
2435
+
border: 1px solid rgba(18, 26, 47, 0.12);
2436
+
backdrop-filter: none;
2437
+
-webkit-backdrop-filter: none;
2438
+
border-radius: 18px;
2439
+
box-shadow:
2440
+
0 18px 44px rgba(14, 20, 40, 0.18),
2441
+
0 6px 16px rgba(14, 20, 40, 0.08);
2432
2442
}
2433
2443
.dark-phase .signin-form-preview {
2434
2444
color: #f3f5fb;
2435
2445
}
2446
+
.dark-phase .signin-form-preview.glass {
2447
+
background: #161c30;
2448
+
border-color: rgba(255, 255, 255, 0.22);
2449
+
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 6px 16px rgba(0, 0, 0, 0.35);
2450
+
}
2436
2451
.signin-form-preview-list {
2437
-
list-style: none;
2438
-
margin: 0;
2439
-
padding: 0;
2452
+
display: flex;
2453
+
flex-direction: column;
2454
+
gap: 2px;
2440
2455
max-height: min(52vh, 320px);
2441
2456
overflow-y: auto;
2442
2457
-webkit-overflow-scrolling: touch;
2443
2458
}
2444
-
.signin-form-preview-li {
2445
-
margin: 0;
2446
-
padding: 0;
2447
-
}
2448
2459
.signin-form-preview-row {
2460
+
position: relative;
2461
+
z-index: 1;
2449
2462
display: flex;
2450
2463
align-items: center;
2451
2464
gap: 0.7rem;
···
2458
2471
font: inherit;
2459
2472
color: inherit;
2460
2473
width: 100%;
2474
+
pointer-events: auto;
2475
+
-webkit-tap-highlight-color: transparent;
2461
2476
}
2462
2477
.signin-form-preview-row:hover,
2463
2478
.signin-form-preview-row:focus-visible {
2464
-
background: rgba(42, 90, 168, 0.08);
2479
+
background: rgba(42, 90, 168, 0.1);
2465
2480
outline: none;
2466
2481
}
2467
2482
.dark-phase .signin-form-preview-row:hover,
2468
2483
.dark-phase .signin-form-preview-row:focus-visible {
2469
-
background: rgba(255, 255, 255, 0.08);
2484
+
background: rgba(255, 255, 255, 0.1);
2470
2485
}
2471
2486
.signin-form-preview-avatar {
2472
2487
width: 36px;
+43
-42
islands/SignInForm.tsx
+43
-42
islands/SignInForm.tsx
···
170
170
{!previewLoading.value &&
171
171
missReason.value === null &&
172
172
matches.value.length > 0 && (
173
-
<ul class="signin-form-preview-list">
173
+
<div class="signin-form-preview-list">
174
174
{matches.value.map((m) => (
175
-
<li key={m.did} class="signin-form-preview-li">
176
-
<button
177
-
type="button"
178
-
class="signin-form-preview-row"
179
-
role="option"
180
-
onClick={() =>
181
-
onSelectMatch(m)}
182
-
>
183
-
{m.avatarUrl
175
+
<button
176
+
key={m.did}
177
+
type="button"
178
+
class="signin-form-preview-row"
179
+
role="option"
180
+
onPointerDown={(e) => {
181
+
e.preventDefault();
182
+
onSelectMatch(m);
183
+
}}
184
+
>
185
+
{m.avatarUrl
186
+
? (
187
+
<img
188
+
class="signin-form-preview-avatar"
189
+
src={m.avatarUrl}
190
+
alt=""
191
+
loading="lazy"
192
+
decoding="async"
193
+
/>
194
+
)
195
+
: (
196
+
<span
197
+
class="signin-form-preview-avatar"
198
+
aria-hidden="true"
199
+
/>
200
+
)}
201
+
<span class="signin-form-preview-meta">
202
+
{m.displayName
184
203
? (
185
-
<img
186
-
class="signin-form-preview-avatar"
187
-
src={m.avatarUrl}
188
-
alt=""
189
-
loading="lazy"
190
-
decoding="async"
191
-
/>
204
+
<>
205
+
<span class="signin-form-preview-name">
206
+
{m.displayName}
207
+
</span>
208
+
<span class="signin-form-preview-handle">
209
+
@{m.handle}
210
+
</span>
211
+
</>
192
212
)
193
213
: (
194
-
<span
195
-
class="signin-form-preview-avatar"
196
-
aria-hidden="true"
197
-
/>
214
+
<span class="signin-form-preview-name">
215
+
@{m.handle}
216
+
</span>
198
217
)}
199
-
<span class="signin-form-preview-meta">
200
-
{m.displayName
201
-
? (
202
-
<>
203
-
<span class="signin-form-preview-name">
204
-
{m.displayName}
205
-
</span>
206
-
<span class="signin-form-preview-handle">
207
-
@{m.handle}
208
-
</span>
209
-
</>
210
-
)
211
-
: (
212
-
<span class="signin-form-preview-name">
213
-
@{m.handle}
214
-
</span>
215
-
)}
216
-
</span>
217
-
</button>
218
-
</li>
218
+
</span>
219
+
</button>
219
220
))}
220
-
</ul>
221
+
</div>
221
222
)}
222
223
{!previewLoading.value &&
223
224
missReason.value === null &&