Merge pull request #650 from KelvinTegelaar/dev

[pull] dev from KelvinTegelaar:dev

Author: pull[bot]

src/components/CippCards/CippBannerListCard.jsx

@@ -116,7 +116,7 @@ export const CippBannerListCard = (props) => {
                       </Box>
 
                       {/* Main Text and Subtext */}
-                      <Box sx={{ flex: 1, minWidth: 0 }}>
+                      <Box sx={{ flex: 1, minWidth: 0, pr: 2 }}>
                         <Typography
                           color="text.primary"
                           variant="h6"

src/components/CippCards/CippInfoBar.jsx

@@ -37,9 +37,13 @@ export const CippInfoBar = ({ data, isFetching }) => {
                 },
               }}
             >
-              <Stack alignItems="center" direction="row" spacing={2} sx={{ p: 2 }}>
+              <Stack alignItems="center" direction="row" spacing={2} sx={{ p: 2, minWidth: 0 }}>
                 {item?.icon && (
-                  <SvgIcon color={item.color ? item.color : "primary"} fontSize="small">
+                  <SvgIcon
+                    color={item.color ? item.color : "primary"}
+                    fontSize="small"
+                    sx={{ flexShrink: 0 }}
+                  >
                     {item.icon}
                   </SvgIcon>
                 )}
@@ -48,14 +52,27 @@ export const CippInfoBar = ({ data, isFetching }) => {
                     <Box
                       sx={() => {
                         if (!item?.icon) {
-                          return { pl: 2 };
+                          return { pl: 2, minWidth: 0, flex: 1 };
                         }
+                        return { minWidth: 0, flex: 1 };
                       }}
                     >
-                      <Typography color="text.secondary" variant="overline">
+                      <Typography
+                        color="text.secondary"
+                        variant="overline"
+                        sx={{
+                          display: "block",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                        }}
+                      >
                         {item.name}
                       </Typography>
-                      <Typography variant="h6">
+                      <Typography
+                        variant="h6"
+                        sx={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+                      >
                         {isFetching ? <Skeleton width={"100%"} /> : item.data}
                       </Typography>
                     </Box>
@@ -64,14 +81,27 @@ export const CippInfoBar = ({ data, isFetching }) => {
                   <Box
                     sx={() => {
                       if (!item?.icon) {
-                        return { pl: 2 };
+                        return { pl: 2, minWidth: 0, flex: 1 };
                       }
+                      return { minWidth: 0, flex: 1 };
                     }}
                   >
-                    <Typography color="text.secondary" variant="overline">
+                    <Typography
+                      color="text.secondary"
+                      variant="overline"
+                      sx={{
+                        display: "block",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                      }}
+                    >
                       {item.name}
                     </Typography>
-                    <Typography variant="h6">
+                    <Typography
+                      variant="h6"
+                      sx={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+                    >
                       {isFetching ? <Skeleton width={"100%"} /> : item.data}
                     </Typography>
                   </Box>