App Runner Alignment

app.py

@@ -1,87 +1,94 @@
 import gradio as gr
 import os
 
-# Define the function for the Gradio interface (keeping the previous example)
-def greet(name):
-    """Returns a greeting string for the given name."""
-    if not name:
-        return "Hello!"
-    return f"Hello, {name}!"
-
-# CSS extracted and adapted from the FastAPI app's HTML
-# We target specific elements or use broader selectors for Gradio
+# Revised CSS
 custom_css = """
 body, .gradio-container {
     background-color: #333 !important; /* Charcoal background */
     color: #fff !important; /* White text color */
     font-family: Arial, sans-serif !important;
     margin: 0 !important;
+    overflow-x: hidden !important; /* Prevent horizontal scrollbar on main container/body */
 }
-/* Add padding to the main container */
 .gradio-container {
     padding: 20px !important;
 }
 
-/* Style the specific Markdown h1 using its generated ID or a custom one */
-/* Let's wrap the markdown in a div with an ID for easier targeting */
-#float-title h1 {
-    font-size: 2em;
-    text-align: center;
-    margin-bottom: 20px; /* Add some spacing */
-    transition: font-size 0.3s ease;
+/* Container for the title elements using Flexbox */
+#float-title {
+    display: flex;           /* Use flexbox for layout */
+    justify-content: center; /* Center the items horizontally */
+    align-items: center;     /* Center the items vertically */
+    width: 100%;             /* Take full width to allow centering */
+    margin-top: 50px;        /* Add vertical spacing */
+    margin-bottom: 30px;
+    min-height: 4em;         /* Give it some height for vertical centering */
+    /* overflow: hidden; /* Avoid this if possible as it might clip */
 }
-#float-title h1:hover {
-    font-size: 3em; /* Hover effect */
+
+/* Style for the static text part */
+#float-title .static-text {
+    font-size: 2em;         /* Set base size */
+    color: #fff;             /* Ensure text color */
+    margin-right: 15px;     /* Increased space between text and link */
+    white-space: nowrap;    /* Prevent wrapping */
+    position: relative;     /* Helps with potential stacking/overlap issues */
+    z-index: 1;             /* Try to keep text above the link background */
 }
+
+/* Style for the link part */
 #float-title a {
-    color: #EA3C53 !important; /* Link color */
+    font-size: 2em;         /* Set base size */
+    color: #EA3C53 !important;
     text-decoration: none !important;
+    display: inline-block;  /* Necessary for transform to work */
+    transition: transform 0.3s ease; /* Smooth scaling transition */
+    transform-origin: left center; /* Scale expansion biased to the right */
+    white-space: nowrap;    /* Prevent wrapping */
 }
+
+/* Apply scaling effect only to the link on hover */
 #float-title a:hover {
+    transform: scale(1.3); /* Reduced scale factor */
     text-decoration: none !important;
 }
 
-/* Style other Gradio elements for better contrast/consistency */
+/* Keep other styles */
 label, .gr-button {
-    color: #fff !important; /* Ensure labels and buttons use white text */
+    color: #fff !important;
     font-family: Arial, sans-serif !important;
 }
 .gr-button {
-    background-color: #555 !important; /* Darker button background */
+    background-color: #555 !important;
     border: 1px solid #777 !important;
 }
 .gr-button:hover {
-    background-color: #EA3C53 !important; /* Use link color on hover */
+    background-color: #EA3C53 !important;
     border: 1px solid #EA3C53 !important;
 }
 textarea, input[type=text] {
-    background-color: #444 !important; /* Darker input fields */
+    background-color: #444 !important;
     color: #fff !important;
     border: 1px solid #666 !important;
 }
-
 """
 
 # Create the Gradio interface with custom CSS
-# theme='dark' can also help set a base dark mode
 with gr.Blocks(css=custom_css, theme=gr.themes.Default(primary_hue=gr.themes.colors.red, secondary_hue=gr.themes.colors.pink)) as demo:
 
-    # Add the styled title using Markdown wrapped in a div with an ID
-    with gr.Row():
-      with gr.Column(): # Use column to center potentially
-          gr.HTML("""
-          <div id="float-title">
-              <h1><a href="https://iu2ggxd43p.us-west-2.awsapprunner.com//">AWS Nova Canvas</a></h1>
-              <h3>App Runner Deployment</h3>
-          </div>
-          """) # Use HTML component for better control if needed
+    # Revised HTML structure within gr.HTML
+    gr.HTML("""
+    <div id="float-title">
+        <span class="static-text">App Runner Deployment >> </span>
+        <a href="https://iu2ggxd43p.us-west-2.awsapprunner.com">AWS Nova Canvas</a>
+    </div>
+    """)
 
-    
+ 
 
 
 # Launch the Gradio app
 if __name__ == "__main__":
     server_name = os.getenv("GRADIO_SERVER_NAME", "0.0.0.0")
     server_port = int(os.getenv("GRADIO_SERVER_PORT", 7860))
-    # Set share=False for deployment environments like App Runner
     demo.launch(server_name=server_name, server_port=server_port, share=False)