🐛 Fix alignment on actions screen (#1605)

- Address issues with css alignment on assessment actions page Before: <img width="1430" alt="Screenshot 2023-12-11 at 10 47 34 AM" src="https://github.com/konveyor/tackle2-ui/assets/11218376/6ecc7666-138a-4dde-b6fb-296da49d341e"> After: <img width="1436" alt="Screenshot 2023-12-11 at 10 49 42 AM" src="https://github.com/konveyor/tackle2-ui/assets/11218376/266f1b39-d8bc-47e6-8474-88c8b14e267c"> Signed-off-by: ibolton336 <[email protected]>
konveyor · Dec 11, 2023 · 21b7afd · 21b7afd
1 parent 1f99dd0
commit 21b7afd
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 3 deletions.
diff --git a/...es/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.css b/...es/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.css
@@ -7,3 +7,7 @@
   background-color: var(--pf-v5-global--warning-color--100) !important  ;
   margin-right: 10px;
 }
+
+.actions-col {
+  vertical-align: middle !important;
+}
diff --git a/...es/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.tsx b/...es/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.tsx
@@ -208,7 +208,7 @@ const DynamicAssessmentActionsRow: FunctionComponent<
 
   return (
     <>
-      <Td>
+      <Td className="actions-col">
         <div>
           {isReadonly ? null : !isDeleting && !isFetching && !isMutating ? (
             <Button
@@ -253,7 +253,7 @@ const DynamicAssessmentActionsRow: FunctionComponent<
         </div>
       </Td>
       {assessment ? (
-        <Td isActionCell>
+        <Td isActionCell className="actions-col">
           <Button
             type="button"
             variant="plain"

diff --git a/...rc/app/pages/assessment/components/assessment-actions/components/questionnaires-table.css b/...rc/app/pages/assessment/components/assessment-actions/components/questionnaires-table.css
@@ -0,0 +1,6 @@
+.actions-row {
+  min-height: 5vh;
+}
+.actions-col {
+  vertical-align: middle !important;
+}
diff --git a/...rc/app/pages/assessment/components/assessment-actions/components/questionnaires-table.tsx b/...rc/app/pages/assessment/components/assessment-actions/components/questionnaires-table.tsx
@@ -1,3 +1,4 @@
+import "./questionnaires-table.css";
 import React, { useState } from "react";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 
@@ -98,7 +99,7 @@ const QuestionnairesTable: React.FC<QuestionnairesTableProps> = ({
               );
 
               return (
-                <Tr key={questionnaire.name}>
+                <Tr key={questionnaire.name} className="actions-row">
                   <TableRowContentWithControls
                     {...tableControls}
                     item={questionnaire}
@@ -107,6 +108,7 @@ const QuestionnairesTable: React.FC<QuestionnairesTableProps> = ({
                     <Td
                       width={20}
                       {...getTdProps({ columnKey: "questionnaires" })}
+                      className="actions-col"
                     >
                       {questionnaire.name}
                     </Td>