fix(#431): avoid overflow on new config button

eythaann · Jan 8, 2025 · 75a5b8d · 75a5b8d
1 parent e19d524
commit 75a5b8d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/apps/settings/modules/appsConfigurations/infra/index.module.css b/src/apps/settings/modules/appsConfigurations/infra/index.module.css
@@ -10,6 +10,10 @@
   width: 100%;
   background-color: var(--color-green-600);
   padding: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
 
   &:hover {
     background-color: var(--color-green-700) !important;
@@ -45,7 +49,6 @@
   }
 }
 
-
 .editModal {
   :global(.ant-modal-body) {
     padding-right: 10px;
@@ -66,4 +69,4 @@
   button {
     width: 80px;
   }
-}
+}
diff --git a/src/apps/settings/modules/appsConfigurations/infra/infra.tsx b/src/apps/settings/modules/appsConfigurations/infra/infra.tsx
@@ -13,6 +13,7 @@ import { RootSelectors } from '../../shared/store/app/selectors';
 import { cx, debounce } from '../../shared/utils/app';
 import { getSorterByBool, getSorterByText } from '../app/filters';
 import { AppsConfigActions } from '../app/reducer';
+import { Icon } from 'src/apps/shared/components/Icon';
 
 import { AppConfigurationExtended, WmApplicationOptions } from '../domain';
 
@@ -74,7 +75,7 @@ const getColumns = (t: TFunction): ColumnsType<AppConfigurationExtended> => {
       key: 'operation',
       fixed: 'right',
       align: 'center',
-      width: 56,
+      width: 60,
       render: (_, record, index) => <Actions record={record} index={index} />,
     },
   ];
@@ -132,7 +133,7 @@ function Actions({ record }: { record: AppConfigurationExtended; index: number }
         />
       )}
       <Button type={record.isBundled ? 'default' : 'primary'} onClick={showModal}>
-        {record.isBundled ? '👁️' : '✏️'}
+        {record.isBundled ? <Icon iconName="FaEye" /> : <Icon iconName="MdOutlineEdit" />}
       </Button>
     </div>
   );