fix: Fixed layout issue in the Badge component

agrawal-rohit · Dec 18, 2023 · 36d69f6 · 36d69f6 · vercel · Dec 18, 2023
1 parent 3072c26
commit 36d69f6
Showing 1 changed file with 17 additions and 15 deletions.
diff --git a/src/components/molecules/badge/withBadge.tsx b/src/components/molecules/badge/withBadge.tsx
@@ -99,22 +99,24 @@ const withBadge =
     // Render the wrapped component with the badge
     return (
       <Box>
-        <WrappedComponent
-          {...(props as P)}
-          onLayout={onBaseComponentLayoutChange}
-        />
+        <Box alignSelf="flex-start">
+          <WrappedComponent
+            {...(props as P)}
+            onLayout={onBaseComponentLayoutChange}
+          />
 
-        {!hidden && (
-          <Badge
-            {...badgeProps}
-            onLayout={onBadgeLayoutChange}
-            position="absolute"
-            zIndex="overlay"
-            style={computedPositionWithWebMarginsForBadge}
-          >
-            {badgeValue}
-          </Badge>
-        )}
+          {!hidden && (
+            <Badge
+              {...badgeProps}
+              onLayout={onBadgeLayoutChange}
+              position="absolute"
+              zIndex="overlay"
+              style={computedPositionWithWebMarginsForBadge}
+            >
+              {badgeValue}
+            </Badge>
+          )}
+        </Box>
       </Box>
     ) as React.ReactElement<P>;
   };