[POR-1546] Fix Overflow (#3528)

dashboard/src/components/porter/Text.tsx

@@ -7,6 +7,7 @@ type Props = {
   weight?: number;
   children: any;
   additionalStyles?: string;
+  truncate?: boolean;
 };
 
 const Text: React.FC<Props> = ({
@@ -14,7 +15,8 @@ const Text: React.FC<Props> = ({
   weight,
   color,
   children,
-  additionalStyles
+  additionalStyles,
+  truncate // added this
 }) => {
   const getColor = () => {
     switch (color) {
@@ -31,6 +33,7 @@ const Text: React.FC<Props> = ({
       color={getColor()}
       weight={weight}
       additionalStyles={additionalStyles}
+      truncate={truncate}
     >
       {children}
     </StyledText>
@@ -44,6 +47,7 @@ const StyledText = styled.div<{
   color?: string;
   weight?: number;
   additionalStyles?: string;
+  truncate?: boolean;
 }>`
   line-height: 1.5;
   font-weight: ${props => props.weight || 400};
@@ -53,4 +57,14 @@ const StyledText = styled.div<{
   align-items: center;
   user-select: text;
   ${props => props.additionalStyles ? props.additionalStyles : ""}
-`;
+
+  ${props =>
+    props.truncate
+      ? `
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 90%; 
+      `
+      : ""}
+`;

dashboard/src/main/home/app-dashboard/AppDashboard.tsx

@@ -153,7 +153,7 @@ const AppDashboard: React.FC<Props> = ({ }) => {
               height="18px"
               src="https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/97_Docker_logo_logos-512.png"
             />
-            <Text size={13} color="#ffffff44">{app.image_repo_uri}</Text>
+            <Text truncate={true} size={13} color="#ffffff44">{app.image_repo_uri}</Text>
           </Container>
         )}
       </>
@@ -420,7 +420,6 @@ const Block = styled.div`
   :hover {
     border: 1px solid #7a7b80;
   }
-
   animation: fadeIn 0.3s 0s;
   @keyframes fadeIn {
     from {