Fix sidebar position, fullscreen button styling, and preprocessing preview

app.py

@@ -476,7 +476,8 @@ with main_tab1:
 
 # Sidebar with options
 with st.sidebar:
-    st.header("Options")
+    # Move Options header to very top of sidebar
+    st.markdown("<h2 style='margin-top:-12px; padding-top:0;'>Options</h2>", unsafe_allow_html=True)
     
     # Model options
     st.subheader("Model Settings")
@@ -949,28 +950,26 @@ with main_tab1:
                 st.markdown("**Preprocessed Preview**")
                 try:
                     processed_bytes = preprocess_image(uploaded_file.getvalue(), preprocessing_options)
-                    # Using a container for better layout control
-                    with st.container():
-                        # Fixed width parameter to ensure compatibility
-                        st.image(io.BytesIO(processed_bytes), width=300, use_column_width=False)
-                        
-                        # Show preprocessing metadata next to the image
-                        meta_items = []
-                        if preprocessing_options.get("document_type", "standard") != "standard":
-                            meta_items.append(f"Document type ({preprocessing_options['document_type']})")
-                        if preprocessing_options.get("grayscale", False):
-                            meta_items.append("Grayscale")
-                        if preprocessing_options.get("denoise", False):
-                            meta_items.append("Denoise")
-                        if preprocessing_options.get("contrast", 0) != 0:
-                            meta_items.append(f"Contrast ({preprocessing_options['contrast']})")
-                        if preprocessing_options.get("rotation", 0) != 0:
-                            meta_items.append(f"Rotation ({preprocessing_options['rotation']}°)")
-                        
-                        # Only show "Applied:" if there are actual preprocessing steps
-                        if meta_items:
-                            meta_text = "Applied: " + ", ".join(meta_items)
-                            st.caption(meta_text)
+                    # Display the image with a fixed width to prevent layout issues
+                    st.image(io.BytesIO(processed_bytes), width=400)
+                    
+                    # Show preprocessing metadata next to the image
+                    meta_items = []
+                    if preprocessing_options.get("document_type", "standard") != "standard":
+                        meta_items.append(f"Document type ({preprocessing_options['document_type']})")
+                    if preprocessing_options.get("grayscale", False):
+                        meta_items.append("Grayscale")
+                    if preprocessing_options.get("denoise", False):
+                        meta_items.append("Denoise")
+                    if preprocessing_options.get("contrast", 0) != 0:
+                        meta_items.append(f"Contrast ({preprocessing_options['contrast']})")
+                    if preprocessing_options.get("rotation", 0) != 0:
+                        meta_items.append(f"Rotation ({preprocessing_options['rotation']}°)")
+                    
+                    # Only show "Applied:" if there are actual preprocessing steps
+                    if meta_items:
+                        meta_text = "Applied: " + ", ".join(meta_items)
+                        st.caption(meta_text)
                 except Exception as e:
                     st.error(f"Error in preprocessing: {str(e)}")
                     st.info("Try using grayscale preprocessing for PNG images with transparency")

ui/custom.css

@@ -152,7 +152,7 @@
     overflow: visible !important;
 }
 
-/* Fix for fullscreen and expander buttons in image containers */
+/* Fix positioning for fullscreen buttons in image containers */
 .stImage button[title="View fullscreen"] {
     position: absolute !important;
     top: 5px !important;
@@ -160,6 +160,15 @@
     z-index: 1000 !important;
     visibility: visible !important;
     opacity: 1 !important;
+    width: 28px !important;
+    height: 28px !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    background-color: rgba(255, 255, 255, 0.7) !important;
+    border-radius: 4px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
 }
 
 /* Fix fullscreen button styling */
@@ -167,11 +176,19 @@ button[title="View fullscreen"],
 button.streamlit-expanderHeader {
     z-index: 999 !important;
     visibility: visible !important;
-    opacity: 1 !important;
+    opacity: 1 !important; 
     border-radius: 4px !important;
     position: absolute !important;
     top: 5px !important;
     right: 5px !important;
+    width: 28px !important;
+    height: 28px !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    background-color: rgba(255, 255, 255, 0.7) !important; 
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
 }
 
 /* Make text visible in Previous Results tab - ensure high contrast */