From 2ed2b38e53470837d00af62aa0d6e34cef29b50f Mon Sep 17 00:00:00 2001
From: Seethamsetty Sai Utkarsh <saiutkarsh33@gmail.com>
Date: Tue, 17 Dec 2024 11:58:34 +0800
Subject: [PATCH] fix(tabs): fix padding between tab group and tab panel

---
 src/components/Tab/sgds-tab-panel.ts |  6 +++---
 src/components/Tab/tab-group.css     | 13 +++++++++++--
 src/components/Tab/tab-panel.css     |  8 ++------
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/Tab/sgds-tab-panel.ts b/src/components/Tab/sgds-tab-panel.ts
index 1c16faec..1b678d72 100644
--- a/src/components/Tab/sgds-tab-panel.ts
+++ b/src/components/Tab/sgds-tab-panel.ts
@@ -37,9 +37,9 @@ export class SgdsTabPanel extends SgdsElement {
     return html`
       <slot
         class=${classMap({
-          "tab-panel": true,
-          "tab-panel--active": this.active
-        })}
+      "tab-panel": true,
+      "tab-panel--active": this.active
+    })}
       ></slot>
     `;
   }
diff --git a/src/components/Tab/tab-group.css b/src/components/Tab/tab-group.css
index e89f8fb5..a7e0604f 100644
--- a/src/components/Tab/tab-group.css
+++ b/src/components/Tab/tab-group.css
@@ -1,7 +1,12 @@
 .tab-group {
   display: flex;
   flex-direction: column;
+  gap: var(--sgds-gap-xl);
+}
 
+.tab-group__nav {
+  display: flex;
+  flex-direction: row;
 }
 
 .tab-group__content {
@@ -12,6 +17,10 @@
   flex-direction: row;
 }
 
-:host([orientation="vertical"]) .tab-group__content {
-  flex: 1;
+:host([orientation="vertical"]) .tab-group__nav {
+  flex-direction: column;
+}
+
+:host([variant="solid"]) .tab-group__nav {
+  gap: var(--sgds-gap-xs);
 }
\ No newline at end of file
diff --git a/src/components/Tab/tab-panel.css b/src/components/Tab/tab-panel.css
index bb5364be..21c9eedb 100644
--- a/src/components/Tab/tab-panel.css
+++ b/src/components/Tab/tab-panel.css
@@ -1,11 +1,7 @@
-:host {
-  --tab-panel-padding-y: 1rem;
-  display: block;
-}
 .tab-panel {
   display: block;
-  padding: var(--tab-panel-padding-y) 0;
 }
+
 .tab-panel:not(.tab-panel--active) {
   display: none;
-}
+}
\ No newline at end of file