fix: Set correct height for tabs (#854)

* fix: Set max height for tabs

* Switch to adding top/bottom padding to tabs

* Update changelog

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.

src/tabs/tabs.module.css

@@ -14,13 +14,14 @@
     --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;

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