fix: tags wrapping

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;
-}
+}

src/pages/stream-page.css

@@ -150,4 +150,4 @@
 .offline>video {
   z-index: -1;
   position: relative;
-}
+}

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" />}