fix: Improve logo responsiveness with clamp() font sizing

app.py

@@ -109,19 +109,52 @@ h1, h2, h3, h4, h5, h6 {
 .action-bar {
     margin-top: 16px !important;
 }
+
+/* Header Responsiveness */
+.header-container {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 24px;
+}
+
+.logo-icon {
+    font-size: clamp(20px, 4vw, 28px);
+}
+
+.logo-text h1 {
+    margin: 0;
+    font-size: clamp(18px, 3vw, 24px);
+    color: #f4f4f5;
+}
+
+.logo-text p {
+    margin: 0;
+    font-size: clamp(12px, 2vw, 14px);
+    color: #a1a1aa;
+}
+
+.version-badge {
+    font-size: 12px;
+    color: #52525b;
+    border: 1px solid #27272a;
+    padding: 4px 8px;
+    border-radius: 4px;
+    white-space: nowrap;
+}
 """
 
 def create_header():
     """Create a clean, minimal header."""
     return gr.Markdown("""
-    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 24px;">
-        <div style="font-size: 24px;">🧞</div>
-        <div>
-            <h1 style="margin: 0; font-size: 20px; color: #f4f4f5;">DebugGenie</h1>
-            <p style="margin: 0; font-size: 14px; color: #a1a1aa;">Enterprise Error Analysis</p>
+    <div class="header-container">
+        <div class="logo-icon">🧞</div>
+        <div class="logo-text">
+            <h1>DebugGenie</h1>
+            <p>Enterprise Error Analysis</p>
         </div>
         <div style="flex-grow: 1;"></div>
-        <div style="font-size: 12px; color: #52525b; border: 1px solid #27272a; padding: 4px 8px; border-radius: 4px;">
+        <div class="version-badge">
             v2.1 Onyx
         </div>
     </div>