fix/1253-dashboard-drep-explorer-drep-details-drep-name-appears-beyond-label

govtool/frontend/src/components/molecules/DataMissingHeader.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@mui/material";
+import { Box, SxProps } from "@mui/material";
 
 import { Typography } from "@atoms";
 import { Share } from "@molecules";
@@ -9,12 +9,14 @@ type DataMissingHeaderProps = {
   isDataMissing: MetadataValidationStatus | null;
   shareLink?: string;
   title?: string;
+  titleStyle?: SxProps;
 };
 
 export const DataMissingHeader = ({
   title,
   isDataMissing,
   shareLink,
+  titleStyle,
 }: DataMissingHeaderProps) => (
   <Box
     sx={{
@@ -39,6 +41,7 @@ export const DataMissingHeader = ({
           whiteSpace: "nowrap",
           fontWeight: 600,
           ...(isDataMissing && { color: "errorRed" }),
+          ...titleStyle,
         }}
         variant="title2"
       >

govtool/frontend/src/components/molecules/DelegationAction.tsx

@@ -3,6 +3,7 @@ import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 
 import { Typography } from "@atoms";
 import { gray } from "@consts";
+import { ellipsizeText } from "@utils";
 
 import { Card } from "./Card";
 import { DirectVoterActionProps } from "./types";
@@ -31,7 +32,7 @@ export const DelegationAction = ({
   >
     <Box sx={{ width: "90%" }}>
       <Typography fontWeight={600} variant="body2">
-        {drepName}
+        {ellipsizeText(drepName, 30)}
       </Typography>
       <Typography
         sx={{

govtool/frontend/src/components/organisms/DRepCard.tsx

@@ -9,6 +9,7 @@ import { DRepData, DRepStatus } from "@models";
 import { Card } from "@molecules";
 import {
   correctDRepDirectoryFormat,
+  ellipsizeText,
   getMetadataDataMissingStatusTranslation,
 } from "@utils";
 
@@ -103,7 +104,7 @@ export const DRepCard = ({
               >
                 {metadataStatus
                   ? getMetadataDataMissingStatusTranslation(metadataStatus)
-                  : dRepName}
+                  : ellipsizeText(dRepName ?? "", 25)}
               </Typography>
               <ButtonBase
                 data-testid={`${view}-copy-id-button`}

govtool/frontend/src/pages/DRepDetails.tsx

@@ -222,6 +222,7 @@ export const DRepDetails = ({ isConnected }: DRepDetailsProps) => {
             title={dRepName ?? undefined}
             isDataMissing={metadataStatus}
             shareLink={!isMe ? window.location.href : undefined}
+            titleStyle={{ wordBreak: "break-word", whiteSpace: "wrap" }}
           />
           {metadataStatus && (
             <DataMissingInfoBox