Update app.py

app.py

@@ -14,37 +14,43 @@ st.set_page_config(layout="wide", page_title="K-Space to MRI")
 
 st.markdown("""
     <style>
-    /* CSS แก้ปัญหาการสั่นของหน้าจอแบบเด็ดขาด */
-    /* CSS แก้ปัญหาหน้าเว็บสั่นแบบ Reflow Loop */
-    /* ล็อกความสูงของรูปภาพทุกรูปป้องกันจอกระตุกจากการโหลดภาพใหม่ */
-    [data-testid="stImage"] {
-        min-height: 400px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    html, body, .stApp {
-        overflow-x: hidden !important;
-    }
-    /* Force scrollbar always visible — this is the primary fix for page jitter */
+    /* === JIGGLE / REFLOW FIX === */
+    /* scrollbar-gutter: stable reserves scrollbar space at all times,
+       preventing the layout shift that causes page jitter */
     html {
         overflow-y: scroll !important;
+        scrollbar-gutter: stable !important;
     }
     body {
         overflow-y: scroll !important;
+        overflow-x: hidden !important;
+        scrollbar-gutter: stable !important;
     }
-    img {
-        max-width: 100% !important;
-        height: auto !important;
+    .stApp {
+        overflow-x: hidden !important;
+        overflow-y: scroll !important;
+        transition: none !important;
     }
-
-    .stApp { 
-        overflow-y: scroll !important; 
-        transition: none !important; 
+    /* Prevent any animation/transition that can cause reflow */
+    *, *::before, *::after {
+        transition: none !important;
+        animation-duration: 0.001ms !important;
     }
     .main .block-container {
         min-height: 101vh !important;
+        width: 100% !important;
+        box-sizing: border-box !important;
+    }
+    img {
+        max-width: 100% !important;
+        height: auto !important;
+        display: block !important;
+    }
+    /* Give image containers a stable aspect ratio so layout does not collapse while loading */
+    [data-testid="stImage"] > img {
+        aspect-ratio: 1 / 1;
+        width: 100%;
+        height: auto;
     }
     
     html, body, [class*="st-"] {
@@ -78,6 +84,18 @@ st.markdown("""
         background-color: #1E88E5;
         color: white;
     }
+    /* Info box — force dark text in both light and dark mode */
+    .kspace-info-box {
+        text-align: center;
+        background-color: #dbeafe !important;
+        padding: 15px;
+        border-radius: 10px;
+        margin-bottom: 20px;
+        color: #1e3a5f !important;
+    }
+    .kspace-info-box b, .kspace-info-box strong {
+        color: #1e3a5f !important;
+    }
     .reference-text {
         font-size: 14px;
         color: #666;
@@ -392,7 +410,7 @@ with col_main:
 
     # Center Text
     st.markdown("""
-    <div style="text-align: center; background-color: #f0f8ff; padding: 15px; border-radius: 10px; margin-bottom: 20px;">
+    <div class="kspace-info-box">
         <b>k-space 1 จุด = ข้อมูลของภาพทั้งภาพ และ ภาพ 1 พิกเซล = ผลรวมของ k-space ทุกจุด</b><br><br>
         <b>1 จุดใน k-space = แผ่นลวดลายคลื่น 1 แผ่น (2D Sinusoidal Wave)</b>
     </div>