chore: adjust tile styles

cryostatio · Sep 3, 2024 · 6d918b1 · 6d918b1
1 parent be2f3cc
commit 6d918b1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/app/Dashboard/AddCard.tsx b/src/app/Dashboard/AddCard.tsx
@@ -320,7 +320,6 @@ export const CardGallery: React.FC<CardGalleryProps> = ({ selection, onSelect })
       const { icon, labels, title, description } = card;
       return (
         <CatalogTile
-          style={{ height: '100%' }}
           featured={selection === t(title)}
           id={title}
           key={title}
@@ -421,7 +420,7 @@ export const CardGallery: React.FC<CardGalleryProps> = ({ selection, onSelect })
     <Drawer isExpanded={!!toViewCard} isInline>
       <DrawerContent panelContent={panelContent}>
         <DrawerContentBody>
-          <Grid hasGutter style={{ alignItems: 'stretch', marginTop: '1em', marginRight: !toViewCard ? 0 : '1em' }}>
+          <Grid hasGutter className="dashboard-card-picker" style={{ marginRight: !toViewCard ? 0 : '1em' }}>
             {items.map((item) => (
               <GridItem span={4} key={item.key}>
                 {item}

diff --git a/src/app/app.css b/src/app/app.css
@@ -94,6 +94,18 @@ body,
   overflow-y: auto;
 }
 
+.dashboard-card-picker {
+  align-items: stretch;
+  margin-top: 1em;
+  /* Ensure left border is visible*/
+  margin-left: 1px;
+}
+
+.dashboard-card-picker  .catalog-tile-pf {
+  height: 100%;
+  border-top: 1.5px solid var(--pf-v5-global--palette--black-300);
+}
+
 .layout-template-picker {
   padding: 0 1em 1em 1em;
 }