Update src/streamlit_app.py

src/streamlit_app.py

@@ -72,7 +72,7 @@ st.markdown("""
         background: rgba(255, 255, 255, 0.95) !important;
         backdrop-filter: blur(10px) !important;
         z-index: 99999 !important;
-        padding: 1rem 0 !important;
+        padding: 1rem 2rem !important;
         border-bottom: 3px solid #bf5700 !important;
         box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
         transform: translateZ(0) !important;
@@ -80,34 +80,36 @@ st.markdown("""
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
-        flex-direction: column !important;
-        gap: 10px !important;
+        flex-direction: row !important;
+        gap: 20px !important;
     }
     
     /* LOGO STYLING */
     .header-logo {
-        max-height: 80px !important;
-        max-width: 300px !important;
+        max-height: 70px !important;
+        max-width: 280px !important;
         height: auto !important;
         width: auto !important;
         object-fit: contain !important;
         border-radius: 8px !important;
         box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
+        flex-shrink: 0 !important;
     }
     
     /* HEADER TEXT STYLING */
     .header-text {
-        font-size: 1.8rem !important;
+        font-size: 2.2rem !important;
         color: #bf5700 !important; /* UT Austin burnt orange */
-        text-align: center !important;
+        text-align: left !important;
         margin: 0 !important;
         font-weight: bold !important;
         text-shadow: 1px 1px 2px rgba(0,0,0,0.1) !important;
+        white-space: nowrap !important;
     }
     
-    /* ADD TOP MARGIN TO MAIN CONTENT TO AVOID OVERLAP - INCREASED FOR LOGO */
+    /* ADD TOP MARGIN TO MAIN CONTENT TO AVOID OVERLAP - ADJUSTED FOR HORIZONTAL LOGO */
     .main > .block-container {
-        margin-top: 150px !important;  /* Increased from 120px to accommodate logo */
+        margin-top: 120px !important;  /* Reduced back to 120px for horizontal layout */
         padding-top: 20px !important;
         background: rgba(255, 255, 255, 0.9) !important;
         border-radius: 10px !important;
@@ -118,16 +120,43 @@ st.markdown("""
     /* RESPONSIVE DESIGN FOR MOBILE */
     @media (max-width: 768px) {
         .header-logo {
-            max-height: 60px !important;
-            max-width: 250px !important;
+            max-height: 50px !important;
+            max-width: 200px !important;
         }
         
         .header-text {
-            font-size: 1.4rem !important;
+            font-size: 1.2rem !important;
+        }
+        
+        .main-header {
+            padding: 0.8rem 1rem !important;
+            gap: 15px !important;
+        }
+        
+        .main > .block-container {
+            margin-top: 100px !important;
+        }
+    }
+    
+    /* EXTRA SMALL MOBILE */
+    @media (max-width: 480px) {
+        .main-header {
+            flex-direction: column !important;
+            gap: 8px !important;
+            padding: 0.8rem 0.5rem !important;
+        }
+        
+        .header-logo {
+            max-height: 40px !important;
+            max-width: 180px !important;
+        }
+        
+        .header-text {
+            font-size: 1.1rem !important;
         }
         
         .main > .block-container {
-            margin-top: 130px !important;
+            margin-top: 110px !important;
         }
     }