refactor: update AppStatusModal components for improved layout and styling, including grid adjustments and word break handling

Author: AbhishekA1509

src/Shared/Components/AppStatusModal/AppStatusBody.tsx

@@ -11,18 +11,15 @@ import { AppStatusBodyProps } from './types'
 import { getAppStatusMessageFromAppDetails } from './utils'
 
 const InfoCardItem = ({ heading, value, isLast = false }: { heading: string; value: ReactNode; isLast?: boolean }) => (
-    <div className={`py-12 px-16 flexbox dc__gap-16 ${!isLast ? 'border__secondary--bottom' : ''}`}>
+    <div
+        className={`py-12 px-16 dc__grid dc__column-gap-16 info-card-item ${!isLast ? 'border__secondary--bottom' : ''}`}
+    >
         <Tooltip content={heading}>
-            <h3 className="cn-9 fs-13 fw-4 lh-1-5 dc__truncate m-0 dc__no-shrink w-140">{heading}</h3>
+            <h3 className="cn-9 fs-13 fw-4 lh-1-5 dc__truncate m-0 dc__no-shrink">{heading}</h3>
         </Tooltip>
 
         {typeof value === 'string' ? (
-            <ShowMoreText
-                key={`show-more-text-${value}`}
-                textClass="cn-9 fs-13 fw-4 lh-1-5"
-                containerClass="pr-20"
-                text={value}
-            />
+            <ShowMoreText key={`show-more-text-${value}`} textClass="cn-9 fs-13 fw-4 lh-1-5" text={value} />
         ) : (
             value
         )}

src/Shared/Components/AppStatusModal/AppStatusContent.tsx

@@ -83,13 +83,13 @@ const AppStatusContent = ({
                         key={getResourceKey(nodeDetails)}
                     >
                         <Tooltip content={nodeDetails.kind}>
-                            <span>{nodeDetails.kind}</span>
+                            <span className="dc__word-break">{nodeDetails.kind}</span>
                         </Tooltip>
 
-                        <span>{nodeDetails.name}</span>
+                        <span className="dc__word-break">{nodeDetails.name}</span>
 
                         <div
-                            className={`app-summary__status-name f-${getNodeStatus(nodeDetails)?.toLowerCase() || ''}`}
+                            className={`app-summary__status-name f-${getNodeStatus(nodeDetails)?.toLowerCase() || ''} dc__first-letter-capitalize--imp`}
                         >
                             {getNodeStatus(nodeDetails)}
                         </div>
@@ -110,7 +110,7 @@ const AppStatusContent = ({
                                     )}
                                 </div>
                             )}
-                            <div>{getNodeMessage(nodeDetails)}</div>
+                            <div className="dc__word-break">{getNodeMessage(nodeDetails)}</div>
                         </div>
                     </div>
                 ))}

src/Shared/Components/AppStatusModal/AppStatusModal.scss

@@ -4,4 +4,8 @@
             grid-template-columns: 150px 200px 100px auto;
         }
     }
+
+    .info-card-item {
+        grid-template-columns: 140px 1fr;
+    }
 }

src/Shared/Store/IndexStore.tsx

@@ -245,6 +245,7 @@ export const IndexStore = {
 
         const podMetadata = data.resourceTree?.podMetadata || []
 
+        // Not brave enough to remove this method but seems like its not doing anything
         getiNodesByRootNodeWithChildNodes(
             _nodes,
             _nodes.filter((_n) => (_n.parentRefs ?? []).length == 0).map((_n) => _n as iNode),