From 03ddb78765edde8b11abdda7264b45163a74e5ad Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 13 Jul 2023 09:57:17 +0300
Subject: [PATCH] Fix tags styling on mobile

---
 app/features/art/components/ArtGrid.tsx | 4 +++-
 app/styles/common.css                   | 9 +++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/features/art/components/ArtGrid.tsx b/app/features/art/components/ArtGrid.tsx
index aba4bffc7..5cf508482 100644
--- a/app/features/art/components/ArtGrid.tsx
+++ b/app/features/art/components/ArtGrid.tsx
@@ -109,7 +109,9 @@ function BigImageDialog({ close, art }: { close: () => void; art: ListedArt }) {
         onLoad={() => setImageLoaded(true)}
       />
       {art.tags || art.linkedUsers ? (
-        <div className="stack sm horizontal">
+        <div
+          className={clsx("art__tags-container", { invisible: !imageLoaded })}
+        >
           {art.linkedUsers?.map((user) => (
             <Link
               to={userPage(user)}
diff --git a/app/styles/common.css b/app/styles/common.css
index dfd059acc..c2ac2303f 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -1197,6 +1197,15 @@ dialog::backdrop {
   height: 20px;
 }
 
+.art__tags-container {
+  display: flex;
+  column-gap: var(--s-2);
+  row-gap: var(--s-0-5);
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-block-start: var(--s-0-5);
+}
+
 .pagination__dot {
   width: 0.6rem;
   height: 0.6rem;