From b018493728ecaf2812e789e528e33c0e70c2148e Mon Sep 17 00:00:00 2001
From: ArthurFlag <arthur.flageul@docker.com>
Date: Wed, 4 Jun 2025 17:23:00 +0200
Subject: [PATCH 1/4] update styling

---
 assets/css/components.css    | 12 ++++++++++++
 layouts/shortcodes/tabs.html |  7 +++----
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/assets/css/components.css b/assets/css/components.css
index bfb1ef702cdb..d03c9014f97a 100644
--- a/assets/css/components.css
+++ b/assets/css/components.css
@@ -101,3 +101,15 @@
 .summary-bar {
   @apply my-1 mt-4 flex flex-col rounded-sm border-1 border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-900;
 }
+
+.tabs {
+  @apply bg-blue/2 rounded-sm p-2;
+}
+.tablist {
+  @apply mb-1 border-b border-gray-100 dark:border-gray-800;
+}
+
+.tab-item {
+  @apply inline-block rounded-sm px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-900;
+  @apply dark:text-gray-200;
+}
diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html
index 3c8fff5f8361..d8d1e3119486 100644
--- a/layouts/shortcodes/tabs.html
+++ b/layouts/shortcodes/tabs.html
@@ -6,6 +6,7 @@
 
 
 <div
+  class="tabs"
   {{ with $group }}
     {{ if $persist }}
       x-data="{ selected: $persist('{{ $first }}').as('{{ $groupID }}') }"
@@ -19,10 +20,10 @@
   {{ end }}
   aria-role="tabpanel"
 >
-  <div aria-role="tablist" class="space-x-2">
+  <div aria-role="tablist" class="tablist">
     {{ range (.Store.Get "tabs") }}
       <button
-        class="p-1"
+        class="tab-item"
         :class="selected === '{{ .name | urlize }}' &&
           'border-blue border-b-4 dark:border-b-blue-600'"
         {{ if $group }}
@@ -36,7 +37,6 @@
       </button>
     {{ end }}
   </div>
-  <hr class="!mt-0" />
   <div>
     {{ range (.Store.Get "tabs") }}
       <div
@@ -47,5 +47,4 @@
       </div>
     {{ end }}
   </div>
-  <hr />
 </div>

From 5ab4a2c682ec7b0694a08128ad8baf12cbfb1d1b Mon Sep 17 00:00:00 2001
From: ArthurFlag <arthur.flageul@docker.com>
Date: Wed, 4 Jun 2025 17:23:05 +0200
Subject: [PATCH 2/4] add group

---
 content/manuals/ai/model-runner/_index.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/content/manuals/ai/model-runner/_index.md b/content/manuals/ai/model-runner/_index.md
index 56dc11dcae8c..69cc326cdf29 100644
--- a/content/manuals/ai/model-runner/_index.md
+++ b/content/manuals/ai/model-runner/_index.md
@@ -83,7 +83,7 @@ You can now use the `docker model` command in the CLI and view and interact with
 
 Models are cached locally.
 
-{{< tabs >}}
+{{< tabs group="release" >}}
 {{< tab name="From Docker Desktop">}}
 
 1. Select **Models** and select the **Docker Hub** tab.
@@ -99,14 +99,14 @@ Use the [`docker model pull` command](/reference/cli/docker/).
 
 ## Run a model
 
-{{< tabs >}}
+{{< tabs group="release" >}}
 {{< tab name="From Docker Desktop">}}
 
 Select **Models** and select the **Local** tab and click the play button.
 The interactive chat screen opens.
 
 {{< /tab >}}
-{{< tab name="From the Docker CLI">}}
+{{< tab name="From the Docker CLI" >}}
 
 Use the [`docker model run` command](/reference/cli/docker/).
 
@@ -117,7 +117,7 @@ Use the [`docker model run` command](/reference/cli/docker/).
 
 To troubleshoot potential issues, display the logs:
 
-{{< tabs >}}
+{{< tabs group="release" >}}
 {{< tab name="From Docker Desktop">}}
 
 Select **Models** and select the **Logs** tab.

From e21711c87e33fee9647fe31477a59404a65ddfc8 Mon Sep 17 00:00:00 2001
From: ArthurFlag <arthur.flageul@docker.com>
Date: Wed, 4 Jun 2025 17:31:23 +0200
Subject: [PATCH 3/4] add "group" to snippet

---
 .vscode/docker.code-snippets | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/.vscode/docker.code-snippets b/.vscode/docker.code-snippets
index 4342ae2890ee..6f05322140dc 100644
--- a/.vscode/docker.code-snippets
+++ b/.vscode/docker.code-snippets
@@ -23,15 +23,15 @@
     "prefix": ["admonition", "tabs"],
     "body": [
       "",
-      "{{< tabs >}}",
-      "{{< tab name=\"$1\">}}",
+      "{{< tabs group=\"$1\" >}}",
+      "{{< tab name=\"$2\">}}",
       "",
-      "$2",
+      "$3",
       "",
       "{{< /tab >}}",
-      "{{< tab name=\"$3\">}}",
+      "{{< tab name=\"$4\">}}",
       "",
-      "$4",
+      "$5",
       "",
       "{{< /tab >}}",
       "{{</tabs >}}",

From d50378f6425794cfa7e404306099e47a732ce673 Mon Sep 17 00:00:00 2001
From: ArthurFlag <arthur.flageul@docker.com>
Date: Wed, 4 Jun 2025 17:54:23 +0200
Subject: [PATCH 4/4] fix

---
 assets/css/components.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/css/components.css b/assets/css/components.css
index d03c9014f97a..4e7a2234d3a0 100644
--- a/assets/css/components.css
+++ b/assets/css/components.css
@@ -110,6 +110,6 @@
 }
 
 .tab-item {
-  @apply inline-block rounded-sm px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-900;
+  @apply inline-block rounded-sm px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-900;
   @apply dark:text-gray-200;
 }