Update src/streamlit_app.py

src/streamlit_app.py

@@ -42,7 +42,7 @@ st.set_page_config(page_title="Remittance Data Viewer", layout="wide")
 # Custom CSS
 st.markdown("""
 <style>
-  /* Reduce spacing between form fields (unchanged) */
+  /* Reduce spacing between form fields */
   .stTextInput > div > div > input,
   .stTextArea > div > div > textarea,
   .stSelectbox > div > div > div {
@@ -55,7 +55,7 @@ st.markdown("""
   }
   .stSelectbox { margin-bottom: 4px !important; }
 
-  /* Button styling (unchanged) */
+  /* Button styling */
   .stButton > button {
       padding: 0.25rem 0.5rem !important;
       font-size: 0.85rem !important;
@@ -78,52 +78,58 @@ st.markdown("""
   [data-testid="column"] { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
   [data-testid="stHorizontalBlock"] { gap: 0.5rem !important; }
 
-  /* Active OCR field highlighting */
-  .ocr-active {
-      border: 2px solid #ff4b4b !important;
-      box-shadow: 0 0 5px rgba(255, 75, 75, 0.5) !important;
+  /* FIXED: Remove problematic viewport-based heights */
+  /* Instead use fixed pixel heights that work in iframes */
+  section[data-testid="stAppViewContainer"] {
+      overflow: visible !important;
   }
-
-  /* Make sure the top-level containers allow children to create scroll contexts */
-  html, body, #root, #root>div, [data-testid="stAppViewContainer"], .block-container, .css-1lcbmhc, .main {
-    overflow: visible !important;
-    height: auto !important;
-    min-height: 100vh !important;
-  }
-
-  /* Force the Streamlit app column elements to be scrollable */
-  div[data-testid="column"], .stColumns, .stContainer {
-    max-height: calc(100vh - 160px) !important;
-    overflow-y: auto !important;
-    overflow-x: hidden !important;
-    position: relative !important;
+  
+  .main .block-container {
+      overflow: visible !important;
+      padding-bottom: 1rem !important;
   }
 
-  /* small helper scroll classes (if you wrap with these) */
-  .left-scroll, .right-scroll {
-    max-height: calc(100vh - 160px);
-    overflow-y: auto;
-    overflow-x: auto;
-    padding: 8px;
-    border: 1px solid #e6e6e6;
-    border-radius: 6px;
-    background: #ffffff;
+  /* Make columns scrollable with fixed height */
+  div[data-testid="column"] {
+      max-height: 85vh !important;
+      overflow-y: auto !important;
+      overflow-x: hidden !important;
+      position: relative !important;
   }
 
-  /* make canvas/images not expand the column */
+  /* Ensure images don't expand the column */
   div[data-testid="column"] img,
   div[data-testid="column"] canvas {
-    max-width: 100% !important;
-    height: auto !important;
-    display: block !important;
+      max-width: 100% !important;
+      height: auto !important;
+      display: block !important;
   }
 
-  /* subtle WebKit scrollbar */
-  div[data-testid="column"]::-webkit-scrollbar { width: 10px; height: 10px; }
-  div[data-testid="column"]::-webkit-scrollbar-thumb { border-radius: 8px; background-color: rgba(0,0,0,0.12); }
-  div[data-testid="column"]::-webkit-scrollbar-track { background: transparent; }
+  /* Custom scrollbar styling */
+  div[data-testid="column"]::-webkit-scrollbar { 
+      width: 10px; 
+      height: 10px; 
+  }
+  div[data-testid="column"]::-webkit-scrollbar-thumb { 
+      border-radius: 8px; 
+      background-color: rgba(0,0,0,0.3); 
+      border: 2px solid transparent;
+      background-clip: padding-box;
+  }
+  div[data-testid="column"]::-webkit-scrollbar-thumb:hover {
+      background-color: rgba(0,0,0,0.5);
+  }
+  div[data-testid="column"]::-webkit-scrollbar-track { 
+      background: rgba(0,0,0,0.05); 
+      border-radius: 8px;
+  }
+  
+  /* Firefox scrollbar */
+  div[data-testid="column"] {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.05);
+  }
 </style>
-
 """, unsafe_allow_html=True)
 
 def load_jsonl(file):