feat: button responsiveness and version mismatch

Signed-off-by: TheFaheem <faheemmushtaq89@gmail.com>

Author: FaheemOnHub

src/custom/CustomCatalog/CustomCard.tsx

@@ -280,7 +280,7 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
             </DesignDetailsDiv>
 
             {isDetailed && (
-              <DesignDetailsDiv style={{ marginTop: '40px' }}>
+              <DesignDetailsDiv style={{ marginTop: '20px' }}>
                 <Grid container style={{ justifyContent: 'space-between', alignItems: 'center' }}>
                   <Grid
                     item

src/custom/CustomCatalog/Helper.ts

@@ -61,7 +61,7 @@ export const handleImage = async ({
 export const DEFAULT_DESIGN_VERSION = '0.0.0';
 
 export const getVersion = (design: Pattern) => {
-  if (design.visibility === 'published') {
+  if (design.visibility === 'public') {
     return design?.catalog_data?.published_version || DEFAULT_DESIGN_VERSION;
   }
   try {

src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx

@@ -49,25 +49,23 @@ const StyledButton = styled(Button)(() => ({
   padding: '0px'
 }));
 
-const StyledDiv = styled('div')(
-  ({ theme, enabled, type }: { theme: Theme; enabled: boolean; type: VIEW_VISIBILITY }) => ({
-    paddingLeft: '0.3rem',
-    height: '1.5rem',
-    paddingRight: enabled ? '0' : '0.3rem',
-    borderRadius: '0.25rem',
-    border: `1px solid ${NOT_FOUND}`,
-    background:
-      theme?.palette.mode === 'light' ? ALICE_BLUE : theme?.palette.background.constant?.table,
-    textTransform: 'uppercase',
-    color: theme?.palette.text.default,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: type !== 'published' ? '3.8rem' : 'auto',
-    fontSize: '0.75rem',
-    fontFamily: theme?.typography.fontFamily
-  })
-);
+const StyledDiv = styled('div')(({ theme, enabled }: { theme: Theme; enabled: boolean }) => ({
+  paddingLeft: '0.3rem',
+  height: '1.5rem',
+  width: 'auto',
+  paddingRight: enabled ? '0' : '0.3rem',
+  borderRadius: '0.25rem',
+  border: `1px solid ${NOT_FOUND}`,
+  background:
+    theme?.palette.mode === 'light' ? ALICE_BLUE : theme?.palette.background.constant?.table,
+  textTransform: 'uppercase',
+  color: theme?.palette.text.default,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontSize: '0.75rem',
+  fontFamily: theme?.typography.fontFamily
+}));
 
 const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
   textTransform: 'capitalize',