[IOPAE-1179] Service name and status chip fix

apps/backoffice/src/components/services/service-status.tsx

@@ -46,6 +46,11 @@ export const ServiceStatus = ({ status }: ServiceStatusProps) => {
         size="small"
         color={color as any}
         disabled={disabled}
+        sx={{
+          "& .MuiChip-label": {
+            whiteSpace: "nowrap"
+          }
+        }}
       />
     </LoaderSkeleton>
   );

apps/backoffice/src/components/table-view/table-view.tsx

@@ -127,6 +127,7 @@ export function TableView<T>({ ...props }: TableViewProps<T>) {
                       <TableCell
                         key={`tb-row-${tbRowIndex}-col-${tbColIndex}`}
                         align={col.alignment}
+                        sx={{ maxWidth: "300px" }}
                       >
                         <LoaderSkeleton
                           loading={props.loading ?? false}

apps/backoffice/src/pages/services/index.tsx

@@ -99,15 +99,31 @@ export default function Services() {
               <CallSplit fontSize="small" color="primary" />
             ) : null
           }
-          sx={{ fontWeight: 700, textAlign: "left" }}
+          sx={{
+            textAlign: "left",
+            width: "100%"
+          }}
           disabled={isServiceStatusValueDeleted(service.status.value)}
           onClick={() =>
             hasTwoDifferentVersions(service)
               ? openServiceVersionSwitcher(service)
               : router.push(`/services/${service.id}`)
           }
         >
-          {service.name}
+          <Typography
+            fontWeight={700}
+            color="primary.main"
+            noWrap
+            style={{
+              textOverflow: "ellipsis",
+              overflow: "hidden",
+              whiteSpace: "nowrap",
+              display: "block",
+              width: "100%"
+            }}
+          >
+            {service.name}
+          </Typography>
         </Button>
       )
     },