Fix UI: remove LoginButton, fix aggressive CSS overrides that hid custom HTML component

static/style.css

@@ -1,71 +1,42 @@
 /* DeepSeek V4 Flash Ultra-Minimalist & Mobile-Friendly Style Sheet */
 
-/* ── AGGRESSIVE Gradio overrides ─────────────────────────────────────── */
-/* Completely hide Gradio's default chrome, containers, and hidden components */
+/* ── Targeted Gradio overrides ─────────────────────────────────────── */
+/* 
+   Strategy: Hide Gradio's chrome but NEVER hide our #custom-app-root.
+   We use specific selectors instead of blanket .component-N hiding.
+*/
+
+/* 1. Hide Gradio's top header bar */
+.gradio-container > .header,
+.gradio-container header:not(:has(#custom-app-root)),
+#gradio-header,
+.gr-header {
+    display: none !important;
+}
+
+/* 2. Reset Gradio container to full viewport - no max-width, no padding */
 .gradio-container,
-.contain,
 .gr-app,
 .main,
-.wrap,
-.contain .gr-box,
-.gr-panel,
-.gr-input,
-.gr-form,
-.gr-block {
+.wrap {
     max-width: 100% !important;
     padding: 0 !important;
     margin: 0 !important;
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
-    gap: 0 !important;
 }
 
-/* Hide Gradio's top bar / header */
-.gradio-container > .header,
-.gradio-container header,
-#gradio-header,
-.gr-header {
-    display: none !important;
-}
-
-/* Hide ALL Gradio hidden components and their wrappers */
-.component-3,
-.component-2,
-.component-1,
-[data-testid="textbox"],
-[data-testid="button"],
-.gradio-container .gr-box[data-testid],
-.gradio-container .form,
-.gradio-container .gap {
-    display: none !important;
-    height: 0 !important;
-    min-height: 0 !important;
-    padding: 0 !important;
+/* 3. Make body and html fill viewport */
+html, body {
     margin: 0 !important;
+    padding: 0 !important;
     overflow: hidden !important;
-    visibility: hidden !important;
-    position: absolute !important;
-    pointer-events: none !important;
-}
-
-/* Hide the Gradio LoginButton (visible=True needed for OAuth, but we use our own custom button) */
-.gradio-container a[href*="login"],
-.gradio-container button[class*="login"],
-.gradio-container [data-testid="login-button"],
-.gradio-container .login-btn,
-.gradio-container a[target="_top"] {
-    position: absolute !important;
-    left: -9999px !important;
-    top: -9999px !important;
-    width: 0 !important;
-    height: 0 !important;
-    overflow: hidden !important;
-    opacity: 0 !important;
-    pointer-events: none !important;
+    height: 100vh !important;
+    width: 100vw !important;
 }
 
-/* Make our custom app root the only visible thing */
+/* 4. Ensure our custom app root is the ONLY visible thing at full viewport */
 #custom-app-root {
     display: block !important;
     visibility: visible !important;
@@ -80,10 +51,12 @@
     height: 100vh;
 }
 
-/* Make the Gradio HTML component container full viewport */
+/* 5. Make the Gradio HTML component container that wraps our app full viewport */
 .gradio-container .gr-html,
 [data-testid="html"],
-.gradio-container > .gr-box:has(> #custom-app-root) {
+.gradio-container > .gr-box:has(> #custom-app-root),
+.gradio-container > *:has(#custom-app-root),
+.gradio-container > *:has(> #custom-app-root) {
     display: block !important;
     visibility: visible !important;
     position: relative !important;
@@ -98,24 +71,40 @@
     background: transparent !important;
 }
 
-/* Fallback: show any element that contains our app root */
-.gradio-container > *:has(#custom-app-root) {
-    display: block !important;
-    visibility: visible !important;
-    width: 100% !important;
-    height: 100vh !important;
+/* 6. Hide ALL Gradio-generated components that are NOT our HTML block.
+   These are the hidden Textbox/Button components used for API endpoints.
+   Since they have visible=False, Gradio already hides them, but we add 
+   extra protection for any wrappers. We DO NOT use .component-N selectors
+   because those are unstable and can accidentally hide our content. */
+
+/* Hide any Gradio form/gap elements that are not our content */
+.gradio-container .form:has(> [data-testid="textbox"]),
+.gradio-container .form:has(> [data-testid="button"]),
+.gradio-container .gap {
+    display: none !important;
+    height: 0 !important;
+    min-height: 0 !important;
     padding: 0 !important;
     margin: 0 !important;
     overflow: hidden !important;
+    position: absolute !important;
+    pointer-events: none !important;
 }
 
-/* Make body and html fill viewport */
-html, body {
-    margin: 0 !important;
-    padding: 0 !important;
+/* Hide the Gradio LoginButton link if it exists */
+.gradio-container a[href*="login"]:not(:has(#custom-app-root)),
+.gradio-container button[class*="login"]:not(:has(#custom-app-root)),
+.gradio-container [data-testid="login-button"]:not(:has(#custom-app-root)),
+.gradio-container .login-btn:not(:has(#custom-app-root)) {
+    display: none !important;
+    position: absolute !important;
+    left: -9999px !important;
+    top: -9999px !important;
+    width: 0 !important;
+    height: 0 !important;
     overflow: hidden !important;
-    height: 100vh !important;
-    width: 100vw !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
 }
 
 /* ── CSS Variables ────────────────────────────────────────────────────── */
@@ -1498,11 +1487,6 @@ input[type="password"]:focus {
     .sidebar-right.collapsed {
         transform: translateX(100%);
     }
-
-    /* When settings are open, we can optionally squeeze the workspace */
-    .app-container:not(.settings-collapsed) .main-workspace {
-        /* Only apply if you want layout shifting. Slicing over is cleaner! */
-    }
 }
 
 /* Mobile: Left sidebar becomes an overlay */