fix(Tag): border-radius on responsive

kiwicom · Apr 24, 2023 · dddf4a4 · dddf4a4
1 parent dbd7e6c
commit dddf4a4
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/packages/orbit-components/src/Tag/index.tsx b/packages/orbit-components/src/Tag/index.tsx
@@ -10,6 +10,7 @@ import { SIZES, STATES, TYPES } from "./consts";
 import KEY_CODE_MAP from "../common/keyMaps";
 import resolveColor from "./helpers/resolveColor";
 import resolveCircleColor from "./helpers/resolveCircleColor";
+import mq from "../utils/mediaQuery";
 import type { Props, Type } from "./types";
 
 const getFontSize = ({ theme, size }: { theme: Theme; size: Props["size"] }): string | null => {
@@ -115,12 +116,16 @@ export const StyledTag = styled.div<{
     align-items: center;
     font-size: ${getFontSize};
     font-weight: ${theme.orbit.fontWeightMedium};
-    border-radius: ${theme.orbit.borderRadiusNormal};
+    border-radius: ${theme.orbit.borderRadiusLarge};
     padding: ${theme.orbit.spaceXSmall};
     transition: color ${theme.orbit.durationFast} ease-in-out,
       box-shadow ${theme.orbit.durationFast} ease-in-out,
       background ${theme.orbit.durationFast} ease-in-out;
 
+    ${mq.tablet(css`
+      border-radius: ${theme.orbit.borderRadiusNormal};
+    `)}
+
     ${actionable &&
     css`
       cursor: pointer;