Fix stationary tag position

NASA-IMPACT · Jun 11, 2024 · 38a842c · 38a842c
1 parent 39ecfe5
commit 38a842c
Showing 1 changed file with 19 additions and 19 deletions.
diff --git a/src/components/cards/card.js b/src/components/cards/card.js
@@ -15,6 +15,7 @@ const CardHeader = styled.div`
   justify-items: ${({ imagePosition }) =>
     imagePosition === "left top" ? "flex-start" : "center"};
   min-height: 180px;
+  margin-bottom: 0.5rem;
 `
 
 const Card = ({
@@ -77,27 +78,26 @@ const Card = ({
             <Placeholder size="medium" color={colors[mode].text} />
           </div>
         )}
-        {tag && (
-          <div
-            css={`
-               {
-                grid-area: 1 / 1;
-                align-self: flex-end;
-                justify-self: flex-start;
-                text-transform: uppercase;
-                border: 1px solid;
-                padding: 0.25rem;
-                margin: 1rem 0;
-                background-color: ${colors[mode].background};
-              }
-            `}
-            data-cy={`${tag.toLowerCase()}-tag`}
-          >
-            {tag}
-          </div>
-        )}
       </CardHeader>
       {children}
+      {tag && (
+        <div
+          css={`
+             {
+              grid-area: 1 / 1;
+              display: inline-block;
+              text-transform: uppercase;
+              border: 1px solid;
+              padding: 0.25rem;
+              margin: 1rem 0;
+              background-color: ${colors[mode].background};
+            }
+          `}
+          data-cy={`${tag.toLowerCase()}-tag`}
+        >
+          {tag}
+        </div>
+      )}
     </Link>
     {footerList && (
       <div