Spaces:
Sleeping
Sleeping
Fix: target all Streamlit scroll containers to prevent horizontal shift
Browse files- interface/main.py +26 -2
interface/main.py
CHANGED
|
@@ -25,10 +25,34 @@ st.set_page_config(
|
|
| 25 |
)
|
| 26 |
|
| 27 |
# ── FIX: Prevent horizontal layout shift from scrollbar appearing/disappearing
|
|
|
|
|
|
|
|
|
|
| 28 |
st.markdown("""
|
| 29 |
<style>
|
| 30 |
-
|
| 31 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 32 |
}
|
| 33 |
</style>
|
| 34 |
""", unsafe_allow_html=True)
|
|
|
|
| 25 |
)
|
| 26 |
|
| 27 |
# ── FIX: Prevent horizontal layout shift from scrollbar appearing/disappearing
|
| 28 |
+
# HF Spaces renders Streamlit inside an iframe. The scroll container is NOT
|
| 29 |
+
# <html> but internal Streamlit elements. We target every possible scroll
|
| 30 |
+
# container and use scrollbar-gutter:stable (modern) + overflow-y:scroll (fallback).
|
| 31 |
st.markdown("""
|
| 32 |
<style>
|
| 33 |
+
/* Modern solution: reserves space for scrollbar even when not needed */
|
| 34 |
+
html,
|
| 35 |
+
body,
|
| 36 |
+
[data-testid="stAppViewContainer"],
|
| 37 |
+
[data-testid="stMain"],
|
| 38 |
+
.main,
|
| 39 |
+
section[data-testid="stMain"],
|
| 40 |
+
[data-testid="stVerticalBlockBorderWrapper"],
|
| 41 |
+
.stMainBlockContainer {
|
| 42 |
+
scrollbar-gutter: stable !important;
|
| 43 |
+
}
|
| 44 |
+
|
| 45 |
+
/* Fallback: force scrollbar always visible on all potential containers */
|
| 46 |
+
[data-testid="stAppViewContainer"],
|
| 47 |
+
[data-testid="stMain"],
|
| 48 |
+
section.main {
|
| 49 |
+
overflow-y: scroll !important;
|
| 50 |
+
}
|
| 51 |
+
|
| 52 |
+
/* Prevent any horizontal overflow that could cause shifts */
|
| 53 |
+
[data-testid="stMainBlockContainer"],
|
| 54 |
+
[data-testid="stVerticalBlock"] {
|
| 55 |
+
overflow-x: hidden !important;
|
| 56 |
}
|
| 57 |
</style>
|
| 58 |
""", unsafe_allow_html=True)
|