Update app.py

app.py

@@ -177,22 +177,25 @@ def main():
     print("Initializing retriever...")
     retriever = initialize_retriever()
     
-    # Custom CSS for styling
+   
+
+# Define custom CSS to style the logo across the entire header
     custom_css = """
-    .gradio-container {
-        background-color: #f0f0f0;
-        text-align: center;
+   {
+        width: 100%;
+        background-color: #fff;
+        padding: 10px 0;
+        margin-bottom: 20px;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
     }
-    #logo img {
+    
+    #logo-image {
+        width: 100%;
+        height: auto;
+        max-height: 80px;
+        object-fit: contain;
         display: block;
         margin: 0 auto;
-        max-width: 200px;
-    }
-    .datetime-display {
-        text-align: center;
-        margin-bottom: 20px;
-        font-size: 18px;
-        font-weight: bold;
     }
     """
     
@@ -200,12 +203,20 @@ def main():
     
     # Create Gradio UI
     with gr.Blocks(css=custom_css) as ui:
-        # Check if logo exists before trying to display it
-        if os.path.exists(logo_path):
-            gr.Image(logo_path, elem_id="logo", show_label=False, height=100, width=200)
-        else:
-            gr.Markdown("<h2 style='text-align: center;'>Equinix</h2>")
-            print(f"Warning: Logo file {logo_path} not found")
+
+         # Create a header container first
+        with gr.Row(elem_id="header-container"):
+            # Check if logo exists before trying to display it
+            if os.path.exists(logo_path):
+                gr.Image(logo_path, elem_id="logo-image", show_label=False)
+            else:
+                gr.Markdown("<h2 style='text-align: center; width: 100%;'>Equinix</h2>")
+                print(f"Warning: Logo file {logo_path} not found")
+    
+        # The rest of your UI components go here
+        with gr.Row():
+            gr.Markdown("## Your application content goes here")
+    
         
         # Title & Description
         gr.Markdown("<h1 style='text-align: center; color: black;'>Equinix Chatbot for Automation Team</h1>")