Put primary navigation in top tab bar

app.py

@@ -132,7 +132,8 @@ gradio-app,
   line-height: 1.55;
 }
 
-.gradio-container .tab-nav {
+.gradio-container .tab-nav,
+.gradio-container [role="tablist"] {
   position: sticky !important;
   top: 0;
   z-index: 50;
@@ -146,7 +147,8 @@ gradio-app,
   border-bottom: 1px solid var(--line) !important;
 }
 
-.gradio-container .tab-nav button {
+.gradio-container .tab-nav button,
+.gradio-container [role="tab"] {
   min-height: 32px !important;
   padding: 5px 11px !important;
   background: transparent !important;
@@ -159,12 +161,15 @@ gradio-app,
 }
 
 .gradio-container .tab-nav button:hover,
-.gradio-container .tab-nav button[aria-selected="true"] {
+.gradio-container .tab-nav button[aria-selected="true"],
+.gradio-container [role="tab"]:hover,
+.gradio-container [role="tab"][aria-selected="true"] {
   background: var(--paper) !important;
   border-color: var(--line) !important;
 }
 
-.gradio-container .tab-nav button:last-child {
+.gradio-container .tab-nav button:last-child,
+.gradio-container [role="tablist"] [role="tab"]:last-child {
   margin-left: auto !important;
   background: var(--green-strong) !important;
   border-color: #1f5d25 !important;
@@ -172,36 +177,13 @@ gradio-app,
 }
 
 .gradio-container .tab-nav button:last-child:hover,
-.gradio-container .tab-nav button:last-child[aria-selected="true"] {
+.gradio-container .tab-nav button:last-child[aria-selected="true"],
+.gradio-container [role="tablist"] [role="tab"]:last-child:hover,
+.gradio-container [role="tablist"] [role="tab"]:last-child[aria-selected="true"] {
   background: #236c29 !important;
   color: #fff !important;
 }
 
-.page-actions {
-  padding: 12px 0 0;
-}
-
-.home-button {
-  display: inline-block;
-  min-height: 32px;
-  padding: 6px 11px;
-  background: var(--paper);
-  border: 1px solid var(--line);
-  border-radius: 4px;
-  color: var(--ink) !important;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 1.25;
-  text-decoration: none !important;
-}
-
-.home-button:hover,
-.home-button:focus-visible {
-  background: #fffaf0;
-  outline: 2px solid var(--line);
-  outline-offset: 2px;
-}
-
 .section {
   padding: 30px 0 8px;
 }
@@ -871,11 +853,13 @@ gradio-app,
     display: block;
   }
 
-  .gradio-container .tab-nav {
+  .gradio-container .tab-nav,
+  .gradio-container [role="tablist"] {
     padding: 7px 11px !important;
   }
 
-  .gradio-container .tab-nav button:last-child {
+  .gradio-container .tab-nav button:last-child,
+  .gradio-container [role="tablist"] [role="tab"]:last-child {
     margin-left: 0 !important;
   }
 
@@ -1567,13 +1551,7 @@ def family_page_html(setup: str | None = None) -> str:
 
 
 def top_nav() -> str:
-    return """
-    <nav class="page-actions" aria-label="Page navigation">
-      <div class="contain">
-        <a class="home-button" href="./">All families</a>
-      </div>
-    </nav>
-    """
+    return ""
 
 
 @lru_cache(maxsize=4)