From bcfd51e0d6641a7ee90a3d1a1f342f81d02a7adc Mon Sep 17 00:00:00 2001
From: Natalie Bridgers <natalie@stream.place>
Date: Sat, 3 Oct 2026 13:51:11 -0500
Subject: [PATCH 1/2] Keep stream details visible alongside video

---
 js/web/src/routes/$user/index.tsx | 59 +++++++++++++++----------------
 1 file changed, 29 insertions(+), 30 deletions(-)

diff --git a/js/web/src/routes/$user/index.tsx b/js/web/src/routes/$user/index.tsx
index 4c24a75bf..8b4b8810b 100644
--- a/js/web/src/routes/$user/index.tsx
+++ b/js/web/src/routes/$user/index.tsx
@@ -207,14 +207,14 @@ function StreamBody({ store, user }: { store: LivestreamStore; user: string }) {
 
   return (
     <div className="flex h-full flex-col">
-      {/* Sidebar layout (wide viewport) */}
-      <div className="wide:flex wide:h-full wide:flex-col wide:gap-3 hidden">
+      <div className="relative flex min-h-0 flex-1 flex-col wide:h-full">
         <div
-          className={`z-0 flex min-h-0 flex-1 gap-4 transition-[margin] duration-300 ease-in-out ${chatOpen ? "wide:mr-90" : ""}`}
+          className={`z-0 flex min-h-0 min-w-0 flex-1 flex-col transition-[margin] duration-300 ease-in-out wide:overflow-y-auto ${chatOpen ? "wide:mr-90" : ""}`}
         >
-          <div className="min-w-0 flex-1 overflow-y-auto">
-            <VideoSection store={store} user={user} liveness={liveness} />
-            {!theatre && (
+          <VideoSection store={store} user={user} liveness={liveness} />
+
+          {!theatre && (
+            <div className="hidden wide:block">
               <StreamInfo
                 store={store}
                 user={user}
@@ -223,41 +223,40 @@ function StreamBody({ store, user }: { store: LivestreamStore; user: string }) {
                 onToggleChat={toggleChat}
                 avatar={avatar}
               />
+            </div>
+          )}
+
+          {/* Stacked layout details */}
+          <div className="wide:hidden flex min-h-0 flex-1 flex-col">
+            <MobileStreamBar
+              store={store}
+              user={user}
+              chatOpen={chatOpen}
+              onToggleChat={toggleChat}
+              avatar={avatar}
+            />
+
+            {!chatOpen && !isOffline && (
+              <MobileStreamDetails store={store} user={user} avatar={avatar} />
             )}
+
+            <div
+              className={`min-h-0 flex-1 flex-col border-t ${chatOpen ? "flex" : "hidden"}`}
+            >
+              <ChatSidebar store={store} avatar={avatar} />
+            </div>
           </div>
         </div>
 
+        {/* Sidebar layout chat */}
         <div
-          className={`fixed right-0 bottom-0 z-20 flex w-90 flex-col overflow-hidden transition-all duration-300 ease-in-out ${
+          className={`fixed right-0 bottom-0 z-20 hidden w-90 flex-col overflow-hidden transition-all duration-300 ease-in-out wide:flex ${
             chatOpen ? "translate-x-0" : "translate-x-full"
           } ${theatre ? "top-0" : "top-12"}`}
         >
           <ChatSidebar store={store} onClose={toggleChat} avatar={avatar} />
         </div>
       </div>
-
-      {/* Stacked layout (portrait/tall) */}
-      <div className="wide:hidden flex min-h-0 flex-1 flex-col">
-        <VideoSection store={store} user={user} liveness={liveness} />
-
-        <MobileStreamBar
-          store={store}
-          user={user}
-          chatOpen={chatOpen}
-          onToggleChat={toggleChat}
-          avatar={avatar}
-        />
-
-        {!chatOpen && !isOffline && (
-          <MobileStreamDetails store={store} user={user} avatar={avatar} />
-        )}
-
-        <div
-          className={`min-h-0 flex-1 flex-col border-t ${chatOpen ? "flex" : "hidden"}`}
-        >
-          <ChatSidebar store={store} avatar={avatar} />
-        </div>
-      </div>
     </div>
   );
 }
-- 
knotmirror 0.0.1


From 68cd6072ab8b75a2ca6bd941cd00bbfe3c249629 Mon Sep 17 00:00:00 2001
From: Natalie Bridgers <natalie@stream.place>
Date: Sat, 3 Oct 2026 15:01:55 -0500
Subject: [PATCH 2/2] Reorder responsive utility classes

---
 js/web/src/routes/$user/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/web/src/routes/$user/index.tsx b/js/web/src/routes/$user/index.tsx
index 8b4b8810b..638f41adc 100644
--- a/js/web/src/routes/$user/index.tsx
+++ b/js/web/src/routes/$user/index.tsx
@@ -207,14 +207,14 @@ function StreamBody({ store, user }: { store: LivestreamStore; user: string }) {
 
   return (
     <div className="flex h-full flex-col">
-      <div className="relative flex min-h-0 flex-1 flex-col wide:h-full">
+      <div className="wide:h-full relative flex min-h-0 flex-1 flex-col">
         <div
-          className={`z-0 flex min-h-0 min-w-0 flex-1 flex-col transition-[margin] duration-300 ease-in-out wide:overflow-y-auto ${chatOpen ? "wide:mr-90" : ""}`}
+          className={`wide:overflow-y-auto z-0 flex min-h-0 min-w-0 flex-1 flex-col transition-[margin] duration-300 ease-in-out ${chatOpen ? "wide:mr-90" : ""}`}
         >
           <VideoSection store={store} user={user} liveness={liveness} />
 
           {!theatre && (
-            <div className="hidden wide:block">
+            <div className="wide:block hidden">
               <StreamInfo
                 store={store}
                 user={user}
@@ -250,7 +250,7 @@ function StreamBody({ store, user }: { store: LivestreamStore; user: string }) {
 
         {/* Sidebar layout chat */}
         <div
-          className={`fixed right-0 bottom-0 z-20 hidden w-90 flex-col overflow-hidden transition-all duration-300 ease-in-out wide:flex ${
+          className={`wide:flex fixed right-0 bottom-0 z-20 hidden w-90 flex-col overflow-hidden transition-all duration-300 ease-in-out ${
             chatOpen ? "translate-x-0" : "translate-x-full"
           } ${theatre ? "top-0" : "top-12"}`}
         >
-- 
knotmirror 0.0.1