this repo has no description
fix(signin): float dropdown above footer + no-cache dev headers
- Remove the trapping z-index on .signin-form-preview-wrap; the wrap was
creating its own stacking context, so the dropdown's z-index could not
rise above sibling page chrome (logo, footer links).
- Lift the form's .glass card on /explore/create with z-index:50 so its
whole subtree (including the dropdown anchored inside it) paints above
the later-in-DOM footer instead of being covered by it.
- Restore the lightly translucent glass surface for the dropdown now
that stacking is correct.
- Add no-store/Cache-Control headers and explicit hmr port to the Vite
dev server so CSS / island / route changes reflect on the next request
without manual hard refresh.
Made-with: Cursor
+34
-12
+14
-11
assets/styles.css
+14
-11
assets/styles.css
···
2411
2411
}
2412
2412
2413
2413
/* ---- Sign-in handle preview dropdown ---- */
2414
+
/* IMPORTANT: do NOT set z-index here. position:relative alone is enough
2415
+
to anchor the absolutely positioned dropdown without creating a stacking
2416
+
context that would trap the dropdown below higher-z-index siblings
2417
+
(footer logo, footer links, nav, etc.). */
2414
2418
.signin-form-preview-wrap {
2415
2419
position: relative;
2416
2420
overflow: visible;
2417
-
z-index: 1;
2418
2421
}
2419
-
/* Dropdown: opaque white panel so text underneath does not bleed through */
2422
+
/* Dropdown floats above page chrome (nav z-index 101). */
2420
2423
.signin-form-preview {
2421
2424
position: absolute;
2422
-
z-index: 200;
2425
+
z-index: 1000;
2423
2426
top: calc(100% + 0.45rem);
2424
2427
left: 0;
2425
2428
right: 0;
···
2429
2432
color: #0e1428;
2430
2433
isolation: isolate;
2431
2434
}
2432
-
/* Override .glass so the dropdown is fully opaque (no see-through) */
2435
+
/* Lightly translucent surface — readable but still has a hint of glass. */
2433
2436
.signin-form-preview.glass {
2434
-
background: #ffffff;
2437
+
background: rgba(255, 255, 255, 0.92);
2435
2438
border: 1px solid rgba(18, 26, 47, 0.12);
2436
-
backdrop-filter: none;
2437
-
-webkit-backdrop-filter: none;
2439
+
backdrop-filter: blur(14px);
2440
+
-webkit-backdrop-filter: blur(14px);
2438
2441
border-radius: 18px;
2439
2442
box-shadow:
2440
-
0 18px 44px rgba(14, 20, 40, 0.18),
2441
-
0 6px 16px rgba(14, 20, 40, 0.08);
2443
+
0 20px 50px rgba(14, 20, 40, 0.22),
2444
+
0 6px 16px rgba(14, 20, 40, 0.1);
2442
2445
}
2443
2446
.dark-phase .signin-form-preview {
2444
2447
color: #f3f5fb;
2445
2448
}
2446
2449
.dark-phase .signin-form-preview.glass {
2447
-
background: #161c30;
2450
+
background: rgba(22, 28, 48, 0.92);
2448
2451
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);
2452
+
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.4);
2450
2453
}
2451
2454
.signin-form-preview-list {
2452
2455
display: flex;
+8
-1
routes/explore/create.tsx
+8
-1
routes/explore/create.tsx
···
29
29
<p class="text-body mt-2">{t.create.body}</p>
30
30
<div
31
31
class="glass"
32
-
style={{ padding: "1.75rem", marginTop: "2rem" }}
32
+
style={{
33
+
padding: "1.75rem",
34
+
marginTop: "2rem",
35
+
position: "relative",
36
+
/* Lift the form card above the footer so the handle preview dropdown,
37
+
anchored inside this card, can paint over later page chrome. */
38
+
zIndex: 50,
39
+
}}
33
40
>
34
41
{isOAuthConfigured()
35
42
? <SignInForm />
+12
vite.config.ts
+12
vite.config.ts
···
7
7
/** Match local OAuth / site URL defaults; fail fast if another dev server is still bound. */
8
8
port: 5173,
9
9
strictPort: true,
10
+
/** Disable browser caching during dev so every save is reflected on the next request
11
+
* without needing a hard refresh. Vite HMR still applies in-place for CSS and islands. */
12
+
headers: {
13
+
"Cache-Control": "no-store, no-cache, must-revalidate, max-age=0",
14
+
"Pragma": "no-cache",
15
+
"Expires": "0",
16
+
},
17
+
/** Make sure HMR uses the same port so client/server stay in sync. */
18
+
hmr: { port: 5173 },
19
+
/** Reload the page when files outside the JS module graph change (e.g. assets/*.css
20
+
* imports, server route files). */
21
+
watch: { usePolling: false },
10
22
},
11
23
});