🐛 Reallocate col spacing & add overflow style for status

Signed-off-by: Ian Bolton <[email protected]>
konveyor · Mar 8, 2024 · ae9d6c3 · ae9d6c3
1 parent 3e3d690
commit ae9d6c3
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 21 deletions.
diff --git a/client/src/app/components/IconedStatus.tsx b/client/src/app/components/IconedStatus.tsx
@@ -1,3 +1,4 @@
+import "./iconed-status.css";
 import React from "react";
 import { Flex, FlexItem, Icon, Tooltip } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
@@ -175,7 +176,9 @@ export const IconedStatus: React.FC<IIconedStatusProps> = ({
           </Icon>
         </IconWithOptionalTooltip>
       </FlexItem>
-      <FlexItem>{label || presetProps?.label}</FlexItem>
+      <FlexItem className="status-label">
+        {label || presetProps?.label}
+      </FlexItem>
       {(preset === "InheritedReviews" ||
         preset === "InheritedAssessments" ||
         preset === "InProgressInheritedAssessments" ||

diff --git a/client/src/app/components/iconed-status.css b/client/src/app/components/iconed-status.css
@@ -0,0 +1,4 @@
+.status-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/client/src/app/components/tests/__snapshots__/StatusIcon.test.tsx.snap b/client/src/app/components/tests/__snapshots__/StatusIcon.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`StatusIcon Renders without crashing 1`] = `
           </span>
         </div>
         <div
-          class=""
+          class="status-label"
         >
           terms.notStarted
         </div>
@@ -47,7 +47,7 @@ exports[`StatusIcon Renders without crashing 1`] = `
         </span>
       </div>
       <div
-        class=""
+        class="status-label"
       >
         terms.notStarted
       </div>

diff --git a/client/src/app/layout/HeaderApp/tests/__snapshots__/HeaderApp.test.tsx.snap b/client/src/app/layout/HeaderApp/tests/__snapshots__/HeaderApp.test.tsx.snap
@@ -106,14 +106,6 @@ exports[`Test snapshot 1`] = `
                   </div>
                 </div>
               </div>
-              <div
-                class="pf-v5-c-toolbar__expandable-content"
-                id="pf-random-id-0-expandable-content-0"
-              >
-                <div
-                  class="pf-v5-c-toolbar__group"
-                />
-              </div>
             </div>
             <div
               class="pf-v5-c-toolbar__content pf-m-hidden"
@@ -230,14 +222,6 @@ exports[`Test snapshot 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="pf-v5-c-toolbar__expandable-content"
-              id="pf-random-id-0-expandable-content-0"
-            >
-              <div
-                class="pf-v5-c-toolbar__group"
-              />
-            </div>
           </div>
           <div
             class="pf-v5-c-toolbar__content pf-m-hidden"

diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -880,7 +880,7 @@ export const ApplicationsTable: React.FC = () => {
                         {application.name}
                       </Td>
                       <Td
-                        width={15}
+                        width={10}
                         modifier="truncate"
                         {...getTdProps({ columnKey: "businessService" })}
                       >
@@ -918,7 +918,7 @@ export const ApplicationsTable: React.FC = () => {
                         />
                       </Td>
                       <Td
-                        width={10}
+                        width={15}
                         modifier="truncate"
                         {...getTdProps({ columnKey: "analysis" })}
                       >