Improve UI for mobile and fix multiple display issues

app.py

@@ -634,10 +634,10 @@ with main_tab2:
     # Display previous results if available
     if not st.session_state.previous_results:
         st.markdown("""
-        <div class="previous-results-container" style="text-align: center; padding: 40px 20px;">
-            <div style="font-size: 48px; margin-bottom: 20px; color: #757575;">📄</div>
-            <h3 style="color: #212121; margin-bottom: 10px;">No Previous Results</h3>
-            <p style="color: #616161;">Process a document to see your results history saved here.</p>
+        <div class="previous-results-container" style="text-align: center; padding: 40px 20px; background-color: #f8f9fa; border-radius: 8px;">
+            <div style="font-size: 48px; margin-bottom: 20px; color: #000000;">📄</div>
+            <h3 style="color: #000000; margin-bottom: 10px; font-weight: 600;">No Previous Results</h3>
+            <p style="color: #000000; font-size: 16px;">Process a document to see your results history saved here.</p>
         </div>
         """, unsafe_allow_html=True)
     else:
@@ -1669,7 +1669,7 @@ with main_tab1:
                         with columns1[i]:
                             if img_path.suffix.lower() in ['.jpg', '.jpeg', '.png', '.tif']:
                                 try:
-                                    st.image(str(img_path), caption=img_path.name, width=300)
+                                    st.image(str(img_path), caption=img_path.name, use_column_width=True)
                                 except Exception:
                                     st.info(f"Example: {img_path.name}")
                             else:
@@ -1682,7 +1682,7 @@ with main_tab1:
                         with columns2[i]:
                             if img_path.suffix.lower() in ['.jpg', '.jpeg', '.png', '.tif']:
                                 try:
-                                    st.image(str(img_path), caption=img_path.name, width=300)
+                                    st.image(str(img_path), caption=img_path.name, use_column_width=True)
                                 except Exception:
                                     st.info(f"Example: {img_path.name}")
                             else:
@@ -1695,7 +1695,7 @@ with main_tab1:
                         with columns[i % len(columns)]:
                             if img_path.suffix.lower() in ['.jpg', '.jpeg', '.png', '.tif']:
                                 try:
-                                    st.image(str(img_path), caption=img_path.name, width=300)
+                                    st.image(str(img_path), caption=img_path.name, use_column_width=True)
                                 except Exception:
                                     st.info(f"Example: {img_path.name}")
                             else:

ui/custom.css

@@ -11,6 +11,8 @@
 /* Result card styling */
 .previous-results-container {
     margin-bottom: 20px;
+    color: #000000 !important;
+    background-color: #ffffff !important;
 }
 
 .result-card {
@@ -150,44 +152,76 @@
 /* Fix for fullscreen and expander buttons in image containers */
 .stImage button[title="View fullscreen"] {
     position: absolute !important;
-    top: 5px !important;
-    right: 5px !important;
+    top: 8px !important;
+    right: 8px !important;
     z-index: 1000 !important;
     visibility: visible !important;
     opacity: 1 !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
-    background-color: rgba(255, 255, 255, 0.8) !important;
+    background-color: rgba(0, 0, 0, 0.7) !important;
+    color: white !important;
+    width: 36px !important;
+    height: 36px !important;
+    border-radius: 4px !important;
 }
 
 /* Fix fullscreen button styling */
 button[title="View fullscreen"],
 button.streamlit-expanderHeader {
     z-index: 999 !important;
-    background-color: rgba(255, 255, 255, 0.8) !important;
+    background-color: rgba(0, 0, 0, 0.7) !important;
     visibility: visible !important;
     opacity: 1 !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
-    width: 32px !important;
-    height: 32px !important;
+    width: 36px !important;
+    height: 36px !important;
     border-radius: 4px !important;
     position: absolute !important;
-    top: 5px !important;
-    right: 5px !important;
-    border: 1px solid rgba(0, 0, 0, 0.1) !important;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+    top: 8px !important;
+    right: 8px !important;
+    border: 1px solid rgba(255, 255, 255, 0.3) !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
+    color: white !important;
 }
 
-/* Make text visible in Previous Results tab */
+button[title="View fullscreen"]:hover,
+button.streamlit-expanderHeader:hover {
+    background-color: rgba(0, 0, 0, 0.9) !important;
+    border: 1px solid rgba(255, 255, 255, 0.5) !important;
+}
+
+/* Make text visible in Previous Results tab - ensure high contrast */
 .previous-results-container h3,
 .previous-results-container p,
 .previous-results-container .result-filename,
 .previous-results-container .result-date,
-.previous-results-container .result-tag {
-    color: #212121 !important;
+.previous-results-container .result-tag,
+.stMarkdown h3,
+.stMarkdown p,
+.caption {
+    color: #000000 !important;
+    text-shadow: none !important;
+}
+
+/* No Results state styling */
+.previous-results-container[style*="text-align: center"] {
+    background-color: #f8f9fa !important;
+    border-radius: 8px !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+}
+
+.previous-results-container[style*="text-align: center"] h3 {
+    color: #000000 !important;
+    font-weight: 600 !important;
+}
+
+.previous-results-container[style*="text-align: center"] p {
+    color: #000000 !important;
+    font-size: 16px !important;
 }
 
 /* Additional image fixes for all containers */
@@ -202,6 +236,7 @@ button.streamlit-expanderHeader {
 }
 
 /* Responsive design rules */
+/* Specific rules for mobile/small screens */
 @media (max-width: 768px) {
     .stExpander img,
     .document-content img,
@@ -211,4 +246,90 @@ button.streamlit-expanderHeader {
     .streamlit-expanderContent img {
         max-width: 95% !important;
     }
+    
+    /* Improve responsive layout for example documents */
+    .stImage,
+    .css-6qob1r,
+    .css-zq5wmm,
+    .css-fg4pbf,
+    [data-testid="column"] {
+        margin-bottom: 20px !important;
+        padding: 0 10px !important;
+    }
+    
+    .stImage img {
+        width: 100% !important;
+        max-width: 100% !important;
+        height: auto !important;
+        object-fit: contain !important;
+    }
+    
+    .stColumnContainer,
+    .css-jjjwqm,
+    .css-fg4pbf,
+    [data-testid="column"] {
+        gap: 20px !important;
+        margin-bottom: 20px !important;
+    }
+}
+
+/* Modern Streamlit styling - better responsive behavior */
+.block-container {
+    padding-top: 2rem !important;
+    padding-bottom: 2rem !important;
+}
+
+/* Specific rules for very small screens (mobile) */
+@media (max-width: 640px) {
+    /* Force single column on very small screens */
+    .row-widget.stHorizontal > div {
+        flex-direction: column !important;
+        width: 100% !important;
+    }
+
+    [data-testid="column"] {
+        width: 100% !important;
+        flex: 1 1 100% !important;
+        padding: 0 !important;
+    }
+    
+    /* Make images more visible on small screens */
+    .row-widget.stImage img,
+    [data-testid="stImage"] > img {
+        max-width: 100% !important;
+        width: 100% !important;
+        margin-bottom: 15px !important;
+    }
+}
+
+/* Fix image display in grid layout */
+.row-widget.stImage,
+.css-z5fcl4 {
+    text-align: center !important;
+    margin-bottom: 15px !important;
+    padding: 0 !important;
+}
+
+.row-widget.stImage img,
+.css-z5fcl4 img {
+    max-height: 250px !important;
+    object-fit: contain !important;
+    border-radius: 4px !important;
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Better caption styling for images */
+.css-z5fcl4 .caption,
+.caption,
+[data-testid="caption"],
+.css-1b0udgb,
+.css-183lzff {
+    margin-top: 5px !important;
+    color: #000000 !important;
+    font-weight: 500 !important;
+    text-align: center !important;
+    font-size: 0.9rem !important;
+    width: 100% !important;
+    display: block !important;
 }