From bef2b1a30760a33dbe68923f8d6c4710cb6b057c Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Mon, 16 Sep 2024 11:06:47 +0200
Subject: [PATCH 1/5] wc: Fix class of buttons group in variant browser
 #TASK-6839

---
 src/webcomponents/variant/variant-browser.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webcomponents/variant/variant-browser.js b/src/webcomponents/variant/variant-browser.js
index 431c422ab..61ba53870 100644
--- a/src/webcomponents/variant/variant-browser.js
+++ b/src/webcomponents/variant/variant-browser.js
@@ -346,7 +346,7 @@ export default class VariantBrowser extends LitElement {
 
                 <div class="col-md-10">
                     <!-- TAB buttons -->
-                    <div class="content-pills mb-3" role="toolbar" aria-label="toolbar">
+                    <div class="d-flex gap-1 mb-3" role="toolbar" aria-label="toolbar">
                         <button
                             type="button"
                             class="${`btn btn-success ${this.activeTab === "table-tab" ? "active" : ""} content-pills`}"

From 25f758a4a3d94d0c18a32dfd62172ad0b5b0a8c5 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Mon, 16 Sep 2024 11:07:30 +0200
Subject: [PATCH 2/5] wc: Remove useless class content-pills in variant browser
 buttons #TASK-6839

---
 src/webcomponents/variant/variant-browser.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/webcomponents/variant/variant-browser.js b/src/webcomponents/variant/variant-browser.js
index 61ba53870..17ab9ed46 100644
--- a/src/webcomponents/variant/variant-browser.js
+++ b/src/webcomponents/variant/variant-browser.js
@@ -349,21 +349,21 @@ export default class VariantBrowser extends LitElement {
                     <div class="d-flex gap-1 mb-3" role="toolbar" aria-label="toolbar">
                         <button
                             type="button"
-                            class="${`btn btn-success ${this.activeTab === "table-tab" ? "active" : ""} content-pills`}"
+                            class="${`btn btn-success ${this.activeTab === "table-tab" ? "active" : ""}`}"
                             @click="${() => this.changeView("table-tab")}">
                             <i class="fa fa-table icon-padding" aria-hidden="true"></i>
                             <strong>Table Result</strong>
                         </button>
                         <button
                             type="button"
-                            class="${`btn btn-success ${this.activeTab === "facet-tab" ? "active" : ""} content-pills`}"
+                            class="${`btn btn-success ${this.activeTab === "facet-tab" ? "active" : ""}`}"
                             @click="${() => this.changeView("facet-tab")}">
                             <i class="fas fa-chart-bar icon-padding" aria-hidden="true"></i>
                             <strong>Aggregation Stats</strong>
                         </button>
                         <button
                             type="button"
-                            class="${`btn btn-success ${this.activeTab === "genome-tab" ? "active" : ""} content-pills`}"
+                            class="${`btn btn-success ${this.activeTab === "genome-tab" ? "active" : ""}`}"
                             @click="${() => this.changeView("genome-tab")}">
                             <i class="fas fa-dna icon-padding" aria-hidden="true"></i>
                             <strong>Genome Browser</strong>

From 41a5c02814e428ce8c98c761b91f325bd959bf46 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Mon, 16 Sep 2024 11:08:38 +0200
Subject: [PATCH 3/5] wc: Fix class of buttons group in interpreter browser
 #TASK-6839

---
 .../interpretation/variant-interpreter-browser-template.js      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
index 0573c70fa..5f74a6f1a 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
@@ -435,7 +435,7 @@ class VariantInterpreterBrowserTemplate extends LitElement {
 
                 <div class="flex-grow-1">
                     <!-- View toolbar -->
-                    <div class="content-pills mb-3" role="toolbar" aria-label="toolbar">
+                    <div class="d-flex gap-1 mb-3" role="toolbar" aria-label="toolbar">
                         ${this.renderViewButton("table", "Table Result", "table")}
                         ${!this.settings?.hideGenomeBrowser ? this.renderViewButton("genome-browser", "Genome Browser", "dna") : nothing}
                     </div>

From 5f4cd19c813ff80a24bdc83d6aced1a3406a0829 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Mon, 16 Sep 2024 11:09:21 +0200
Subject: [PATCH 4/5] wc: Minor code style fix in interpreter browser template
 #TASK-6839

---
 .../interpretation/variant-interpreter-browser-template.js     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
index 5f74a6f1a..edf2db6de 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
@@ -387,7 +387,8 @@ class VariantInterpreterBrowserTemplate extends LitElement {
             <button class="${`btn btn-success ${this.activeView === id ? "active" : ""}`}" @click="${() => this.onChangeView(id)}">
                 <i class="${`fa fa-${icon} icon-padding`}" aria-hidden="true"></i>
                 <strong>${title}</strong>
-            </button>`;
+            </button>
+        `;
     }
 
     render() {

From 9d4061bddfbbd04ee91e83efe4a47df9bb070c0b Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Mon, 16 Sep 2024 11:10:26 +0200
Subject: [PATCH 5/5] wc: Fix class of buttons group in catalog browsers
 #TASK-6839

---
 src/webcomponents/commons/opencga-browser.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webcomponents/commons/opencga-browser.js b/src/webcomponents/commons/opencga-browser.js
index 59a39a885..6b949f565 100644
--- a/src/webcomponents/commons/opencga-browser.js
+++ b/src/webcomponents/commons/opencga-browser.js
@@ -318,7 +318,7 @@ export default class OpencgaBrowser extends LitElement {
 
     renderButtonViews() {
         return html `
-            <div class="content-pills mb-3" role="toolbar" aria-label="toolbar">
+            <div class="d-flex gap-1 mb-3" role="toolbar" aria-label="toolbar">
                 ${(this._config.views || []).map(view => html`
                     <button
                         type="button"