fix: Force sidebar to ALWAYS stay visible - disable broken collapse toggle

Author: pavanbadempet

frontend/static/style.css

@@ -384,49 +384,31 @@ header {
     }
 }
 
-/* --- SIDEBAR TOGGLE BUTTON - ALWAYS VISIBLE --- */
+/* --- SIDEBAR ALWAYS VISIBLE (Streamlit Cloud fix) --- */
 
-/* The expand button when sidebar is collapsed - make it VERY visible */
-[data-testid="stSidebarCollapsedControl"] {
-    display: block !important;
+/* Force sidebar to ALWAYS be visible and NEVER collapse */
+[data-testid="stSidebar"] {
+    transform: translateX(0) !important;
     visibility: visible !important;
-    opacity: 1 !important;
-    position: fixed !important;
-    top: 14px !important;
-    left: 14px !important;
-    z-index: 999999 !important;
+    display: block !important;
+    min-width: 280px !important;
+    width: 280px !important;
 }
 
-[data-testid="stSidebarCollapsedControl"] button {
-    display: flex !important;
+/* Force expanded state even when aria says collapsed */
+[data-testid="stSidebar"][aria-expanded="false"] {
+    transform: translateX(0) !important;
     visibility: visible !important;
-    opacity: 1 !important;
-    background: linear-gradient(135deg, #3B82F6, #8B5CF6) !important;
-    border: none !important;
-    border-radius: 10px !important;
-    padding: 12px 16px !important;
-    color: white !important;
-    font-size: 1.3rem !important;
-    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.5) !important;
-    cursor: pointer !important;
-    transition: all 0.2s ease !important;
-}
-
-[data-testid="stSidebarCollapsedControl"] button:hover {
-    transform: scale(1.1) !important;
-    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.6) !important;
+    min-width: 280px !important;
+    margin-left: 0 !important;
 }
 
-/* The collapse button inside sidebar - make it styled nicely */
+/* Hide the collapse button - since it's broken on Cloud */
 button[data-testid="stSidebarCollapseButton"] {
-    background: rgba(59, 130, 246, 0.2) !important;
-    border: 1px solid rgba(59, 130, 246, 0.3) !important;
-    border-radius: 8px !important;
-    color: #60A5FA !important;
-    transition: all 0.2s ease !important;
+    display: none !important;
 }
 
-button[data-testid="stSidebarCollapseButton"]:hover {
-    background: rgba(59, 130, 246, 0.3) !important;
-    transform: scale(1.05);
+/* Hide the expand control - we don't need it since sidebar is always visible */
+[data-testid="stSidebarCollapsedControl"] {
+    display: none !important;
 }