Improve UI layout for better space usage and usability

- Reduce excessive whitespace and margins
- Add CSS classes for more compact layout
- Improve button positioning and make Process button more prominent
- Better organize the document preview and results sections

app.py

@@ -493,17 +493,23 @@ with main_tab3:
 
 # Main tab content
 with main_tab1:
-    # Create two columns for the main interface
-    col1, col2 = st.columns([1, 1])
+    # Create a more compact layout using custom CSS
+    st.markdown('<div class="compact-layout">', unsafe_allow_html=True)
+    
+    # Create two columns for the main interface with a better ratio
+    col1, col2 = st.columns([1, 1.2])
     
     # File upload column
     with col1:
-        st.subheader("Upload Document")
-        
-        # File uploader
-        uploaded_file = st.file_uploader("Choose an image or PDF file", 
-                                        type=["pdf", "png", "jpg", "jpeg"], 
-                                        help="Select a document to process with OCR")
+        with st.container():
+            st.markdown('<div class="upload-section">', unsafe_allow_html=True)
+            st.subheader("Upload Document")
+            
+            # File uploader
+            uploaded_file = st.file_uploader("Choose an image or PDF file", 
+                                          type=["pdf", "png", "jpg", "jpeg"], 
+                                          help="Select a document to process with OCR")
+            st.markdown('</div>', unsafe_allow_html=True)
         
         # Show preprocessing summary if options are selected
         if uploaded_file is not None and any(preprocessing_options.values()):
@@ -541,10 +547,12 @@ with main_tab1:
                 st.write(f"**File:** {uploaded_file.name} ({file_size_mb:.2f} MB)")
                 
                 # Process button
+                st.markdown('<div class="process-button">', unsafe_allow_html=True)
                 process_button = st.button("Process Document", 
                                          type="primary", 
                                          use_container_width=True,
                                          help="Start OCR processing with the selected options")
+                st.markdown('</div>', unsafe_allow_html=True)
     
     # Preview column
     with col2:
@@ -624,6 +632,7 @@ with main_tab1:
     # Results section - spans full width
     if 'process_button' in locals() and process_button:
         # Horizontal line to separate input and results
+        st.markdown('<div class="processing-results">', unsafe_allow_html=True)
         st.markdown("---")
         st.subheader("Processing Results")
         
@@ -734,6 +743,8 @@ with main_tab1:
                                         else:
                                             st.markdown(f"**{k}:** {v}")
                 
+                st.markdown('</div>', unsafe_allow_html=True)  # Close processing-results div
+                
                 # Download button
                 with st.expander("Export Content"):
                     # Generate HTML content for download with proper CSS styling
@@ -940,6 +951,7 @@ with main_tab1:
     # Show sample examples when no file is uploaded
     elif uploaded_file is None:
         # Show info about supported formats
+        st.markdown('</div>', unsafe_allow_html=True)  # Close compact-layout div
         st.info("📝 Upload a document to get started. Supported formats: JPG, PNG, PDF")
         
         # Show example usage

ui/custom.css

@@ -216,12 +216,26 @@
 .stButton > button {
     background-color: var(--color-blue-600);
     color: white;
+    margin-top: 10px;
+    margin-bottom: 10px;
 }
 
 .stButton > button:hover {
     background-color: var(--color-blue-700);
 }
 
+/* Process button specific styling */
+.process-button button {
+    margin-top: 10px;
+    position: relative;
+    width: 100%;
+}
+
+/* Processing results section */
+.processing-results {
+    margin-top: 20px;
+}
+
 /* Sidebars */
 [data-testid="stSidebar"] {
     background-color: var(--color-gray-900);
@@ -275,7 +289,7 @@
     padding: 1.5rem;
     border-radius: 0.5rem;
     border: 1px solid var(--color-gray-700);
-    margin-bottom: 1.5rem;
+    margin-bottom: 1rem;
 }
 
 /* Upload container */
@@ -302,6 +316,37 @@
     background-color: var(--color-blue-600);
 }
 
+/* Custom layout improvements */
+.compact-layout {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.upload-section {
+    margin-bottom: 10px;
+}
+
+.preview-section {
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+
+/* Two column layout for better space usage */
+.two-column-container {
+    display: flex;
+    gap: 20px;
+}
+
+.left-panel {
+    flex: 1;
+}
+
+.right-panel {
+    flex: 2;
+}
+
 /* Workflow steps */
 .workflow-step {
     background-color: var(--color-gray-800);