ui: fit longer names in tables and dropdowns (#1566)

openkfw · Dec 18, 2023 · f34dff9 · f34dff9
1 parent a43b1c3
commit f34dff9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 16 deletions.
diff --git a/frontend/src/pages/Common/Permissions/PermissionSelection.js b/frontend/src/pages/Common/Permissions/PermissionSelection.js
@@ -35,7 +35,7 @@ const styles = {
     justifyContent: "flex-start"
   },
   nameContainer: {
-    maxWidth: "200px"
+    maxWidth: "none"
   }
 };
 
@@ -51,7 +51,7 @@ const renderSelection = (user, permissionedUser, intent, grant, revoke, myself,
       >
         <Checkbox checked={checked} disabled={(u.id === myself && checked) || disabled} />
         <ListItemText style={styles.nameContainer}>
-          <OverflowTooltip text={u.displayName} />
+          <OverflowTooltip text={u.displayName} maxWidth={styles.nameContainer.maxWidth} />
         </ListItemText>
       </MenuItem>
     );

diff --git a/frontend/src/pages/Common/SingleSelection.js b/frontend/src/pages/Common/SingleSelection.js
@@ -49,9 +49,6 @@ const styles = {
     overflow: "hidden",
     textOverflow: "ellipsis"
   },
-  nameContainer: {
-    maxWidth: "200px"
-  },
   listSubHeader: { top: "auto" },
   disabled: {},
   closeButtonContainer: { float: "right", marginTop: -8 },
@@ -86,8 +83,8 @@ class SingleSelection extends Component {
           onClick={() => (id !== selectId ? this.props.onSelect(id, displayName) : undefined)}
         >
           <Radio style={styles.radioButton} disabled={disabled} checked={isChecked} />
-          <ListItemText data-test={`single-select-name-${id}`} style={styles.nameContainer}>
-            <OverflowTooltip text={displayName} />
+          <ListItemText data-test={`single-select-name-${id}`}>
+            <OverflowTooltip text={displayName} maxWidth="none" />
           </ListItemText>
         </MenuItem>
       );

diff --git a/frontend/src/pages/Confirmation/ActionsTable.js b/frontend/src/pages/Confirmation/ActionsTable.js
@@ -26,7 +26,7 @@ import OverflowTooltip from "../Common/OverflowTooltip";
 const styles = {
   card: {
     marginTop: "24px",
-    width: "800px"
+    width: "1000px"
   },
   container: {
     minHeight: "56px",
@@ -62,7 +62,7 @@ const styles = {
     flex: 1,
     overflow: "hidden",
     textOverflow: "ellipsis",
-    maxWidth: "140px"
+    maxWidth: "none"
   },
   tableRow: {
     display: "flex",
@@ -77,7 +77,7 @@ const styles = {
     flex: 1,
     overflow: "hidden",
     textOverflow: "ellipsis",
-    maxWidth: "140px"
+    maxWidth: "none"
   }
 };
 
@@ -103,12 +103,12 @@ const generateHeader = (status, actionTableColumns) => {
         </TableCell>
       ) : null}
       {actionTableColumns.userOrGroupColumn ? (
-        <TableCell key={"header-identity"} style={{ ...styles.columnHeaderCell, flex: 3 }}>
-          <OverflowTooltip text={strings.confirmation.user_group} />
+        <TableCell key={"header-identity"} style={{ ...styles.columnHeaderCell, flex: 5 }}>
+          <OverflowTooltip text={strings.confirmation.user_group} maxWidth="none" />
         </TableCell>
       ) : null}
       {status ? (
-        <TableCell key={"header-status"} style={{ ...styles.columnHeaderCell, textAlign: "right", flex: 3 }}>
+        <TableCell key={"header-status"} style={{ ...styles.columnHeaderCell, textAlign: "right", flex: 1 }}>
           <OverflowTooltip text={strings.common.status} />
         </TableCell>
       ) : null}
@@ -145,14 +145,14 @@ const generateActions = (actions, executedActions, failedAction, users, groups,
           </TableCell>
         ) : null}
         {actionTableColumns.userOrGroupColumn ? (
-          <TableCell key={index + "-userName"} style={{ ...styles.tableCell, flex: 3 }}>
-            <OverflowTooltip text={userOrGroup ? userOrGroup.displayName : ""} />
+          <TableCell key={index + "-userName"} style={{ ...styles.tableCell, flex: 5 }}>
+            <OverflowTooltip text={userOrGroup ? userOrGroup.displayName : ""} maxWidth="none" />
           </TableCell>
         ) : null}
         {status ? (
           <TableCell
             key={index + "-status"}
-            style={{ ...styles.tableCell, textAlign: "right", position: "relative", flex: 3 }}
+            style={{ ...styles.tableCell, textAlign: "right", position: "relative", flex: 1 }}
           >
             {getStatusIcon(executedActions, failedAction, action)}
           </TableCell>