From bbf0e9a0342038506e1a697fd6e28ceb86f3a7b4 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 26 Nov 2022 16:42:20 +0200
Subject: [PATCH] BuildCard: Move mode icons inside popup

---
 app/components/BuildCard.tsx | 30 +++++++++++++++---------------
 app/styles/common.css        |  2 +-
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/components/BuildCard.tsx b/app/components/BuildCard.tsx
index 8b7d96a17..f73c8a16b 100644
--- a/app/components/BuildCard.tsx
+++ b/app/components/BuildCard.tsx
@@ -71,19 +71,6 @@ export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
       <div className="stack xxs">
         <div className="build__top-row">
           <h2 className="build__title">{title}</h2>
-          {modes && modes.length > 0 && (
-            <div className="build__modes">
-              {modes.map((mode) => (
-                <Image
-                  key={mode}
-                  alt=""
-                  path={modeImageUrl(mode)}
-                  width={18}
-                  height={18}
-                />
-              ))}
-            </div>
-          )}
         </div>
         <div className="build__date-author-row">
           {owner && (
@@ -154,14 +141,27 @@ export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
             path={navIconUrl("analyzer")}
           />
         </Link>
-        {description && (
+        {description || (modes && modes.length > 0) ? (
           <Popover
             buttonChildren={<InfoIcon className="build__icon" />}
             triggerClassName="minimal tiny build__small-text"
           >
+            {modes && modes.length > 0 && (
+              <div className="build__modes">
+                {modes.map((mode) => (
+                  <Image
+                    key={mode}
+                    alt=""
+                    path={modeImageUrl(mode)}
+                    width={18}
+                    height={18}
+                  />
+                ))}
+              </div>
+            )}
             {description}
           </Popover>
-        )}
+        ) : null}
         {canEdit && (
           <>
             <LinkButton
diff --git a/app/styles/common.css b/app/styles/common.css
index f01ad0016..f3403a90a 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -787,7 +787,7 @@ dialog::backdrop {
 .build {
   display: flex;
   flex-direction: column;
-  padding: var(--s-2-5);
+  padding: var(--s-3);
   border-radius: var(--rounded);
   background-color: var(--bg-lighter);
   gap: var(--s-3);