Update ui.py

ui.py

@@ -4,6 +4,7 @@ import pandas as pd
 import asyncio
 from datetime import datetime
 import pytz
+import re
 from config import APP_TITLE, EXAMPLE_QUERIES
 from database import get_sample_data
 
@@ -12,24 +13,34 @@ def format_timestamp_to_cet(iso_timestamp):
     try:
         if not iso_timestamp or iso_timestamp == '':
             return 'N/A'
-        
+
         # Handle different ISO timestamp formats
         timestamp_str = str(iso_timestamp)
-        
+
         # Replace 'Z' with '+00:00' for proper ISO format
         if timestamp_str.endswith('Z'):
             timestamp_str = timestamp_str[:-1] + '+00:00'
-        
+
+        # Handle timestamps with more than 6 microsecond digits
+        # Python's fromisoformat() only supports up to 6 digits
+        # Match pattern: YYYY-MM-DDTHH:MM:SS.microseconds+timezone
+        match = re.match(r'(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2})\.(\d+)(.*)', timestamp_str)
+        if match:
+            date_time_part, microseconds, timezone_part = match.groups()
+            # Truncate microseconds to 6 digits max
+            microseconds = microseconds[:6]
+            timestamp_str = f"{date_time_part}.{microseconds}{timezone_part}"
+
         # Parse ISO timestamp
         dt = datetime.fromisoformat(timestamp_str)
-        
+
         # Convert to CET timezone
         cet = pytz.timezone('CET')
         dt_cet = dt.astimezone(cet)
-        
+
         # Format as readable string: "2025-09-13 14:30 CET"
         return dt_cet.strftime('%Y-%m-%d %H:%M CET')
-        
+
     except (ValueError, AttributeError, TypeError) as e:
         # Fallback to original timestamp if parsing fails
         print(f"[DEBUG] Failed to format timestamp '{iso_timestamp}': {e}")
@@ -526,6 +537,15 @@ def create_interface(agent):
                 font-size: 13px !important;
                 padding: 12px 16px !important;
             }
+
+            /* Email Activity tab: stack columns vertically on mobile */
+            .email-activity-row {
+                flex-direction: column !important;
+            }
+
+            .email-activity-row .gradio-column {
+                width: 100% !important;
+            }
         }
 
         @media (max-width: 480px) {
@@ -627,24 +647,28 @@ def create_interface(agent):
             ### Simulated Email History
             All emails shown here are **mock emails** generated for demonstration purposes.
             """)
-            
-            email_log = gr.DataFrame(
-                headers=["Timestamp", "Recipient", "Subject", "Status", "Invoice ID"],
-                label="Mock Emails Generated (Not Sent)",
-                wrap=True
-            )
-            
-            with gr.Row():
-                refresh_email_btn = gr.Button("🔄 Refresh Log", scale=1)
-                export_btn = gr.Button("📥 Export to CSV", scale=1)
-            
-            # Email preview area
-            email_preview = gr.Textbox(
-                label="Email Preview (Click on a row to view)",
-                lines=10,
-                max_lines=20,
-                interactive=False
-            )
+
+            with gr.Row(elem_classes=["email-activity-row"]):
+                # Left side - Email log
+                with gr.Column(scale=1):
+                    email_log = gr.DataFrame(
+                        headers=["Timestamp", "Recipient", "Subject", "Status", "Invoice ID"],
+                        label="Mock Emails Generated (Not Sent)",
+                        wrap=True
+                    )
+
+                    with gr.Row():
+                        refresh_email_btn = gr.Button("🔄 Refresh Log", scale=1)
+                        export_btn = gr.Button("📥 Export to CSV", scale=1)
+
+                # Right side - Email preview
+                with gr.Column(scale=1):
+                    email_preview = gr.Textbox(
+                        label="Email Preview (Click on a row to view)",
+                        lines=15,
+                        max_lines=25,
+                        interactive=False
+                    )
         
         # Database Explorer Tab
         with gr.Tab("📊 Database Explorer"):