Improve layout and text overflow handling in Cipp cards

Added padding and minWidth to CippBannerListCard and enhanced CippInfoBar with better flexbox usage and text overflow handling. Typography elements now use ellipsis and nowrap to prevent overflow, improving UI consistency and readability.

Author: JohnDuprey

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>