From 7750942d3a8c714baafd137c221a0fa2dd4c54b7 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 29 Mar 2026 22:42:58 -0500
Subject: [PATCH] clean up tabs

---
 docs/src/components/ConfigTabs/index.jsx | 38 ++++++++++++++------
 docs/src/components/NavPath/index.jsx    |  4 +--
 docs/src/css/custom.css                  | 46 ++++++++++++++++++++++++
 3 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/docs/src/components/ConfigTabs/index.jsx b/docs/src/components/ConfigTabs/index.jsx
index cf076989d..0fbc51897 100644
--- a/docs/src/components/ConfigTabs/index.jsx
+++ b/docs/src/components/ConfigTabs/index.jsx
@@ -1,18 +1,34 @@
-import React from "react";
+import React, { Children, cloneElement } from "react";
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 
 export default function ConfigTabs({ children }) {
+  const wrapped = Children.map(children, (child) => {
+    if (child?.props?.value === "ui") {
+      return cloneElement(child, {
+        className: "config-tab-ui",
+      });
+    }
+    if (child?.props?.value === "yaml") {
+      return cloneElement(child, {
+        className: "config-tab-yaml",
+      });
+    }
+    return child;
+  });
+
   return (
-    <Tabs
-      groupId="config-method"
-      defaultValue="ui"
-      values={[
-        { label: "Frigate UI", value: "ui" },
-        { label: "YAML", value: "yaml" },
-      ]}
-    >
-      {children}
-    </Tabs>
+    <div className="config-tabs-wrapper">
+      <Tabs
+        groupId="config-method"
+        defaultValue="ui"
+        values={[
+          { label: "Frigate UI", value: "ui" },
+          { label: "YAML", value: "yaml" },
+        ]}
+      >
+        {wrapped}
+      </Tabs>
+    </div>
   );
 }
diff --git a/docs/src/components/NavPath/index.jsx b/docs/src/components/NavPath/index.jsx
index 8ba71d514..e5ec86bdc 100644
--- a/docs/src/components/NavPath/index.jsx
+++ b/docs/src/components/NavPath/index.jsx
@@ -16,10 +16,10 @@ export default function NavPath({ path }) {
             <span
               style={{
                 margin: "0 4px",
-                color: "var(--ifm-color-emphasis-500)",
+                color: "var(--ifm-color-emphasis-800)",
               }}
             >
-              ›
+              →
             </span>
           )}
           <strong>{seg}</strong>
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 5d8fc5055..6d9b7c82f 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -241,4 +241,50 @@
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
   border-left: 3px solid #ff000080;
+}
+
+/* ConfigTabs wrapper */
+.config-tabs-wrapper {
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 16px;
+}
+
+.config-tabs-wrapper .tabs-container {
+  margin-bottom: 0 !important;
+}
+
+.config-tabs-wrapper .tabs {
+  background: var(--ifm-color-emphasis-100);
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
+  margin-bottom: 0;
+  padding: 0 12px;
+}
+
+.config-tabs-wrapper .tabs__item {
+  padding: 8px 16px;
+  border-radius: 0;
+}
+
+.config-tabs-wrapper .tabs__item--active {
+  border-bottom-color: var(--ifm-color-primary);
+}
+
+.config-tabs-wrapper .config-tab-ui {
+  padding: 4px 16px 16px;
+}
+
+.config-tabs-wrapper .config-tab-ui > :last-child {
+  margin-bottom: 0;
+}
+
+.config-tabs-wrapper div[class*="codeBlockContainer"] {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  margin: 0;
+}
+
+.config-tabs-wrapper .tabs-container > .margin-top--md:has(.config-tab-yaml:not([hidden])) {
+  margin-top: 0 !important;
 }
\ No newline at end of file