From aaa2e26bd9c85aa712c5f3b2cf26f5eda9ef06b7 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Sun, 9 Jul 2023 01:05:40 +0200
Subject: [PATCH] fix: tags wrapping

---
 src/pages/layout.css      |  3 ++-
 src/pages/stream-page.css |  2 +-
 src/pages/stream-page.tsx | 29 ++++++++++++++---------------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/pages/layout.css b/src/pages/layout.css
index 423185b..6476656 100644
--- a/src/pages/layout.css
+++ b/src/pages/layout.css
@@ -205,6 +205,7 @@ button span.hide-on-mobile {
 
 .tags {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
 }
 
@@ -242,4 +243,4 @@ button span.hide-on-mobile {
 
 .age-check .btn {
   padding: 12px 16px;
-}
\ No newline at end of file
+}
diff --git a/src/pages/stream-page.css b/src/pages/stream-page.css
index 5201144..bec3aa3 100644
--- a/src/pages/stream-page.css
+++ b/src/pages/stream-page.css
@@ -150,4 +150,4 @@
 .offline>video {
   z-index: -1;
   position: relative;
-}
\ No newline at end of file
+}
diff --git a/src/pages/stream-page.tsx b/src/pages/stream-page.tsx
index 47e8671..d825a46 100644
--- a/src/pages/stream-page.tsx
+++ b/src/pages/stream-page.tsx
@@ -47,21 +47,20 @@ function ProfileInfo({ ev, goal }: { ev?: NostrEvent; goal?: TaggedRawEvent }) {
         <div className="f-grow stream-info">
           <h1>{findTag(ev, "title")}</h1>
           <p>{findTag(ev, "summary")}</p>
-          {ev && (
-            <Tags ev={ev}>
-              <StatePill state={status as StreamState} />
-              {viewers > 0 && (
-                <span className="pill viewers">
-                  {formatSats(viewers)} viewers
-                </span>
-              )}
-              {status === StreamState.Live && (
-                <span className="pill">
-                  <StreamTimer ev={ev} />
-                </span>
-              )}
-            </Tags>
-          )}
+          <div className="tags">
+            <StatePill state={status as StreamState} />
+            {viewers > 0 && (
+              <span className="pill viewers">
+                {formatSats(viewers)} viewers
+              </span>
+            )}
+            {status === StreamState.Live && (
+              <span className="pill">
+                <StreamTimer ev={ev} />
+              </span>
+            )}
+            {ev && <Tags ev={ev} />}
+          </div>
           {isMine && (
             <div className="actions">
               {ev && <NewStreamDialog text="Edit" ev={ev} btnClassName="btn" />}