fix component sizing

Signed-off-by: Max Wolfs <[email protected]>
SovereignCloudStack · Feb 29, 2024 · 93e7914 · 93e7914
1 parent 712ce92
commit 93e7914
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/src/components/ContentCard.tsx b/src/components/ContentCard.tsx
@@ -28,7 +28,11 @@ const ContentCard: React.FunctionComponent<ContentCardProps> = (props) => {
   return (
     <div style={style} className={`${styles.contentCard} card`}>
       <div className="card__header">
-        {small ? <h5>{title}</h5> : <h3>{title}</h3>}
+        {small ? (
+          <h5 style={{ marginLeft: '-6px' }}>{title}</h5>
+        ) : (
+          <h3>{title}</h3>
+        )}
       </div>
       <div className="card__body">
         <p>{body}</p>
@@ -52,11 +56,11 @@ const ContentCard: React.FunctionComponent<ContentCardProps> = (props) => {
                     : styles.layerComponentWip
                 }>
                 {component.title}
-                {component.mandatory == 'true' ? (
+                {/* {component.mandatory == 'true' ? (
                   <div className={styles.chipMandatory}>mandatory</div>
                 ) : (
                   <div className={styles.chipOptional}>optional</div>
-                )}
+                )} */}
               </div>
             </Link>
           ))}

diff --git a/src/components/contentcard.module.css b/src/components/contentcard.module.css
@@ -35,9 +35,9 @@
   border: solid 2px rgba(70, 72, 213, 0.539);
   border-radius: 4px;
   background: #43d8b24f;
-  width: 96px;
-  height: 96px;
-  margin: 0 0 16px 16px;
+  width: 80px;
+  height: 80px;
+  margin: 0 0 8px 8px;
   padding: 8px;
   font-weight: 600;
   font-size: 10px;
@@ -48,9 +48,9 @@
 .layerComponentWip {
   border: dashed 2px rgba(70, 72, 213, 0.539);
   border-radius: 4px;
-  width: 96px;
-  height: 96px;
-  margin: 0 0 16px 16px;
+  width: 80px;
+  height: 80px;
+  margin: 0 0 8px 8px;
   padding: 8px;
   font-size: 10px;
   text-decoration: none;