fix: bugs with tab component (#589)

wesleyboar · web-flow · commit d9b8f2872650 · 2026-02-23T14:01:37.000-06:00
## Overview Fix misc bugs with tabs component. ## Changes - Remove bottom border from Bootstrap Nav Tabs. - Remove bottom margin from Tabs component labels. ## Testing & UI https://github.com/user-attachments/assets/8f160919-522d-4d27-99f1-d3a2be1fede1 https://github.com/user-attachments/assets/d38ecdda-e6a8-4901-8a66-cb87e9055db0
diff --git a/src/lib/_imports/components/bootstrap.nav-tabs.css b/src/lib/_imports/components/bootstrap.nav-tabs.css
@@ -7,6 +7,7 @@
 
 .nav-tabs {
   @extend .x-tabs;
+  border-bottom: none;
 }
 ul.nav-tabs {
   padding-left: unset; /* overwrite core-styles.cms.css */
diff --git a/src/lib/_imports/tools/x-tabs.skin.css b/src/lib/_imports/tools/x-tabs.skin.css
@@ -18,6 +18,9 @@
   font-size: var(--global-font-size--medium);
   font-weight: var(--medium);
 }
+.x-tabs__tab:is(label) {
+  margin-bottom: 0; /* to undo `elements/form.css` */
+}
 .x-tabs__tab:is(a) {
   text-decoration: none;
 }

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@`
`7`	`7`
`8`	`8`	`.nav-tabs {`
`9`	`9`	`@extend .x-tabs;`
	`10`	`+ border-bottom: none;`
`10`	`11`	`}`
`11`	`12`	`ul.nav-tabs {`
`12`	`13`	`padding-left: unset; /* overwrite core-styles.cms.css */`
Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,9 @@`
`18`	`18`	`font-size: var(--global-font-size--medium);`
`19`	`19`	`font-weight: var(--medium);`
`20`	`20`	`}`
	`21`	`+.x-tabs__tab:is(label) {`
	`22`	+ margin-bottom: 0; /* to undo `elements/form.css` */
	`23`	`+}`
`21`	`24`	`.x-tabs__tab:is(a) {`
`22`	`25`	`text-decoration: none;`
`23`	`26`	`}`