ux: touch up tabs (#22774)

Reduce magins, add hover effect, add light background

![Frame
31](https://github.com/user-attachments/assets/1b028adf-3baf-4588-9161-329b272ffb8e)

Author: ArthurFlag

.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 >}}",

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-100 dark:hover:bg-gray-900;
+  @apply dark:text-gray-200;
+}

content/manuals/ai/model-runner/_index.md

@@ -82,7 +82,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.
@@ -98,14 +98,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/).
 
@@ -116,7 +116,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.

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>