fix: fix #tabs focus spacing issue

dnbexperience · Mar 2, 2021 · aa558eb · aa558eb
1 parent 958a939
commit aa558eb
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 0 deletions.
diff --git a/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
@@ -684,6 +684,8 @@ exports[`Tabs scss have to match snapshot 1`] = `
   .dnb-tabs__tabs__tablist {
     display: flex;
     flex: 0 1 auto;
+    padding: 0 0.5rem;
+    margin: 0 -0.5rem;
     overflow-x: auto;
     overscroll-behavior: contain;
     scrollbar-width: thin;

diff --git a/...hot-test-js-tabs-screenshot-have-to-match-last-scrollable-tabs-1-0e3b8.snap.png b/...hot-test-js-tabs-screenshot-have-to-match-last-scrollable-tabs-1-0e3b8.snap.png
diff --git a/...st-js-tabs-screenshot-have-to-match-the-tablist-on-focus-state-1-ae6b2.snap.png b/...st-js-tabs-screenshot-have-to-match-the-tablist-on-focus-state-1-ae6b2.snap.png
diff --git a/packages/dnb-eufemia/src/components/tabs/style/_tabs.scss b/packages/dnb-eufemia/src/components/tabs/style/_tabs.scss
@@ -20,6 +20,10 @@
       display: flex;
       flex: 0 1 auto;
 
+      // Fix the active/focus border spacing
+      padding: 0 0.5rem;
+      margin: 0 -0.5rem;
+
       &:focus {
         @include fakeFocus();
       }