Add conditional padding for HF Space dashboard when not in iframe (#405)

Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

Author: 3 people

.changeset/young-words-pull.md

@@ -0,0 +1,5 @@
+---
+"trackio": minor
+---
+
+feat:Add conditional padding for HF Space dashboard when not in iframe

trackio/ui/main.py

@@ -627,31 +627,59 @@ def configure(request: gr.Request):
     return null;
 }
 
-(function() {
+(async function() {
     const urlParams = new URLSearchParams(window.location.search);
     const writeToken = urlParams.get('write_token');
     const footerParam = urlParams.get('footer');
-    
+
     if (writeToken) {
         setCookie('trackio_write_token', writeToken, 7);
-                
-        // Only remove write_token from URL if not in iframe
-        // In iframes, keep it in URL as cookies may be blocked
+
         const inIframe = window.self !== window.top;
         if (!inIframe) {
             urlParams.delete('write_token');
-            const newUrl = window.location.pathname + 
-                (urlParams.toString() ? '?' + urlParams.toString() : '') + 
+            const newUrl = window.location.pathname +
+                (urlParams.toString() ? '?' + urlParams.toString() : '') +
                 window.location.hash;
             window.history.replaceState({}, document.title, newUrl);
         }
     }
-    
+
     if (footerParam === 'false') {
         const style = document.createElement('style');
         style.textContent = 'footer { display: none !important; }';
         document.head.appendChild(style);
     }
+
+    const inIframe = window.self !== window.top;
+    const isHfSpace = window.location.hostname.endsWith('.hf.space');
+
+    const waitForElement = function(selector) {
+        return new Promise(resolve => {
+            if (document.querySelector(selector)) {
+                return resolve(document.querySelector(selector));
+            }
+
+            const observer = new MutationObserver(mutations => {
+                if (document.querySelector(selector)) {
+                    observer.disconnect();
+                    resolve(document.querySelector(selector));
+                }
+            });
+
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+        });
+    };
+    if (isHfSpace && !inIframe) {
+        document.querySelector('gradio-app').style.paddingTop = '56px';
+        const spaceHeaderCollapseButton = await waitForElement('#space-header__collapse');
+        spaceHeaderCollapseButton.addEventListener('click', function() {
+            document.querySelector('gradio-app').style.paddingTop = '0px';
+        });
+    }
 })();
 </script>
 """
@@ -1290,4 +1318,5 @@ def render_grouped_runs(project, group_key, filter_text, selection):
         footer_links=["gradio", "settings"],
         show_error=True,
         ssr_mode=False,
+        head=HEAD,
     )