fix(css): restyle cards

cryostatio · Apr 5, 2023 · 71cc50c · 71cc50c
1 parent 0aa398d
commit 71cc50c
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 11 deletions.
diff --git 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,15 +195,15 @@ 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}
-          height={'30rem'}
           header={
             <WizardHeader
               title={t('Dashboard.CARD_CATALOG_TITLE')}
@@ -224,12 +226,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
@@ -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
@@ -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
@@ -142,7 +142,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
@@ -591,3 +591,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
@@ -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",