Spaces:
Sleeping
Sleeping
feat(web): make ProgressBar sticky to top of viewport during generation
Browse files
web/src/components/ProgressBar.tsx
CHANGED
|
@@ -12,7 +12,7 @@ export default function ProgressBar() {
|
|
| 12 |
|
| 13 |
if (state.phase === "error") {
|
| 14 |
return (
|
| 15 |
-
<div className="border-b border-red-900/40 bg-red-950/
|
| 16 |
<span className="label-mono text-red-400">progress error</span>
|
| 17 |
<span className="ml-3 text-sm text-red-300/90">{state.message}</span>
|
| 18 |
</div>
|
|
@@ -37,7 +37,7 @@ export default function ProgressBar() {
|
|
| 37 |
: `Generating 路 ${fmt(elapsedS)}`;
|
| 38 |
|
| 39 |
return (
|
| 40 |
-
<div className="border-b border-[hsl(var(--ember))]/30 bg-[hsl(var(--ember))]/
|
| 41 |
<div className="flex items-center gap-4">
|
| 42 |
<span className="label-mono text-[hsl(var(--ember))] whitespace-nowrap">
|
| 43 |
{label}
|
|
|
|
| 12 |
|
| 13 |
if (state.phase === "error") {
|
| 14 |
return (
|
| 15 |
+
<div className="sticky top-0 z-40 border-b border-red-900/40 bg-red-950/80 backdrop-blur-md px-8 py-2.5">
|
| 16 |
<span className="label-mono text-red-400">progress error</span>
|
| 17 |
<span className="ml-3 text-sm text-red-300/90">{state.message}</span>
|
| 18 |
</div>
|
|
|
|
| 37 |
: `Generating 路 ${fmt(elapsedS)}`;
|
| 38 |
|
| 39 |
return (
|
| 40 |
+
<div className="sticky top-0 z-40 border-b border-[hsl(var(--ember))]/30 bg-[hsl(var(--ember))]/15 backdrop-blur-md px-8 py-2">
|
| 41 |
<div className="flex items-center gap-4">
|
| 42 |
<span className="label-mono text-[hsl(var(--ember))] whitespace-nowrap">
|
| 43 |
{label}
|