tad bit mobile responsive

app.py

@@ -27,8 +27,13 @@ css = """
 footer {visibility: hidden}
 .gradio-container {
     max-width: 100% !important;
-    padding-left: 5% !important;
-    padding-right: 5% !important;
+    padding: 0 !important;
+}
+@media (min-width: 768px) {
+    .gradio-container {
+        padding-left: 2% !important;
+        padding-right: 2% !important;
+    }
 }
 .header-section {
     text-align: left;
@@ -37,24 +42,37 @@ footer {visibility: hidden}
 .main-title {
     color: #10b981;
     font-weight: 800;
-    font-size: 2.2rem;
+    font-size: 1.8rem;
     margin: 5px 0;
 }
+@media (min-width: 768px) {
+    .main-title {
+        font-size: 2.2rem;
+    }
+}
 .logo-container {
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    gap: 15px;
+    gap: 10px;
     margin-bottom: 10px;
 }
 .logo-img {
-    height: 50px;
+    height: 40px;
     border-radius: 8px;
 }
+@media (min-width: 768px) {
+    .logo-img {
+        height: 50px;
+    }
+    .logo-container {
+        gap: 15px;
+    }
+}
 .description {
     max-width: 900px;
     margin: 10px 0;
-    font-size: 1rem;
+    font-size: 0.95rem;
     line-height: 1.5;
     color: #4b5563;
 }
@@ -62,9 +80,15 @@ footer {visibility: hidden}
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
-    gap: 10px;
+    gap: 8px;
     margin: 10px 0;
-    font-size: 0.9rem;
+    font-size: 0.85rem;
+}
+@media (min-width: 768px) {
+    .links-row {
+        gap: 10px;
+        font-size: 0.9rem;
+    }
 }
 .links-row a {
     color: #10b981;
@@ -73,6 +97,7 @@ footer {visibility: hidden}
     border: 1px solid #10b981;
     border-radius: 15px;
     transition: all 0.2s;
+    white-space: nowrap;
 }
 .links-row a:hover {
     background-color: #10b981;
@@ -96,10 +121,16 @@ footer {visibility: hidden}
     text-align: center;
     font-size: 0.8rem;
     color: #9ca3af;
-    margin-top: 40px;
-    padding: 20px;
+    margin-top: 30px;
+    padding: 15px;
     border-top: 1px solid #f3f4f6;
 }
+@media (min-width: 768px) {
+    .disclaimer {
+        margin-top: 40px;
+        padding: 20px;
+    }
+}
 """
 
 with gr.Blocks() as demo:
@@ -148,7 +179,7 @@ with gr.Blocks() as demo:
             )
             with gr.Row():
                 clear_btn = gr.Button("🗑️ Clear", variant="secondary")
-                generate_btn = gr.Button("⚡ Generate Audio", variant="primary")
+                generate_btn = gr.Button("⚡ Generate", variant="primary")
         
         with gr.Column(scale=1):
             audio_output = gr.Audio(