Update app.py

app.py

@@ -19,99 +19,32 @@ def load_model(model_name, model_class, is_bc=False):
 # Set up page configuration
 st.set_page_config(page_title="SemViQA Demo", layout="wide")
 
-# Custom CSS: fixed header and tabs, dynamic height, result box formatting
+# Custom CSS and JavaScript to make the sidebar sticky
 st.markdown(
     """
     <style>
-    html, body {
-        height: 100%;
-        margin: 0;
-        overflow: hidden;
-    }
-    .main-container {
-        height: calc(100vh - 55px); /* Browser height - 55px */
-        overflow-y: auto;
-        padding: 20px;
-    }
-    .big-title {
-        font-size: 36px;
-        font-weight: bold;
-        color: #4A90E2;
-        text-align: center;
-        margin-top: 20px;
-        position: sticky; /* Pin the header */
+    /* Fix the sidebar */
+    .stSidebar {
+        position: fixed;
         top: 0;
-        background-color: white; /* Ensure the header covers content when scrolling */
-        z-index: 100; /* Ensure it's above other content */
-    }
-    .sub-title {
-        font-size: 20px;
-        color: #666;
-        text-align: center;
-        margin-bottom: 20px;
-    }
-    .stButton>button {
-        background-color: #4CAF50;
-        color: white;
-        font-size: 16px;
-        width: 100%;
-        border-radius: 8px;
-        padding: 10px;
-    }
-    .stTextArea textarea {
-        font-size: 16px;
-        min-height: 120px;
-    }
-    .result-box {
-        background-color: #f9f9f9;
-        padding: 20px;
-        border-radius: 10px;
-        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-        margin-top: 20px;
-    }
-    .verdict {
-        font-size: 24px;
-        font-weight: bold;
-        margin: 0;
-        display: flex;
-        align-items: center;
-    }
-    .verdict-icon {
-        margin-right: 10px;
-    }
-    /* Fix the tabs at the top */
-    div[data-baseweb="tab-list"] {
-        position: sticky;
-        top: 55px; /* Height of the header */
-        background-color: white;
-        z-index: 99;
-    }
-    /* Fix the sidebar content */
-    .stSidebar .sidebar-content {
-        background-color: #f0f2f6;
-        padding: 20px;
-        border-radius: 10px;
-        position: sticky;
-        top: 55px; /* Height of the header */
-        height: calc(100vh - 75px); /* Adjust height to fit within the viewport */
-        overflow-y: auto; /* Enable scrolling within the sidebar if content is too long */
-    }
-    .stSidebar .st-expander {
-        background-color: #ffffff;
-        border-radius: 10px;
-        padding: 10px;
-        margin-bottom: 10px;
-    }
-    .stSidebar .stSlider {
-        margin-bottom: 20px;
-    }
-    .stSidebar .stSelectbox {
-        margin-bottom: 20px;
+        height: 100vh;
+        overflow-y: auto;
+        z-index: 1000;
     }
-    .stSidebar .stCheckbox {
-        margin-bottom: 20px;
+    /* Adjust main content to avoid overlap with the fixed sidebar */
+    .main .block-container {
+        margin-left: 25rem; /* Adjust this value based on your sidebar width */
     }
     </style>
+    <script>
+    // JavaScript to make the sidebar sticky
+    window.addEventListener('scroll', function() {
+        const sidebar = document.querySelector('.stSidebar');
+        if (sidebar) {
+            sidebar.style.top = `${window.scrollY}px`;
+        }
+    });
+    </script>
     """,
     unsafe_allow_html=True,
 )