From 9d2bac75a679511e9a25b299ad96c9e5b49c52e0 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Tue, 12 Nov 2024 15:18:32 +0530
Subject: [PATCH] min width based on sizes

---
 .../design-system/ads/src/Button/Button.styles.tsx         | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/client/packages/design-system/ads/src/Button/Button.styles.tsx b/app/client/packages/design-system/ads/src/Button/Button.styles.tsx
index 90051b39d44..1fd71a2ca84 100644
--- a/app/client/packages/design-system/ads/src/Button/Button.styles.tsx
+++ b/app/client/packages/design-system/ads/src/Button/Button.styles.tsx
@@ -29,6 +29,7 @@ const getSizes = (size: ButtonSizes, isIconButton?: boolean) => {
         ? "var(--ads-v2-spaces-2)"
         : "var(--ads-v2-spaces-2) var(--ads-v2-spaces-3)"};
       --button-gap: var(--ads-v2-spaces-2);
+      --button-min-width: 60px;
     `,
     md: css`
       --button-font-weight: 600;
@@ -37,6 +38,7 @@ const getSizes = (size: ButtonSizes, isIconButton?: boolean) => {
         ? "var(--ads-v2-spaces-3)"
         : "var(--ads-v2-spaces-3) var(--ads-v2-spaces-4)"};
       --button-gap: var(--ads-v2-spaces-3);
+      --button-min-width: 80px;
     `,
   };
 
@@ -175,6 +177,8 @@ export const ButtonContent = styled.div<{
   box-sizing: border-box;
   padding: var(--button-padding);
   border-radius: inherit;
+  min-width: ${({ isIconButton }) =>
+    isIconButton ? "unset" : "var(--button-min-width)"};
 
   & > .${ButtonContentChildrenClassName} {
     display: flex;
@@ -229,7 +233,8 @@ export const StyledButton = styled.button<{
     padding: 0;
     box-sizing: border-box;
     overflow: hidden;
-    min-width: ${({ isIconButton }) => (isIconButton ? "unset" : "60px")};
+    min-width: ${({ isIconButton }) =>
+      isIconButton ? "unset" : "fit-content"};
 
     /* button disabled style */
     &[data-disabled="true"] {