From a747a891f8e1f5e5c7bda7964c0a41ca4f62ea6a Mon Sep 17 00:00:00 2001
From: Thuan Vo <thvo@redhat.com>
Date: Wed, 5 Apr 2023 00:47:19 -0400
Subject: [PATCH] fix(css): restyle cards

---
 src/app/Dashboard/AddCard.tsx                   | 17 +++++++++++------
 src/app/Dashboard/Dashboard.tsx                 |  2 +-
 src/app/Dashboard/JvmDetails/JvmDetailsCard.tsx |  2 +-
 src/app/Topology/styles/base.css                |  1 -
 src/app/app.css                                 |  4 ++++
 .../__snapshots__/Dashboard.test.tsx.snap       |  2 +-
 6 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/app/Dashboard/AddCard.tsx b/src/app/Dashboard/AddCard.tsx
index 1bb5a41798..01a0b8ca99 100644
--- a/src/app/Dashboard/AddCard.tsx
+++ b/src/app/Dashboard/AddCard.tsx
@@ -75,6 +75,8 @@ import {
   Select,
   SelectOption,
   SelectOptionObject,
+  Stack,
+  StackItem,
   Switch,
   Text,
   TextArea,
@@ -174,7 +176,7 @@ export const AddCard: React.FC<AddCardProps> = (_) => {
 
   return (
     <>
-      <Card isRounded isCompact isFullHeight>
+      <Card isRounded isCompact>
         <CardBody>
           <Bullseye>
             <EmptyState variant={EmptyStateVariant.large}>
@@ -193,11 +195,12 @@ export const AddCard: React.FC<AddCardProps> = (_) => {
       <Modal
         aria-label="Dashboard Card Catalog Modal"
         isOpen={showWizard}
-        variant={ModalVariant.large}
+        width={'80%'}
         hasNoBodyWrapper
         showClose={false}
       >
         <Wizard
+          id={'card-catalog-wizard'}
           onClose={handleStop}
           onSave={handleAdd}
           nav={customNav}
@@ -224,12 +227,14 @@ export const AddCard: React.FC<AddCardProps> = (_) => {
                   : 'Next',
             }}
           >
-            <Form>
-              <FormGroup label="Select a card type" isRequired data-quickstart-id="card-type-selector">
+            <Stack>
+              <StackItem>
                 <Text>{t('Dashboard.ADD_CARD_HELPER_TEXT')}</Text>
+              </StackItem>
+              <StackItem isFilled>
                 <CardGallery selection={selection} onSelect={handleSelect} />
-              </FormGroup>
-            </Form>
+              </StackItem>
+            </Stack>
           </WizardStep>
           <WizardStep
             id="card-props-config"
diff --git a/src/app/Dashboard/Dashboard.tsx b/src/app/Dashboard/Dashboard.tsx
index 2e5833ff89..c970ad5853 100644
--- a/src/app/Dashboard/Dashboard.tsx
+++ b/src/app/Dashboard/Dashboard.tsx
@@ -365,7 +365,7 @@ export const Dashboard: React.FC<DashboardProps> = (_) => {
     <TargetView pageTitle={t('Dashboard.PAGE_TITLE')} attachments={<DashboardLayoutConfig />}>
       <ChartContext.Provider value={chartContext}>
         <Grid id={'dashboard-grid'} hasGutter>
-          <GridItem key={-1} span={4} rowSpan={1} order={{ default: '-99999' }}>
+          <GridItem key={-1} span={4} order={{ default: '-99999' }}>
             <AddCard />
           </GridItem>
           {currLayout.cards
diff --git a/src/app/Dashboard/JvmDetails/JvmDetailsCard.tsx b/src/app/Dashboard/JvmDetails/JvmDetailsCard.tsx
index f08d0fcdc9..9dda22c176 100644
--- a/src/app/Dashboard/JvmDetails/JvmDetailsCard.tsx
+++ b/src/app/Dashboard/JvmDetails/JvmDetailsCard.tsx
@@ -94,7 +94,7 @@ export const JvmDetailsCard: React.FC<JvmDetailsCardProps> = (props) => {
     >
       <CardBody
         // FIXME: Remove after implementing height resizing
-        style={{ height: '30em' }}
+        style={{ height: '36em' }}
       >
         <EntityDetails entity={wrappedTarget} actionFilter={actionFilter} />
       </CardBody>
diff --git a/src/app/Topology/styles/base.css b/src/app/Topology/styles/base.css
index 644773854b..69b1a9c087 100644
--- a/src/app/Topology/styles/base.css
+++ b/src/app/Topology/styles/base.css
@@ -129,7 +129,6 @@ Below CSS rules only apply to Topology components
 
 .entity-overview .pf-c-tab-content {
   flex: 1 1 0;
-  min-height: 0;
   overflow: auto;
 }
 
diff --git a/src/app/app.css b/src/app/app.css
index cce6b08dda..bbc56111a3 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -545,3 +545,7 @@ svg.topology__node-decorator-icon.success {
 svg.topology__node-decorator-icon.progress {
   fill: var(--pf-global--info-color--100);
 }
+
+#card-catalog-wizard .pf-c-wizard__main-body {
+  height: 100%
+}
diff --git a/src/test/Dashboard/__snapshots__/Dashboard.test.tsx.snap b/src/test/Dashboard/__snapshots__/Dashboard.test.tsx.snap
index cb7d4ca75a..c4433e3f54 100644
--- a/src/test/Dashboard/__snapshots__/Dashboard.test.tsx.snap
+++ b/src/test/Dashboard/__snapshots__/Dashboard.test.tsx.snap
@@ -46,7 +46,7 @@ Array [
             id="dashboard-grid"
           >
             <div
-              className="pf-l-grid__item pf-m-4-col pf-m-1-row"
+              className="pf-l-grid__item pf-m-4-col"
               style={
                 Object {
                   "--pf-l-grid--item--Order": "-99999",