From 21b7afdcc07fd678bf115877d0fa403a476fda04 Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Mon, 11 Dec 2023 11:51:04 -0500
Subject: [PATCH] :bug: Fix alignment on actions screen (#1605)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 <ibolton@redhat.com>
---
 .../components/dynamic-assessment-actions-row.css           | 4 ++++
 .../components/dynamic-assessment-actions-row.tsx           | 4 ++--
 .../assessment-actions/components/questionnaires-table.css  | 6 ++++++
 .../assessment-actions/components/questionnaires-table.tsx  | 4 +++-
 4 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 client/src/app/pages/assessment/components/assessment-actions/components/questionnaires-table.css

diff --git a/client/src/app/pages/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.css b/client/src/app/pages/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.css
index 4689a73371..8745943e9e 100644
--- a/client/src/app/pages/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.css
+++ b/client/src/app/pages/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/client/src/app/pages/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.tsx b/client/src/app/pages/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.tsx
index f6f85cce6e..ac6f1f474f 100644
--- a/client/src/app/pages/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.tsx
+++ b/client/src/app/pages/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/client/src/app/pages/assessment/components/assessment-actions/components/questionnaires-table.css b/client/src/app/pages/assessment/components/assessment-actions/components/questionnaires-table.css
new file mode 100644
index 0000000000..ca17435e4c
--- /dev/null
+++ b/client/src/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/client/src/app/pages/assessment/components/assessment-actions/components/questionnaires-table.tsx b/client/src/app/pages/assessment/components/assessment-actions/components/questionnaires-table.tsx
index 587c7ad0af..ef3687b839 100644
--- a/client/src/app/pages/assessment/components/assessment-actions/components/questionnaires-table.tsx
+++ b/client/src/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>