From 0ea7e10084387a90ebb05cbc88f69d8e78affc44 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 17 Mar 2025 11:26:45 +0200
Subject: [PATCH] feat(options/llm): improve style of tabs

---
 .../widgets/type_widgets/options/ai_settings.ts   | 14 +++++++-------
 src/public/stylesheets/theme-next/settings.css    | 15 +++++++++++++++
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/public/app/widgets/type_widgets/options/ai_settings.ts b/src/public/app/widgets/type_widgets/options/ai_settings.ts
index 2a5ce06af..d3596c191 100644
--- a/src/public/app/widgets/type_widgets/options/ai_settings.ts
+++ b/src/public/app/widgets/type_widgets/options/ai_settings.ts
@@ -128,14 +128,14 @@ export default class AiSettingsWidget extends OptionsWidget {
             </div>
         </div>
 
+        <nav class="options-section-tabs">
+            <div class="nav nav-tabs" id="nav-tab" role="tablist">
+                <button class="nav-link active" id="nav-openai-tab" data-bs-toggle="tab" data-bs-target="#nav-openai" type="button" role="tab" aria-controls="nav-openai" aria-selected="true">OpenAI</button>
+                <button class="nav-link" id="nav-anthropic-tab" data-bs-toggle="tab" data-bs-target="#nav-anthropic" type="button" role="tab" aria-controls="nav-anthropic" aria-selected="false">Anthropic</button>
+                <button class="nav-link" id="nav-ollama-tab" data-bs-toggle="tab" data-bs-target="#nav-ollama" type="button" role="tab" aria-controls="nav-ollama" aria-selected="false">Ollama</button>
+            </div>
+        </nav>
         <div class="options-section">
-            <nav>
-                <div class="nav nav-tabs" id="nav-tab" role="tablist">
-                    <button class="nav-link active" id="nav-openai-tab" data-bs-toggle="tab" data-bs-target="#nav-openai" type="button" role="tab" aria-controls="nav-openai" aria-selected="true">OpenAI</button>
-                    <button class="nav-link" id="nav-anthropic-tab" data-bs-toggle="tab" data-bs-target="#nav-anthropic" type="button" role="tab" aria-controls="nav-anthropic" aria-selected="false">Anthropic</button>
-                    <button class="nav-link" id="nav-ollama-tab" data-bs-toggle="tab" data-bs-target="#nav-ollama" type="button" role="tab" aria-controls="nav-ollama" aria-selected="false">Ollama</button>
-                </div>
-            </nav>
             <div class="tab-content" id="nav-tabContent">
                 <div class="tab-pane fade show active" id="nav-openai" role="tabpanel" aria-labelledby="nav-openai-tab">
                     <div class="ai-provider">
diff --git a/src/public/stylesheets/theme-next/settings.css b/src/public/stylesheets/theme-next/settings.css
index 41b50cc39..5191a2fda 100644
--- a/src/public/stylesheets/theme-next/settings.css
+++ b/src/public/stylesheets/theme-next/settings.css
@@ -107,6 +107,21 @@
     font-size: .85em;
 }
 
+nav.options-section-tabs {
+    min-width: var(--options-card-min-width);
+    max-width: var(--options-card-max-width);
+    margin: auto;
+}
+
+nav.options-section-tabs .nav-tabs {
+    border-bottom: 0;
+}
+
+nav.options-section-tabs + .options-section {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
 /* Appeareance */
 
 .main-font-size-input-group,