Layout Fix: Removed flickering CSS and switched to stable 2x2 grid

app.py

@@ -34,31 +34,25 @@ st.markdown("""
     }
     .stMetric {
         background-color: #1f2937;
-        padding: 20px;
+        padding: 24px;
         border-radius: 12px;
         border: 1px solid #374151;
-        transition: transform 0.3s ease;
-    }
-    .stMetric:hover {
-        transform: translateY(-5px);
-        border-color: #60a5fa;
+        /* Removed all transforms/transitions to prevent flicker */
     }
     h1, h2, h3 {
         color: #60a5fa;
         font-family: 'Inter', sans-serif;
     }
-    /* Improve block spacing */
     .block-container {
-        padding-top: 2rem;
-        padding-bottom: 5rem;
+        padding: 3rem 5rem 5rem 5rem;
     }
-    /* Custom Info Box */
+    /* Simple Info Box without heavy margins */
     .info-box {
         background-color: rgba(96, 165, 250, 0.1);
-        padding: 25px;
+        padding: 20px;
         border-radius: 15px;
         border-left: 6px solid #60a5fa;
-        margin-bottom: 40px;
+        margin: 20px 0;
     }
 </style>
 """, unsafe_allow_html=True)
@@ -178,13 +172,20 @@ def main():
         </div>
         """, unsafe_allow_html=True)
 
-        # Top Metrics
-        col1, col2, col3, col4 = st.columns(4)
-        col1.metric("Total Customers", f"{len(df_filtered):,}")
-        col2.metric("Avg. Recency", f"{df_filtered['Recency'].mean():.1f} days")
-        col3.metric("Avg. Frequency", f"{df_filtered['Frequency'].mean():.1f} orders")
-        col4.metric("Avg. Revenue", f"£{df_filtered['Monetary'].mean():,.2f}")
+        # Top Metrics - Split into 2x2 grid for better stability
+        m1, m2 = st.columns(2)
+        with m1:
+            st.metric("Total Customers", f"{len(df_filtered):,}")
+        with m2:
+            st.metric("Avg. Recency", f"{df_filtered['Recency'].mean():.1f} days")
+        
+        m3, m4 = st.columns(2)
+        with m3:
+            st.metric("Avg. Frequency", f"{df_filtered['Frequency'].mean():.1f} orders")
+        with m4:
+            st.metric("Avg. Revenue", f"£{df_filtered['Monetary'].mean():,.2f}")
 
+        st.markdown("<br>", unsafe_allow_html=True)
         st.markdown("---")
 
         # Visualization Row 1: Distribution & PCA