F4RUKYLDRM commited on
Commit
bb42e34
·
1 Parent(s): d1ec2ee

Keep the action bar visible without scrolling

Browse files

Inside 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.

Files changed (1) hide show
  1. 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
- .actbar-row { 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%, transparent) !important; }
 
 
 
 
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 {