fix(console): icons in item preview should not be shrinked (#1234)

packages/console/src/pages/ApiResources/index.module.scss

@@ -14,6 +14,10 @@
   flex: 1;
 }
 
+.icon {
+  flex-shrink: 0;
+}
+
 .pagination {
   margin-top: _.unit(4);
   min-height: 32px;

packages/console/src/pages/ApiResources/index.tsx

@@ -108,28 +108,31 @@ const ApiResources = () => {
                 />
               </TableEmpty>
             )}
-            {apiResources?.map(({ id, name, indicator }) => (
-              <tr
-                key={id}
-                className={tableStyles.clickable}
-                onClick={() => {
-                  navigate(buildDetailsLink(id));
-                }}
-              >
-                <td>
-                  <ItemPreview
-                    title={name}
-                    icon={
-                      theme === AppearanceMode.LightMode ? <ApiResource /> : <ApiResourceDark />
-                    }
-                    to={buildDetailsLink(id)}
-                  />
-                </td>
-                <td>
-                  <CopyToClipboard value={indicator} variant="text" />
-                </td>
-              </tr>
-            ))}
+            {apiResources?.map(({ id, name, indicator }) => {
+              const ResourceIcon =
+                theme === AppearanceMode.LightMode ? ApiResource : ApiResourceDark;
+
+              return (
+                <tr
+                  key={id}
+                  className={tableStyles.clickable}
+                  onClick={() => {
+                    navigate(buildDetailsLink(id));
+                  }}
+                >
+                  <td>
+                    <ItemPreview
+                      title={name}
+                      icon={<ResourceIcon className={styles.icon} />}
+                      to={buildDetailsLink(id)}
+                    />
+                  </td>
+                  <td>
+                    <CopyToClipboard value={indicator} variant="text" />
+                  </td>
+                </tr>
+              );
+            })}
           </tbody>
         </table>
       </div>

packages/console/src/pages/Applications/index.module.scss

@@ -14,6 +14,10 @@
   flex: 1;
 }
 
+.icon {
+  flex-shrink: 0;
+}
+
 .pagination {
   margin-top: _.unit(4);
   min-height: 32px;

packages/console/src/pages/Applications/index.tsx

@@ -115,7 +115,7 @@ const Applications = () => {
                   <ItemPreview
                     title={name}
                     subtitle={t(`${applicationTypeI18nKey[type]}.title`)}
-                    icon={<ApplicationIcon type={type} />}
+                    icon={<ApplicationIcon className={styles.icon} type={type} />}
                     to={`/applications/${id}`}
                   />
                 </td>

packages/console/src/pages/Connectors/components/ConnectorName/index.module.scss

@@ -13,6 +13,7 @@ a.link {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
 }
 
 .logo {

packages/console/src/pages/Users/index.module.scss

@@ -38,6 +38,7 @@
   height: 28px;
   border-radius: 6px;
   object-fit: cover;
+  flex-shrink: 0;
 }
 
 .userName {