create more whitespace in small tags

Author: haschek

src/components/OverviewItem/stories/OverviewItem.stories.tsx

@@ -6,6 +6,7 @@ import {
     Badge,
     Card,
     Depiction,
+    OverflowText,
     OverviewItem,
     OverviewItemActions,
     OverviewItemDepiction,
@@ -87,12 +88,14 @@ ItemWithTags.args = {
         <OverviewItemDepiction {...DepictionExample.args} key={"depiction"} />,
         <OverviewItemDescription key={"description"}>
             <OverviewItemLine {...LineExample.args} />
-            <OverviewItemLine>
-                <TagList>
-                    <Tag small>Test</Tag>
-                    <Tag small>Tag</Tag>
-                    <Tag small>List</Tag>
-                </TagList>
+            <OverviewItemLine small>
+                <OverflowText>
+                    <TagList>
+                        <Tag small>Test</Tag>
+                        <Tag small>Tag</Tag>
+                        <Tag small>List</Tag>
+                    </TagList>
+                </OverflowText>
             </OverviewItemLine>
         </OverviewItemDescription>,
         <OverviewItemActions children={ActionsExample.args.children[0]} key={"actions"} />,

src/components/Tag/tag.scss

@@ -30,12 +30,15 @@ $tag-round-adjustment: 0 !default;
 @import "~@blueprintjs/core/src/components/tag/tag";
 
 .#{$eccgui}-tag__item {
+    --eccgui-tag-border-width: 1px;
+
     flex-grow: 0;
     flex-shrink: 0;
     min-width: calc(#{$tag-height} - 2px);
     min-height: calc(#{$tag-height} - 2px);
     max-height: calc(#{$tag-height} - 2px);
     padding: 0 $tag-padding-top;
+    line-height: calc(#{$tag-height} - 2px);
 
     &.#{$ns}-round {
         border-radius: $tag-height * 0.5;
@@ -55,11 +58,12 @@ $tag-round-adjustment: 0 !default;
     }
 
     &.#{$eccgui}-tag--small {
-        min-width: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        min-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        max-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
+        min-width: calc(#{$tag-height-small} + #{$tag-padding-small});
+        min-height: calc(#{$tag-height-small} + #{$tag-padding-small});
+        max-height: calc(#{$tag-height-small} + #{$tag-padding-small});
         padding: 0 $tag-padding-small;
-        line-height: calc(#{$tag-height-small} - 2px);
+        font-size: calc(#{$eccgui-size-typo-tag} - 1px);
+        line-height: calc(#{$tag-height-small} + #{$tag-padding-small});
 
         &.#{$ns}-round {
             border-radius: $tag-height-small * 0.5;
@@ -75,7 +79,7 @@ $tag-round-adjustment: 0 !default;
         min-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         max-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         font-size: $eccgui-size-typo-tag-large;
-        line-height: calc(#{$tag-height-large} - 2px);
+        line-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
 
         &.#{$ns}-round {
             border-radius: $tag-height-large * 0.5;
@@ -138,7 +142,7 @@ $tag-round-adjustment: 0 !default;
 
 .#{$ns}-tag {
     border-style: solid;
-    border-width: 1px;
+    border-width: var(--eccgui-tag-border-width);
 
     &:not([class*="#{$ns}-intent-"]) {
         --eccgui-tag-bg: #{$tag-default-color};