From 1812480c6ba45e0fe505ad505ae2d22dec3d7efc Mon Sep 17 00:00:00 2001
From: "Natalie B." <22222885+espeon@users.noreply.github.com>
Date: Sat, 17 Jan 2026 14:31:11 -0600
Subject: [PATCH] clean up stream key buttons!

---
 .../components/live-dashboard/live-selector.tsx  | 10 +++++++---
 js/app/components/live-dashboard/stream-key.tsx  | 16 ++++++++++++++--
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/js/app/components/live-dashboard/live-selector.tsx b/js/app/components/live-dashboard/live-selector.tsx
index 1972e4af..ba421d85 100644
--- a/js/app/components/live-dashboard/live-selector.tsx
+++ b/js/app/components/live-dashboard/live-selector.tsx
@@ -57,14 +57,18 @@ export default function StreamScreen({ route }) {
   if (selectedMode === "streamkey") {
     return (
       <View flex={1} style={[flex.grow[1], { width: "100%" }]}>
-        <View padding="md" direction="row" justify="between" align="end">
-          <Button variant="ghost" onPress={() => setSelectedMode(null)}>
+        <View padding="md" direction="row" justify="around" align="start">
+          <Button
+            variant="ghost"
+            width="min"
+            onPress={() => setSelectedMode(null)}
+          >
             ← Back
           </Button>
           <Text variant="h4" weight="bold">
             Stream from OBS
           </Text>
-          <Button variant="ghost" style={{ opacity: 0 }}>
+          <Button variant="ghost" width="min" style={{ opacity: 0 }}>
             ← Back
           </Button>
         </View>
diff --git a/js/app/components/live-dashboard/stream-key.tsx b/js/app/components/live-dashboard/stream-key.tsx
index 8112dfe9..4fc25429 100644
--- a/js/app/components/live-dashboard/stream-key.tsx
+++ b/js/app/components/live-dashboard/stream-key.tsx
@@ -8,6 +8,7 @@ import {
   useTheme,
   useToast,
   View,
+  zero,
 } from "@streamplace/components";
 import Loading from "components/loading/loading";
 import { Clipboard, ClipboardCheck } from "lucide-react-native";
@@ -68,6 +69,7 @@ export function StreamKeyScreen() {
         <View fullWidth style={{ maxWidth: 600 }}>
           <FormRow>
             <Button
+              width="min"
               variant={protocol !== "rtmp" ? "secondary" : "primary"}
               onPress={() => setProtocol("rtmp")}
               style={{
@@ -78,6 +80,7 @@ export function StreamKeyScreen() {
               RTMP
             </Button>
             <Button
+              width="min"
               variant={protocol !== "whip" ? "secondary" : "primary"}
               onPress={() => setProtocol("whip")}
               style={{
@@ -93,7 +96,7 @@ export function StreamKeyScreen() {
           <FormRow>
             <Label>Output Settings</Label>
             <Content>
-              <Body>
+              <View style={[zero.mt[2]]}>
                 <Text>Output mode: Advanced</Text>
                 <Text>
                   Keyframe Interval: <Code>1s</Code>
@@ -101,7 +104,15 @@ export function StreamKeyScreen() {
                 <Text>
                   x264 Options: <Code>bframes=0</Code>
                 </Text>
-              </Body>
+                <Text
+                  underline
+                  style={{
+                    fontWeight: "bold",
+                  }}
+                >
+                  (Very important!)
+                </Text>
+              </View>
             </Content>
           </FormRow>
         </View>
@@ -271,6 +282,7 @@ export function StreamKey() {
           selectTextOnFocus={true}
         />
         <Button
+          width="min"
           onPress={handleCopy}
           style={[
             {
-- 
2.51.2