diff --git a/js/app/components/container.tsx b/js/app/components/container.tsx
index ea44c6a46..aaf92f8d1 100644
--- a/js/app/components/container.tsx
+++ b/js/app/components/container.tsx
@@ -23,6 +23,7 @@ function getMaxWidth(width: number): number {
   if (width >= 800) return maxContainerWidths.xl;
   if (width >= 740) return maxContainerWidths.lg;
   if (width >= 660) return maxContainerWidths.md;
+  if (width >= 440) return width;
   return maxContainerWidths.sm;
 }
 
@@ -33,6 +34,7 @@ export default function Container({
 }: ContainerProps) {
   const { width } = useWindowDimensions();
   const maxWidth = getMaxWidth(width);
+  const isMobile = width < 768;
 
   return (
     <View
@@ -45,7 +47,7 @@ export default function Container({
       <View
         style={[
           zero.w.percent[100],
-          zero.px[8],
+          isMobile ? zero.px[2] : zero.px[8],
           { marginHorizontal: "auto" },
           { maxWidth },
           style,
diff --git a/js/app/components/home/cards.tsx b/js/app/components/home/cards.tsx
index 7805d0105..8eb6e06a2 100644
--- a/js/app/components/home/cards.tsx
+++ b/js/app/components/home/cards.tsx
@@ -38,11 +38,13 @@ interface StreamCardProps {
   activity?: string;
   tags?: string[];
   isLive?: boolean;
+  showAvatar?: boolean;
 }
 
 const StreamCard = ({
   size = "sm",
   horizontal = false,
+  showAvatar = true,
   thumbnailUrl,
   avatarUrl,
   title,
@@ -54,6 +56,7 @@ const StreamCard = ({
   isLive = true,
 }: StreamCardProps) => {
   const layoutHorizontal = horizontal;
+  const inMobileMode = horizontal && !showAvatar;
   const { url } = useStreamplaceNode();
   const { theme } = useTheme();
   const isWeb = Platform.OS === "web";
@@ -95,8 +98,8 @@ const StreamCard = ({
   const contentPaddingHoriz = 12;
   const contentPaddingVertical = 2.65;
   const avatarSize = 40;
-  const livePillHeight = 30;
-  const livePillPaddingHorizontal = 4;
+  const livePillHeight = inMobileMode ? 20 : 30;
+  const livePillPaddingHorizontal = inMobileMode ? 2 : 4;
 
   const contentSectionHeight = avatarSize + 2 * contentPaddingVertical;
   const contentSectionWidth = avatarSize * 2 + contentPaddingHoriz;
@@ -123,7 +126,11 @@ const StreamCard = ({
         style={[
           {
             flex: layoutHorizontal ? 0 : undefined,
-            minWidth: layoutHorizontal ? "63%" : "100%",
+            minWidth: layoutHorizontal
+              ? inMobileMode
+                ? "40%"
+                : "63%"
+              : "100%",
             // native seems to be unable to adjust widths properly?
             maxHeight: !isWeb ? "76.5%" : "100%",
             position: "relative",
@@ -146,8 +153,8 @@ const StreamCard = ({
             style={[
               {
                 position: "absolute",
-                top: contentPaddingHoriz,
-                right: contentPaddingVertical,
+                top: contentPaddingVertical * 2,
+                right: contentPaddingVertical * 2,
                 backgroundColor: "rgba(0, 0, 0, 0.75)",
                 borderRadius: 999,
                 borderWidth: 1,
@@ -161,7 +168,10 @@ const StreamCard = ({
               },
             ]}
           >
-            <PlayerUI.DehydratedViewers viewers={viewers} />
+            <PlayerUI.DehydratedViewers
+              viewers={viewers}
+              size={inMobileMode ? "sm" : "md"}
+            />
           </View>
         )}
       </View>
@@ -182,42 +192,46 @@ const StreamCard = ({
         ]}
       >
         {/* Avatar */}
-        <View
-          style={[
-            {
-              width: avatarSize,
-              height: avatarSize,
-              marginVertical: layoutHorizontal ? 0 : contentPaddingVertical * 4,
-              borderRadius: avatarSize / 2,
-              overflow: "hidden",
-              flexShrink: 0,
-            },
-          ]}
-        >
-          {/* dynamically switching between these src crashes android */}
-          {avatarUrl && (
-            <View style={[zero.flex.values[1]]} key="avatar">
-              <Image
-                key="avatar"
-                source={{
-                  uri: avatarUrl,
-                }}
-                style={{ width: "100%", height: "100%" }}
-                contentFit="cover"
-              />
-            </View>
-          )}
-          {!avatarUrl && (
-            <View key="avatar-placeholder">
-              <Image
-                key="avatar"
-                source={require("./../../assets/images/goose.png")}
-                style={{ width: "100%", height: "100%" }}
-                contentFit="cover"
-              />
-            </View>
-          )}
-        </View>
+        {showAvatar && (
+          <View
+            style={[
+              {
+                width: avatarSize,
+                height: avatarSize,
+                marginVertical: layoutHorizontal
+                  ? 0
+                  : contentPaddingVertical * 4,
+                borderRadius: avatarSize / 2,
+                overflow: "hidden",
+                flexShrink: 0,
+              },
+            ]}
+          >
+            {/* dynamically switching between these src crashes android */}
+            {avatarUrl && (
+              <View style={[zero.flex.values[1]]} key="avatar">
+                <Image
+                  key="avatar"
+                  source={{
+                    uri: avatarUrl,
+                  }}
+                  style={{ width: "100%", height: "100%" }}
+                  contentFit="cover"
+                />
+              </View>
+            )}
+            {!avatarUrl && (
+              <View key="avatar-placeholder">
+                <Image
+                  key="avatar"
+                  source={require("./../../assets/images/goose.png")}
+                  style={{ width: "100%", height: "100%" }}
+                  contentFit="cover"
+                />
+              </View>
+            )}
+          </View>
+        )}
 
         {/* Text content */}
         <View
@@ -240,6 +254,7 @@ const StreamCard = ({
                   lineHeight: 16,
                 },
               ]}
+              size={showAvatar ? "base" : "base"}
               numberOfLines={1}
               ellipsizeMode="tail"
             >
@@ -264,12 +279,13 @@ const StreamCard = ({
           {((activity && category.length > 0) || tags.length > 0) && (
             <View
               style={{
-                flexWrap: "nowrap",
-                gap: 6,
+                flexWrap: inMobileMode ? "wrap" : "nowrap",
+                gap: inMobileMode ? 4 : 8,
                 alignItems: "center",
                 alignSelf: "stretch",
                 flexDirection: "row",
                 overflow: "hidden",
+                maxHeight: inMobileMode ? 40 : undefined,
               }}
               onLayout={(e) => {
                 const width = e.nativeEvent?.layout?.width;
@@ -283,7 +299,7 @@ const StreamCard = ({
                 <Text
                   size="sm"
                   style={{ flexShrink: 0 }}
-                  color={hexToRgba(theme.colors.primaryForeground, 0.85)}
+                  color={hexToRgba(theme.colors.accentForeground, 0.85)}
                   numberOfLines={1}
                   ellipsizeMode="tail"
                   onLayout={(e) => {
@@ -300,7 +316,10 @@ const StreamCard = ({
                   {activity}
                 </Text>
               )}
-              {tagItems.slice(0, visibleTagCount).map((cat, index) => (
+              {(inMobileMode
+                ? tagItems
+                : tagItems.slice(0, visibleTagCount)
+              ).map((cat, index) => (
                 <View
                   key={index}
                   style={[
@@ -325,7 +344,7 @@ const StreamCard = ({
                   }}
                 >
                   <Text
-                    size="sm"
+                    size={inMobileMode ? "xs" : "sm"}
                     color={hexToRgba(theme.colors.primaryForeground, 0.85)}
                     numberOfLines={1}
                     ellipsizeMode="tail"
diff --git a/js/app/src/screens/home.tsx b/js/app/src/screens/home.tsx
index 2581f088c..3450c2edb 100644
--- a/js/app/src/screens/home.tsx
+++ b/js/app/src/screens/home.tsx
@@ -107,11 +107,13 @@ function HomeScreenItem({
   size,
   avatarUrl,
   horizontal = false,
+  showAvatar = true,
 }: {
   item: PlaceStreamLivestream.LivestreamView;
   size: StreamCardSize;
   avatarUrl?: string;
   horizontal?: boolean;
+  showAvatar?: boolean;
 }) {
   const user = item.author.handle || item.author.did;
   return (
@@ -132,6 +134,7 @@ function HomeScreenItem({
           (item.record as PlaceStreamLivestream.Record).title || "A livestream!"
         }
         horizontal={horizontal}
+        showAvatar={showAvatar}
         thumbnailUrl={`/api/playback/${user}/stream.jpg?ts=${(Date.now() / 120000).toFixed(0)}`}
         avatarUrl={avatarUrl}
         streamerName={user}
@@ -215,6 +218,8 @@ export default function HomeScreen({
   let cols = getHomeScreenCols(width);
   let size = getHomeScreenItemSize(width);
 
+  // Use horizontal (SBS) layout for all items on single-column breakpoint
+  const useHorizontalAll = cols === 1;
   // Only use horizontal layout for first card when we have enough columns (3+)
   const useHorizontalFirst = cols >= 3;
   const firstRowCols = useHorizontalFirst ? cols - 1 : cols;
@@ -336,7 +341,7 @@ export default function HomeScreen({
                 { flexDirection: "row" },
                 {
                   gap: 24,
-                  marginBottom: 24,
+                  marginBottom: useHorizontalAll ? 12 : 24,
                   width: "100%",
                 },
               ]}
@@ -358,7 +363,10 @@ export default function HomeScreen({
                     item={item}
                     size={size}
                     avatarUrl={avis[item.author.did]?.avatar}
-                    horizontal={itemIndex == 0 && useHorizontalFirst}
+                    horizontal={
+                      useHorizontalAll || (itemIndex == 0 && useHorizontalFirst)
+                    }
+                    showAvatar={!useHorizontalAll}
                   />
                 </View>
               ))}
@@ -384,7 +392,7 @@ export default function HomeScreen({
                   key={`row-${rowIndex}`}
                   style={[
                     { flexDirection: "row" },
-                    { gap: 24, marginBottom: 24 },
+                    { gap: 24, marginBottom: useHorizontalAll ? 12 : 24 },
                   ]}
                 >
                   {row.map((item, itemIndex) =>
@@ -397,6 +405,8 @@ export default function HomeScreen({
                           item={item}
                           size={size}
                           avatarUrl={avis[item.author.did]?.avatar}
+                          horizontal={useHorizontalAll}
+                          showAvatar={!useHorizontalAll}
                         />
                       </View>
                     ) : (
diff --git a/js/components/src/components/mobile-player/ui/viewers.tsx b/js/components/src/components/mobile-player/ui/viewers.tsx
index aea7b81de..688a5d7a6 100644
--- a/js/components/src/components/mobile-player/ui/viewers.tsx
+++ b/js/components/src/components/mobile-player/ui/viewers.tsx
@@ -9,18 +9,29 @@ export function Viewers() {
   return <DehydratedViewers viewers={viewers || 0} />;
 }
 
-export function DehydratedViewers({ viewers }: { viewers: number }) {
+export function DehydratedViewers({
+  viewers,
+  size = "md",
+}: {
+  viewers: number;
+  size?: "sm" | "md";
+}) {
+  const iconSize = size === "sm" ? 12 : 24;
+  const fontSize = size === "sm" ? 11 : 16;
   return (
     <View
       style={[
         atoms.layout.flex.center,
         atoms.layout.flex.row,
-        atoms.gap.all[2],
+        atoms.gap.all[size === "sm" ? 1 : 2],
         atoms.px[1],
       ]}
     >
-      <Eye color="#fd5050" />
-      <ViewerCount count={viewers} />
+      <Eye color="#fd5050" size={iconSize} />
+      <ViewerCount
+        count={viewers}
+        style={{ fontSize, lineHeight: fontSize * 1.5 }}
+      />
     </View>
   );
 }
-- 
2.51.2


From 1736637e954b17ae69aa75562d1c6d74c24f222d Mon Sep 17 00:00:00 2001
From: Natalie Bridgers <natalie@stream.place>
Date: Fri, 22 May 2026 20:39:32 -0500
Subject: [PATCH 2/3] more vertical space

---
 js/app/components/home/cards.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/app/components/home/cards.tsx b/js/app/components/home/cards.tsx
index 8eb6e06a2..88beac26f 100644
--- a/js/app/components/home/cards.tsx
+++ b/js/app/components/home/cards.tsx
@@ -128,7 +128,7 @@ const StreamCard = ({
             flex: layoutHorizontal ? 0 : undefined,
             minWidth: layoutHorizontal
               ? inMobileMode
-                ? "40%"
+                ? "45%"
                 : "63%"
               : "100%",
             // native seems to be unable to adjust widths properly?
-- 
2.51.2


From 1ff8baa1f8e259938c0ddfe246c8d1fba77ae338 Mon Sep 17 00:00:00 2001
From: Natalie Bridgers <natalie@stream.place>
Date: Thu, 28 May 2026 11:36:40 -0500
Subject: [PATCH 3/3] mobile rows work better now?

---
 js/app/components/home/cards.tsx | 11 +++---
 js/app/src/screens/home.tsx      | 66 ++++++++++++++++----------------
 2 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/js/app/components/home/cards.tsx b/js/app/components/home/cards.tsx
index 88beac26f..630c34e18 100644
--- a/js/app/components/home/cards.tsx
+++ b/js/app/components/home/cards.tsx
@@ -108,7 +108,7 @@ const StreamCard = ({
     <LiquidGlassView
       interactive
       style={[
-        zero.flex.values[1],
+        inMobileMode ? { alignSelf: "stretch" } : zero.flex.values[1],
         {
           borderCurve: "continuous",
           backgroundColor: theme.colors.muted,
@@ -128,11 +128,12 @@ const StreamCard = ({
             flex: layoutHorizontal ? 0 : undefined,
             minWidth: layoutHorizontal
               ? inMobileMode
-                ? "45%"
+                ? "40%"
                 : "63%"
               : "100%",
+            maxWidth: layoutHorizontal ? "40%" : undefined,
             // native seems to be unable to adjust widths properly?
-            maxHeight: !isWeb ? "76.5%" : "100%",
+            maxHeight: !isWeb ? (inMobileMode ? "100%" : "76.5%") : "100%",
             position: "relative",
             alignSelf: layoutHorizontal ? "auto" : "center",
             backgroundColor: theme.colors.card,
@@ -163,7 +164,7 @@ const StreamCard = ({
                 height: livePillHeight,
                 alignItems: "center",
                 justifyContent: "center",
-                gap: 4,
+                gap: 0,
                 flexDirection: "row",
               },
             ]}
@@ -237,7 +238,7 @@ const StreamCard = ({
         <View
           style={[
             zero.flex.values[1],
-            { justifyContent: "space-around" },
+            { justifyContent: "center" },
             { alignItems: "flex-start" },
             {
               gap: contentPaddingHoriz / 4,
diff --git a/js/app/src/screens/home.tsx b/js/app/src/screens/home.tsx
index 3450c2edb..c8f82cfc5 100644
--- a/js/app/src/screens/home.tsx
+++ b/js/app/src/screens/home.tsx
@@ -227,25 +227,17 @@ export default function HomeScreen({
   const firstRowItems = segments.slice(0, firstRowCols);
   let cutSegs = segments.slice(firstRowCols);
 
-  // fill in null data to pad out the list for grid display
-  let segs: (PlaceStreamLivestream.LivestreamView | null)[] = cutSegs.concat(
-    Array((cols - (segments.length % cols)) % cols).fill(null),
-  );
-  if (cutSegs.length === 0 && segs.every((s) => s === null) && cols > 0) {
-    // ensure segs is not just [null] if segments is empty
-    segs = [];
-  }
+  let rows: (PlaceStreamLivestream.LivestreamView | null)[][] = [];
 
-  // assemble rows
-  const rows: (PlaceStreamLivestream.LivestreamView | null)[][] = [];
-  for (let i = 0; i < cutSegs.length; i += cols) {
-    let row = cutSegs.slice(i, i + cols);
-    // pad the last row with nulls if it's not full
-    if (i + cols >= cutSegs.length && row.length < cols) {
-      const paddingNeeded = cols - row.length;
-      row = [...row, ...Array(paddingNeeded).fill(null)];
+  if (!useHorizontalAll) {
+    for (let i = 0; i < cutSegs.length; i += cols) {
+      let row = cutSegs.slice(i, i + cols);
+      if (i + cols >= cutSegs.length && row.length < cols) {
+        const paddingNeeded = cols - row.length;
+        row = [...row, ...Array(paddingNeeded).fill(null)];
+      }
+      rows.push(row);
     }
-    rows.push(row);
   }
 
   const indicatorTop = safeAreaInsets.top;
@@ -335,15 +327,28 @@ export default function HomeScreen({
               <Text style={{ marginTop: 8 }}>Check back later?</Text>
             </View>
           )}
-          {firstRowItems.length > 0 && (
+          {useHorizontalAll
+            ? segments.map((item) => (
+                <View
+                  key={item.cid}
+                  style={{ width: "100%", marginBottom: 12 }}
+                >
+                  <HomeScreenItem
+                    item={item}
+                    size={size}
+                    avatarUrl={avis[item.author.did]?.avatar}
+                    horizontal={true}
+                    showAvatar={false}
+                  />
+                </View>
+              ))
+            : null}
+
+          {!useHorizontalAll && firstRowItems.length > 0 && (
             <View
               style={[
                 { flexDirection: "row" },
-                {
-                  gap: 24,
-                  marginBottom: useHorizontalAll ? 12 : 24,
-                  width: "100%",
-                },
+                { gap: 24, marginBottom: 24, width: "100%" },
               ]}
             >
               {firstRowItems.map((item, itemIndex) => (
@@ -363,14 +368,11 @@ export default function HomeScreen({
                     item={item}
                     size={size}
                     avatarUrl={avis[item.author.did]?.avatar}
-                    horizontal={
-                      useHorizontalAll || (itemIndex == 0 && useHorizontalFirst)
-                    }
-                    showAvatar={!useHorizontalAll}
+                    horizontal={itemIndex == 0 && useHorizontalFirst}
+                    showAvatar={true}
                   />
                 </View>
               ))}
-              {/* Pad the first row to match the column count */}
               {Array(
                 useHorizontalFirst
                   ? cols - firstRowItems.length - 1
@@ -385,14 +387,14 @@ export default function HomeScreen({
             </View>
           )}
 
-          {segments.length > 0 && (
+          {!useHorizontalAll && segments.length > 0 && (
             <View>
               {rows.map((row, rowIndex) => (
                 <View
                   key={`row-${rowIndex}`}
                   style={[
                     { flexDirection: "row" },
-                    { gap: 24, marginBottom: useHorizontalAll ? 12 : 24 },
+                    { gap: 24, marginBottom: 24 },
                   ]}
                 >
                   {row.map((item, itemIndex) =>
@@ -405,8 +407,8 @@ export default function HomeScreen({
                           item={item}
                           size={size}
                           avatarUrl={avis[item.author.did]?.avatar}
-                          horizontal={useHorizontalAll}
-                          showAvatar={!useHorizontalAll}
+                          horizontal={false}
+                          showAvatar={true}
                         />
                       </View>
                     ) : (