Spaces:
Running on Zero
Running on Zero
Commit ·
bb42e34
1
Parent(s): d1ec2ee
Keep the action bar visible without scrolling
Browse filesInside the Hugging Face Space frame, each page's action bar (Build
biological architecture, Train, Run inference) sat below the fold on
1440x900 and 1280x720 screens, so users could miss it. Pin the bar to
the bottom of the visible frame with position: sticky. Switch Gradio's
container from overflow: hidden, which disables sticky positioning, to
overflow: clip.
- biolmnet/ui/styles.py +5 -1
biolmnet/ui/styles.py
CHANGED
|
@@ -318,7 +318,11 @@ body, .gradio-container {
|
|
| 318 |
.sect { margin: 0 0 9px; padding-bottom: 8px; border-bottom: 1px solid var(--color-text); }
|
| 319 |
.sect-spaced { margin-top: 26px !important; }
|
| 320 |
|
| 321 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 322 |
.actbar-note { font: 500 10px/1.4 var(--font-mono); color: var(--color-muted-2); }
|
| 323 |
.actbar-note.error { color: var(--color-error); }
|
| 324 |
.actbar-buttons {
|
|
|
|
| 318 |
.sect { margin: 0 0 9px; padding-bottom: 8px; border-bottom: 1px solid var(--color-text); }
|
| 319 |
.sect-spaced { margin-top: 26px !important; }
|
| 320 |
|
| 321 |
+
/* Gradio's container sets overflow: hidden, which disables position: sticky inside it;
|
| 322 |
+
clip still clips stray content without breaking the sticky action bar below. */
|
| 323 |
+
.gradio-container { overflow: clip !important; }
|
| 324 |
+
/* Pinned to the bottom of the visible frame so the page's main action never needs a scroll to find. */
|
| 325 |
+
.actbar-row { position: sticky !important; bottom: 0; z-index: 20; margin-top: auto !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 20px !important; padding: 16px 30px !important; border-top: 1px solid var(--color-divider) !important; background: color-mix(in srgb, var(--color-text) 3%, var(--color-bg)) !important; box-shadow: 0 -8px 18px -14px color-mix(in srgb, var(--color-text) 45%, transparent); }
|
| 326 |
.actbar-note { font: 500 10px/1.4 var(--font-mono); color: var(--color-muted-2); }
|
| 327 |
.actbar-note.error { color: var(--color-error); }
|
| 328 |
.actbar-buttons {
|