Fix multiple UI issues: white container under Document Metadata, fullscreen buttons, and PDF preprocessing

app.py

@@ -365,8 +365,10 @@ def process_file(uploaded_file, use_vision=True, preprocessing_options=None, pro
             
             # Generate a cache key based on file content, type and settings
             import hashlib
+            # Add pdf_rotation to cache key if present
+            pdf_rotation_value = pdf_rotation if 'pdf_rotation' in locals() else 0
             file_hash = hashlib.md5(open(temp_path, 'rb').read()).hexdigest()
-            cache_key = f"{file_hash}_{file_type}_{use_vision}"
+            cache_key = f"{file_hash}_{file_type}_{use_vision}_{pdf_rotation_value}"
             
             progress_bar.progress(50)
             status_text.markdown('<div class="processing-status-container">Processing document with OCR...</div>', unsafe_allow_html=True)
@@ -947,26 +949,28 @@ with main_tab1:
                 st.markdown("**Preprocessed Preview**")
                 try:
                     processed_bytes = preprocess_image(uploaded_file.getvalue(), preprocessing_options)
-                    # Fixed width parameter to ensure compatibility
-                    st.image(io.BytesIO(processed_bytes), width=300)
-                    
-                    # 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)
+                    # 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)
                 except Exception as e:
                     st.error(f"Error in preprocessing: {str(e)}")
                     st.info("Try using grayscale preprocessing for PNG images with transparency")
@@ -1018,12 +1022,16 @@ with main_tab1:
                                     temp_path = tmp.name
                                 
                                 # Process with NO custom prompt first
+                                # Apply PDF rotation if specified
+                                pdf_rotation_value = pdf_rotation if 'pdf_rotation' in locals() else 0
+                                
                                 base_result = processor.process_file(
                                     file_path=temp_path,
                                     file_type="pdf",
                                     use_vision=use_vision,
                                     custom_prompt=None,  # No custom prompt in first step
-                                    file_size_mb=len(uploaded_file.getvalue()) / (1024 * 1024)
+                                    file_size_mb=len(uploaded_file.getvalue()) / (1024 * 1024),
+                                    pdf_rotation=pdf_rotation_value  # Pass rotation value to processor
                                 )
                                 
                                 progress_bar.progress(70)
@@ -1131,11 +1139,8 @@ with main_tab1:
                 
                 # Document Metadata in the top right of the right column
                 with right_col:
-                    # Directly add the subheader without extra container
-                    st.subheader("Document Metadata")
-                    
-                    # Create an inline container with compact styling
-                    st.markdown('<div class="metadata-container" style="margin-top:0">', unsafe_allow_html=True)
+                    # Directly add the subheader and container without nesting - fix white container
+                    st.markdown('<h3 style="margin-bottom:0; padding-bottom:0;">Document Metadata</h3><div class="metadata-container" style="margin-top:0;">', unsafe_allow_html=True)
                     
                     # Display file info
                     st.write(f"**File Name:** {result.get('file_name', uploaded_file.name)}")

ui/custom.css

@@ -98,6 +98,11 @@
     border-left: 3px solid #4285f4;
 }
 
+/* Direct child styling to prevent nested containers */
+.element-container > .metadata-container {
+    margin-top: 0 !important;
+}
+
 /* Fix spacing for headings above metadata container */
 .element-container h3 + div .metadata-container,
 .element-container h1 + div .metadata-container,
@@ -106,18 +111,74 @@
 }
 
 /* Remove excess space between metadata heading and content */
-.stMarkdown + div div.element-container {
+.stMarkdown + div div.element-container,
+.stMarkdown + div,
+.stHeading + div,
+.stHeading + div div.element-container {
     margin-top: 0 !important;
+    padding-top: 0 !important;
+}
+
+/* PDF container fixes */
+.stExpander .streamlit-expanderContent {
+    max-width: 100% !important;
+    overflow: visible !important;
+}
+
+/* Fix placement of fullscreen buttons, especially in expanders */
+.element-container .stImage .stExpander button[title="View fullscreen"] {
+    position: absolute !important;
+    top: 5px !important;
+    right: 5px !important;
+}
+
+/* Fix PDF preview container */
+.stPdfViewerContent, 
+.stPdfViewer, 
+.stPdfViewerPagesContainer {
+    width: 100% !important;
+    max-width: 100% !important;
+    overflow: visible !important;
+}
+
+/* Fix for expandable content */
+.stExpander > div[data-testid="stExpander"] {
+    max-width: 100% !important;
+    overflow: visible !important;
+}
+
+/* Fix for fullscreen and expander buttons in image containers */
+.stImage button[title="View fullscreen"] {
+    position: absolute !important;
+    top: 5px !important;
+    right: 5px !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;
 }
 
 /* Fix fullscreen button styling */
 button[title="View fullscreen"],
 button.streamlit-expanderHeader {
-    z-index: 10 !important;
+    z-index: 999 !important;
     background-color: rgba(255, 255, 255, 0.8) !important;
     visibility: visible !important;
     opacity: 1 !important;
     display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 32px !important;
+    height: 32px !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;
 }
 
 /* Make text visible in Previous Results tab */
@@ -133,7 +194,8 @@ button.streamlit-expanderHeader {
 .document-content img,
 .markdown-text-container img,
 .page-text-content img,
-.image-container img {
+.image-container img,
+.streamlit-expanderContent img {
     max-width: 100% !important;
     height: auto !important;
     object-fit: contain !important;
@@ -145,7 +207,8 @@ button.streamlit-expanderHeader {
     .document-content img,
     .markdown-text-container img,
     .page-text-content img,
-    .image-container img {
+    .image-container img,
+    .streamlit-expanderContent img {
         max-width: 95% !important;
     }
 }