Merge pull request learningequality#673 from AlexVelezLl/fix-ktabs-ex…

…tra-space Fix ktabs extra space
BabyElias · Jul 1, 2024 · cf84aaa · cf84aaa
2 parents 9d2a147 + fab0b72
commit cf84aaa
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,17 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Version 4.x.x (`release-v4` branch)
 
+- [#673]
+  - **Description:** Remove white space below Ktabs
+  - **Products impact:** bugfix.
+  - **Addresses:** https://github.com/learningequality/kolibri/issues/12297.
+  - **Components:** KTabsList, KTabs, KTabsPanel.
+  - **Breaking:** no
+  - **Impacts a11y:**no
+  - **Guidance:** .
+
+[#673]: https://github.com/learningequality/kolibri-design-system/pull/673
+
 - [#629]
   - **Description:** Improves the contrast for highlighted text, noted in KTextbox
   - **Products impact:** None

diff --git a/lib/tabs/KTabsList.vue b/lib/tabs/KTabsList.vue
@@ -310,6 +310,9 @@
     border-top-left-radius: $radius;
     border-top-right-radius: $radius;
     transition: background-color $core-time ease;
+    // Setting vertical align here to prevent an extra space below the tabs
+    // https://stackoverflow.com/questions/23529369/why-does-x-overflowhidden-cause-extra-space-below
+    vertical-align: middle;
 
     @media print {
       min-width: 0;