Fix text size of checkbox card on small screens

Author: cgero-eth

src/core/components/forms/checkboxCard/checkboxCard.tsx

@@ -76,7 +76,7 @@ export const CheckboxCard = forwardRef<HTMLButtonElement, ICheckboxCardProps>((p
     );
 
     const labelClasses = classNames(
-        'max-w-full cursor-pointer truncate text-neutral-800 group-data-[state=unchecked]:text-neutral-800',
+        'max-w-full cursor-pointer truncate text-neutral-800 group-data-[state=unchecked]:text-neutral-800 md:text-base',
         'group-data-disabled:cursor-default group-data-[state=unchecked]:group-data-disabled:text-neutral-300',
     );
 
@@ -93,12 +93,12 @@ export const CheckboxCard = forwardRef<HTMLButtonElement, ICheckboxCardProps>((p
         >
             <div className={classNames('flex w-full min-w-0 flex-row gap-3', { 'items-center': !description })}>
                 {avatar && <Avatar size="sm" responsiveSize={{ md: 'md' }} src={avatar} />}
-                <div className="flex min-w-0 flex-1 flex-col items-start gap-0.5 text-sm leading-tight font-normal md:gap-1 md:text-base">
+                <div className="flex min-w-0 flex-1 flex-col items-start gap-0.5 text-sm leading-tight font-normal md:gap-1">
                     <p id={randomId} className={labelClasses}>
                         {label}
                     </p>
                     {description && (
-                        <p className="max-w-full truncate text-sm text-neutral-500 group-data-disabled:text-neutral-300">
+                        <p className="max-w-full truncate text-neutral-500 group-data-disabled:text-neutral-300">
                             {description}
                         </p>
                     )}

src/core/components/forms/radioCard/radioCard.tsx

@@ -54,7 +54,7 @@ export const RadioCard = forwardRef<HTMLButtonElement, IRadioCardProps>((props,
     );
 
     const labelClasses = classNames(
-        'text-base leading-tight text-left text-neutral-500 w-full group-disabled:text-neutral-300 truncate',
+        'text-left text-neutral-500 w-full group-disabled:text-neutral-300 truncate md:text-base',
         'group-data-[state=checked]:text-neutral-800 group-data-[state=checked]:group-disabled:text-neutral-800',
     );
 
@@ -73,12 +73,12 @@ export const RadioCard = forwardRef<HTMLButtonElement, IRadioCardProps>((props,
                 <div
                     className={classNames('flex min-w-0 flex-1 gap-x-0.5 md:gap-x-4', { 'items-center': !description })}
                 >
-                    <div className="flex min-w-0 flex-1 flex-col gap-y-0.5 md:gap-y-1">
+                    <div className="flex min-w-0 flex-1 flex-col gap-y-0.5 text-sm leading-tight font-normal md:gap-y-1">
                         <p className={labelClasses} id={labelId}>
                             {label}
                         </p>
                         {description && (
-                            <p className="w-full truncate text-left text-sm leading-tight text-neutral-500 group-disabled:text-neutral-300">
+                            <p className="w-full truncate text-left text-neutral-500 group-disabled:text-neutral-300">
                                 {description}
                             </p>
                         )}