From c84e005424d26d32d30918fdbcacb09c9be493b5 Mon Sep 17 00:00:00 2001
From: Frankie Yan <frankie@doist.com>
Date: Fri, 13 Dec 2024 19:58:32 -0800
Subject: [PATCH 1/3] fix: Set max height for tabs

---
 src/tabs/tabs.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/tabs/tabs.module.css b/src/tabs/tabs.module.css
index 38e6e62f..6ea7d46c 100644
--- a/src/tabs/tabs.module.css
+++ b/src/tabs/tabs.module.css
@@ -27,6 +27,7 @@
     font-size: var(--reactist-font-size-body);
     font-weight: var(--reactist-font-weight-medium);
     line-height: var(--reactist-tab-line-height);
+    min-height: var(--reactist-tab-height);
     z-index: 1;
     text-decoration: none;
     border: var(--reactist-tab-border-width) solid transparent;

From 64cf950517b0856e38ed7565b61cb704db8b6372 Mon Sep 17 00:00:00 2001
From: Frankie Yan <frankie@doist.com>
Date: Fri, 13 Dec 2024 20:44:01 -0800
Subject: [PATCH 2/3] Switch to adding top/bottom padding to tabs

---
 src/tabs/tabs.module.css  | 6 +++---
 src/tabs/tabs.stories.mdx | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/tabs/tabs.module.css b/src/tabs/tabs.module.css
index 6ea7d46c..f9f97e49 100644
--- a/src/tabs/tabs.module.css
+++ b/src/tabs/tabs.module.css
@@ -14,20 +14,20 @@
     --reactist-tab-track-border-width: 2px;
     --reactist-tab-border-radius: 20px;
     --reactist-tab-border-width: 1px;
-    --reactist-tab-height: 30px;
+    --reactist-tab-padding-x: var(--reactist-spacing-medium);
+    --reactist-tab-padding-y: var(--reactist-spacing-small);
     --reactist-tab-line-height: 21px;
 }
 
 .tab {
     box-sizing: border-box;
-    padding: 0 var(--reactist-spacing-medium);
+    padding: var(--reactist-tab-padding-y) var(--reactist-tab-padding-x);
     border: none;
     background: none;
     cursor: pointer;
     font-size: var(--reactist-font-size-body);
     font-weight: var(--reactist-font-weight-medium);
     line-height: var(--reactist-tab-line-height);
-    min-height: var(--reactist-tab-height);
     z-index: 1;
     text-decoration: none;
     border: var(--reactist-tab-border-width) solid transparent;
diff --git a/src/tabs/tabs.stories.mdx b/src/tabs/tabs.stories.mdx
index de808275..5c259ae9 100644
--- a/src/tabs/tabs.stories.mdx
+++ b/src/tabs/tabs.stories.mdx
@@ -146,7 +146,9 @@ Their size can also be customized with:
 --reactist-tab-track-border-width
 --reactist-tab-border-radius
 --reactist-tab-border-width
---reactist-tab-height
+--reactist-tab-padding-x
+--reactist-tab-padding-y
+--reactist-tab-line-height
 ```
 
 ## Stories

From c732b4b96cf4ebb04f70d46ce8c5588aa3950eef Mon Sep 17 00:00:00 2001
From: Frankie Yan <frankie@doist.com>
Date: Fri, 13 Dec 2024 20:50:33 -0800
Subject: [PATCH 3/3] Update changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ec94495..e97f53f9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# Next
+
+-   [Fix] Add top and bottom paddings to the `Tab` component.
+
 # 26.2.4
 
 -   [Fix] The `Prose` component's horizontal rule color is now properly set to the primary divider color.