From f4dc5b843796adbb83f20c10c1b065a2407bda6a Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Mon, 2 Mar 2026 15:04:36 -0500
Subject: [PATCH 1/6] Fix GTabs vertical layout and spacing

Match BSV's rendered structure for vertical tabs: container uses
Bootstrap row/no-gutters grid, nav is wrapped in a col-auto div,
tab-content gets the col class. When card+vertical, the nav gets
card-header h-100 border-bottom-0 rounded-0 and card-header-tabs/pills
classes are skipped since they conflict.

Also pass the card prop through provide/inject so GTab can add the
card-body class to tab panes, matching BSV's padding behavior.

Fixes #21966
---
 client/src/components/BaseComponents/GTab.vue |  2 +-
 .../src/components/BaseComponents/GTabs.vue   | 61 +++++++++++++++----
 2 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/client/src/components/BaseComponents/GTab.vue b/client/src/components/BaseComponents/GTab.vue
index 0b75cb6cc08..21d69b8108a 100644
--- a/client/src/components/BaseComponents/GTab.vue
+++ b/client/src/components/BaseComponents/GTab.vue
@@ -112,7 +112,7 @@ onBeforeUnmount(() => {
         v-show="isActive"
         :id="id"
         class="tab-pane"
-        :class="{ active: isActive, show: isActive }"
+        :class="{ active: isActive, show: isActive, 'card-body': context.tabsCard }"
         role="tabpanel">
         <slot />
     </div>
diff --git a/client/src/components/BaseComponents/GTabs.vue b/client/src/components/BaseComponents/GTabs.vue
index 9ee0d217cce..8d9ac0e0770 100644
--- a/client/src/components/BaseComponents/GTabs.vue
+++ b/client/src/components/BaseComponents/GTabs.vue
@@ -22,6 +22,7 @@ export interface TabsContext {
     updateTab: (index: number, tab: TabRegistration) => void;
     setActive: (index: number) => void;
     tabsLazy: boolean;
+    tabsCard: boolean;
 }
 
 const props = withDefaults(
@@ -105,6 +106,7 @@ provide<TabsContext>("g-tabs-context", {
     updateTab,
     setActive,
     tabsLazy: props.lazy,
+    tabsCard: props.card,
 });
 
 const navClasses = computed(() => ({
@@ -112,15 +114,20 @@ const navClasses = computed(() => ({
     "nav-pills": props.pills,
     "nav-justified": props.justified,
     "nav-fill": props.fill,
-    "card-header-tabs": props.card && !props.pills,
-    "card-header-pills": props.card && props.pills,
+    "card-header-tabs": props.card && !props.pills && !props.vertical,
+    "card-header-pills": props.card && props.pills && !props.vertical,
     "flex-column": props.vertical,
+    "card-header": props.card && props.vertical,
+    "h-100": props.card && props.vertical,
+    "border-bottom-0": props.card && props.vertical,
+    "rounded-0": props.card && props.vertical,
 }));
 
 // "tabs" class matches BTabs' outer div class for Selenium selector compatibility
 const containerClasses = computed(() => ({
     tabs: true,
-    "d-flex": props.vertical,
+    row: props.vertical,
+    "no-gutters": props.vertical && props.card,
 }));
 
 // Vue 2.7 doesn't support plain functions as components via <component :is>,
@@ -146,7 +153,44 @@ const TabTitleContent = defineComponent({
 
 <template>
     <div :class="containerClasses">
-        <ul class="nav" :class="navClasses" role="tablist">
+        <!--
+            Nav items are duplicated across the v-if/v-else branches because vertical mode needs
+            a col-auto wrapper div for Bootstrap's grid layout. Keep both branches in sync.
+
+            TODO: migrate <a> to <button> in both branches — semantically more correct for tabs.
+            Using <a href="#"> for now because Selenium selectors in navigation.yml target `a.nav-link`
+            (e.g. `.nav-item[title="..."] > a.nav-link`) matching what BTabs rendered.
+            When updating, also change those selectors to drop the element type requirement.
+        -->
+
+        <!-- Vertical: BSV wraps the nav in a col-auto div for Bootstrap grid layout -->
+        <div v-if="props.vertical" class="col-auto">
+            <ul class="nav" :class="navClasses" role="tablist">
+                <li
+                    v-for="(tab, index) in tabs"
+                    :key="index"
+                    class="nav-item"
+                    :class="tab.titleItemClass"
+                    :title="tab.title"
+                    role="presentation">
+                    <a
+                        :id="tab.buttonId"
+                        class="nav-link"
+                        :class="[tab.titleLinkClass, { active: index === activeIndex, disabled: tab.disabled }]"
+                        role="tab"
+                        href="#"
+                        :aria-selected="index === activeIndex"
+                        :aria-disabled="tab.disabled"
+                        v-bind="tab.titleLinkAttributes"
+                        @click.prevent="!tab.disabled && setActive(index)">
+                        <TabTitleContent :tab="tab" />
+                    </a>
+                </li>
+            </ul>
+        </div>
+
+        <!-- Non-vertical: nav is a direct child -->
+        <ul v-else class="nav" :class="navClasses" role="tablist">
             <li
                 v-for="(tab, index) in tabs"
                 :key="index"
@@ -154,12 +198,6 @@ const TabTitleContent = defineComponent({
                 :class="tab.titleItemClass"
                 :title="tab.title"
                 role="presentation">
-                <!--
-                    TODO: migrate to <button> — semantically more correct for tabs (action, not navigation).
-                    Using <a href="#"> for now because Selenium selectors in navigation.yml target `a.nav-link`
-                    (e.g. `.nav-item[title="..."] > a.nav-link`) matching what BTabs rendered.
-                    When updating, also change those selectors to drop the element type requirement.
-                -->
                 <a
                     :id="tab.buttonId"
                     class="nav-link"
@@ -176,7 +214,8 @@ const TabTitleContent = defineComponent({
                 </a>
             </li>
         </ul>
-        <div class="tab-content" :class="{ 'flex-grow-1': props.vertical }">
+
+        <div class="tab-content" :class="{ col: props.vertical }">
             <slot />
         </div>
     </div>

From b670e7a9a30875791f7c9b6d44d77d6ccfd6e87c Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Mon, 2 Mar 2026 20:26:05 -0500
Subject: [PATCH 2/6] Fix GTabs plain-text titles rendering in unnecessary span
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TabTitleContent wrapped plain string titles in a <span>, which broke
Selenium XPath selectors using text() since the text was no longer a
direct child of the <a> element. The span is only needed when a title
slot returns multiple VNodes — plain strings work fine as a render
function return value.
---
 client/src/components/BaseComponents/GTabs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/BaseComponents/GTabs.vue b/client/src/components/BaseComponents/GTabs.vue
index 8d9ac0e0770..f2b9e54d5cc 100644
--- a/client/src/components/BaseComponents/GTabs.vue
+++ b/client/src/components/BaseComponents/GTabs.vue
@@ -145,7 +145,7 @@ const TabTitleContent = defineComponent({
                 const nodes = props.tab.titleRenderer();
                 return nodes.length === 1 ? nodes[0] : h("span", nodes);
             }
-            return h("span", props.tab.title || "");
+            return props.tab.title || "";
         };
     },
 });

From 8fd0955dd4e3f41eae4f8c103a3715de18620c3a Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Tue, 3 Mar 2026 08:03:52 -0500
Subject: [PATCH 3/6] Drop unnecessary span around plain-text tab titles

GTab.titleRenderer was wrapping plain title strings in h("span", ...)
even when no title slot was provided. In GTabs, the template now
renders plain titles as direct text inside the <a> and only uses the
TabTitleContent component when a title slot provides custom VNodes.
---
 client/src/components/BaseComponents/GTab.vue  |  4 ++--
 client/src/components/BaseComponents/GTabs.vue | 10 ++++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/client/src/components/BaseComponents/GTab.vue b/client/src/components/BaseComponents/GTab.vue
index 21d69b8108a..1f0c294e9ec 100644
--- a/client/src/components/BaseComponents/GTab.vue
+++ b/client/src/components/BaseComponents/GTab.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, h, inject, onBeforeUnmount, onMounted, ref, useSlots, watch } from "vue";
+import { computed, inject, onBeforeUnmount, onMounted, ref, useSlots, watch } from "vue";
 
 import type { TabRegistration, TabsContext } from "./GTabs.vue";
 
@@ -58,7 +58,7 @@ function titleRenderer() {
     if (slots.title) {
         return slots.title();
     }
-    return props.title ? [h("span", props.title)] : [];
+    return undefined;
 }
 
 function buildRegistration(): TabRegistration {
diff --git a/client/src/components/BaseComponents/GTabs.vue b/client/src/components/BaseComponents/GTabs.vue
index f2b9e54d5cc..b2cea9febed 100644
--- a/client/src/components/BaseComponents/GTabs.vue
+++ b/client/src/components/BaseComponents/GTabs.vue
@@ -141,8 +141,8 @@ const TabTitleContent = defineComponent({
     },
     setup(props) {
         return () => {
-            if (props.tab.titleRenderer) {
-                const nodes = props.tab.titleRenderer();
+            const nodes = props.tab.titleRenderer?.();
+            if (nodes && nodes.length > 0) {
                 return nodes.length === 1 ? nodes[0] : h("span", nodes);
             }
             return props.tab.title || "";
@@ -183,7 +183,8 @@ const TabTitleContent = defineComponent({
                         :aria-disabled="tab.disabled"
                         v-bind="tab.titleLinkAttributes"
                         @click.prevent="!tab.disabled && setActive(index)">
-                        <TabTitleContent :tab="tab" />
+                        <TabTitleContent v-if="tab.titleRenderer" :tab="tab" />
+                        <template v-else>{{ tab.title }}</template>
                     </a>
                 </li>
             </ul>
@@ -210,7 +211,8 @@ const TabTitleContent = defineComponent({
                     :data-tab-title="tab.title"
                     v-bind="tab.titleLinkAttributes"
                     @click.prevent="!tab.disabled && setActive(index)">
-                    <TabTitleContent :tab="tab" />
+                    <TabTitleContent v-if="tab.titleRenderer" :tab="tab" />
+                    <template v-else>{{ tab.title }}</template>
                 </a>
             </li>
         </ul>

From 2293eefbd5a0336185f5b4a2251c8084c4f5f08a Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Mon, 23 Mar 2026 14:28:32 -0400
Subject: [PATCH 4/6] Add aria-controls and data-tab-title to vertical tab
 branch

Upstream added these attributes to the tab <a> elements for
accessibility and robust CSS selectors, but only the non-vertical
template branch picked them up during rebase. Mirror them in the
vertical branch to keep both in sync.
---
 client/src/components/BaseComponents/GTabs.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/src/components/BaseComponents/GTabs.vue b/client/src/components/BaseComponents/GTabs.vue
index b2cea9febed..b55ade38ac8 100644
--- a/client/src/components/BaseComponents/GTabs.vue
+++ b/client/src/components/BaseComponents/GTabs.vue
@@ -180,7 +180,9 @@ const TabTitleContent = defineComponent({
                         role="tab"
                         href="#"
                         :aria-selected="index === activeIndex"
+                        :aria-controls="tab.id"
                         :aria-disabled="tab.disabled"
+                        :data-tab-title="tab.title"
                         v-bind="tab.titleLinkAttributes"
                         @click.prevent="!tab.disabled && setActive(index)">
                         <TabTitleContent v-if="tab.titleRenderer" :tab="tab" />

From ad9f6f4f187a4bfba71387cb065459289b498e09 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Mon, 23 Mar 2026 17:52:15 -0400
Subject: [PATCH 5/6] Fix titleRenderer return type to allow undefined

GTab.titleRenderer returns undefined when no title slot is provided,
but the TabRegistration interface only allowed VNode[]. Update the
type to match the implementation.
---
 client/src/components/BaseComponents/GTabs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/BaseComponents/GTabs.vue b/client/src/components/BaseComponents/GTabs.vue
index b55ade38ac8..d1bd6a99182 100644
--- a/client/src/components/BaseComponents/GTabs.vue
+++ b/client/src/components/BaseComponents/GTabs.vue
@@ -4,7 +4,7 @@ import { computed, defineComponent, h, provide, ref, watch } from "vue";
 
 export interface TabRegistration {
     title?: string;
-    titleRenderer?: () => VNode[];
+    titleRenderer?: () => VNode[] | undefined;
     disabled?: boolean;
     id?: string;
     buttonId?: string;

From 763f810c8d483cbb914f8633d5cf5b7358393310 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Mon, 23 Mar 2026 20:25:31 -0400
Subject: [PATCH 6/6] Fix tab titles not rendering for plain-text tabs

titleRenderer was always set as a function reference in
buildRegistration(), so the v-if="tab.titleRenderer" guard in GTabs
was always true. TabTitleContent would then return a plain string
which Vue 2.7 can't render from a render function, producing empty
tab labels.

Only set titleRenderer when the tab actually has a title slot,
so plain-text titles fall through to the {{ tab.title }} template
interpolation.
---
 client/src/components/BaseComponents/GTab.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/client/src/components/BaseComponents/GTab.vue b/client/src/components/BaseComponents/GTab.vue
index 1f0c294e9ec..97dba451c55 100644
--- a/client/src/components/BaseComponents/GTab.vue
+++ b/client/src/components/BaseComponents/GTab.vue
@@ -54,17 +54,10 @@ const shouldRender = computed(() => {
     return hasBeenActive.value;
 });
 
-function titleRenderer() {
-    if (slots.title) {
-        return slots.title();
-    }
-    return undefined;
-}
-
 function buildRegistration(): TabRegistration {
     return {
         title: props.title,
-        titleRenderer,
+        titleRenderer: slots.title ? () => slots.title!() : undefined,
         disabled: props.disabled,
         id: props.id,
         buttonId: props.buttonId,