Fix glitch for Swatch

components/product/Swatch/Swatch.module.css

@@ -1,37 +1,46 @@
-.root {
+.swatch {
+  box-sizing: border-box;
   composes: root from 'components/ui/Button/Button.module.css';
   @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
   items-center justify-center cursor-pointer transition duration-150 ease-in-out
   p-0 shadow-none border-gray-200 border box-border;
-
-  & > span {
-    @apply absolute;
+  margin-right: calc(0.75rem - 1px);
+  overflow: hidden;
 }
 
-  &:hover {
+.swatch::before,
+.swatch::after {
+  box-sizing: border-box;
+}
+
+.swatch:hover {
   @apply transform scale-110 bg-hover;
 }
+
+.swatch > span {
+  @apply absolute;
 }
 
 .color {
   @apply text-black transition duration-150 ease-in-out;
+}
 
-  &:hover {
+.color :hover {
   @apply text-black;
 }
 
-  &.dark,
-  &.dark:hover {
+.color.dark,
+.color.dark:hover {
   color: white !important;
 }
-}
 
-.active {
-  &.size {
+.active.size {
   @apply border-accents-9 border-2;
-  }
+  padding-right: 1px;
+  padding-left: 1px;
 }
 
-.wrapper {
+.textLabel {
   @apply w-auto px-4;
+  min-width: 3rem;
 }

components/product/Swatch/Swatch.tsx

@@ -4,42 +4,44 @@ import s from './Swatch.module.css'
 import { Check } from '@components/icons'
 import Button, { ButtonProps } from '@components/ui/Button'
 import { isDark } from '@lib/colors'
-interface Props {
+interface SwatchProps {
   active?: boolean
   children?: any
   className?: string
-  label?: string
   variant?: 'size' | 'color' | string
   color?: string
+  label?: string | null
 }
 
-const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({
+const Swatch: FC<Omit<ButtonProps, 'variant'> & SwatchProps> = ({
   className,
   color = '',
-  label,
+  label = null,
   variant = 'size',
   active,
   ...props
 }) => {
   variant = variant?.toLowerCase()
-  label = label?.toLowerCase()
 
-  const rootClassName = cn(
-    s.root,
+  if (label) {
+    label = label?.toLowerCase()
+  }
+
+  const swatchClassName = cn(
+    s.swatch,
     {
       [s.active]: active,
       [s.size]: variant === 'size',
       [s.color]: color,
       [s.dark]: color ? isDark(color) : false,
+      [s.textLabel]: !color && label && label.length < 4,
     },
     className
   )
 
   return (
     <Button
-      className={cn(rootClassName, {
-        [s.wrapper]: !color,
-      })}
+      className={swatchClassName}
       style={color ? { backgroundColor: color } : {}}
       aria-label="Variant Swatch"
       {...props}