From 1f12bd4f9ede7ca91f80515e5e49e1eacd34a8ce Mon Sep 17 00:00:00 2001
From: "xuan.huang" <5563315+Huxpro@users.noreply.github.com>
Date: Thu, 23 Apr 2026 13:46:27 +0800
Subject: [PATCH] fix(example): correct DeepLinks live activity height on lock
 screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The lock screen layout was wrapped in an unnecessary HStack with a
single VStack child using flex:1, which caused SwiftUI to
miscalculate the intrinsic height — rendering as a collapsed bar.

Replace the outer HStack with a VStack and remove the redundant
nesting so the live activity expands to its natural content height.

Fixes #133
---
 .../DeepLinksLiveActivityUI.tsx               | 83 +++++++++----------
 1 file changed, 40 insertions(+), 43 deletions(-)

diff --git a/example/components/live-activities/DeepLinksLiveActivityUI.tsx b/example/components/live-activities/DeepLinksLiveActivityUI.tsx
index 563356b6..6c7d5e2b 100644
--- a/example/components/live-activities/DeepLinksLiveActivityUI.tsx
+++ b/example/components/live-activities/DeepLinksLiveActivityUI.tsx
@@ -3,49 +3,46 @@ import { Voltra } from 'voltra'
 
 export function DeepLinksLiveActivityUI() {
   return (
-    <Voltra.HStack id="deep-links-live-activity" spacing={8} style={{ padding: 16 }} alignment="top">
-      {/* Link Examples */}
-      <Voltra.VStack spacing={10} style={{ flex: 1 }}>
-        {/* Link with absolute URL */}
-        <Voltra.Link destination="myapp://orders/123">
-          <Voltra.HStack
-            spacing={8}
-            style={{
-              padding: 12,
-              backgroundColor: '#1E293B',
-              borderRadius: 10,
-            }}
-          >
-            <Voltra.Symbol name="bag.fill" tintColor="#F59E0B" size={20} />
-            <Voltra.VStack spacing={2} alignment="leading">
-              <Voltra.Text style={{ color: '#FFFFFF', fontSize: 14, fontWeight: '600' }}>Order #123</Voltra.Text>
-              <Voltra.Text style={{ color: '#94A3B8', fontSize: 11 }}>Tap to view details</Voltra.Text>
-            </Voltra.VStack>
-            <Voltra.Spacer />
-            <Voltra.Symbol name="chevron.right" tintColor="#64748B" size={14} />
-          </Voltra.HStack>
-        </Voltra.Link>
+    <Voltra.VStack id="deep-links-live-activity" spacing={10} style={{ padding: 16 }}>
+      {/* Link with absolute URL */}
+      <Voltra.Link destination="myapp://orders/123">
+        <Voltra.HStack
+          spacing={8}
+          style={{
+            padding: 12,
+            backgroundColor: '#1E293B',
+            borderRadius: 10,
+          }}
+        >
+          <Voltra.Symbol name="bag.fill" tintColor="#F59E0B" size={20} />
+          <Voltra.VStack spacing={2} alignment="leading">
+            <Voltra.Text style={{ color: '#FFFFFF', fontSize: 14, fontWeight: '600' }}>Order #123</Voltra.Text>
+            <Voltra.Text style={{ color: '#94A3B8', fontSize: 11 }}>Tap to view details</Voltra.Text>
+          </Voltra.VStack>
+          <Voltra.Spacer />
+          <Voltra.Symbol name="chevron.right" tintColor="#64748B" size={14} />
+        </Voltra.HStack>
+      </Voltra.Link>
 
-        {/* Link with relative path */}
-        <Voltra.Link destination="/settings">
-          <Voltra.HStack
-            spacing={8}
-            style={{
-              padding: 12,
-              backgroundColor: '#1E293B',
-              borderRadius: 10,
-            }}
-          >
-            <Voltra.Symbol name="gearshape.fill" tintColor="#8B5CF6" size={20} />
-            <Voltra.VStack spacing={2} alignment="leading">
-              <Voltra.Text style={{ color: '#FFFFFF', fontSize: 14, fontWeight: '600' }}>Settings</Voltra.Text>
-              <Voltra.Text style={{ color: '#94A3B8', fontSize: 11 }}>Manage preferences</Voltra.Text>
-            </Voltra.VStack>
-            <Voltra.Spacer />
-            <Voltra.Symbol name="chevron.right" tintColor="#64748B" size={14} />
-          </Voltra.HStack>
-        </Voltra.Link>
-      </Voltra.VStack>
-    </Voltra.HStack>
+      {/* Link with relative path */}
+      <Voltra.Link destination="/settings">
+        <Voltra.HStack
+          spacing={8}
+          style={{
+            padding: 12,
+            backgroundColor: '#1E293B',
+            borderRadius: 10,
+          }}
+        >
+          <Voltra.Symbol name="gearshape.fill" tintColor="#8B5CF6" size={20} />
+          <Voltra.VStack spacing={2} alignment="leading">
+            <Voltra.Text style={{ color: '#FFFFFF', fontSize: 14, fontWeight: '600' }}>Settings</Voltra.Text>
+            <Voltra.Text style={{ color: '#94A3B8', fontSize: 11 }}>Manage preferences</Voltra.Text>
+          </Voltra.VStack>
+          <Voltra.Spacer />
+          <Voltra.Symbol name="chevron.right" tintColor="#64748B" size={14} />
+        </Voltra.HStack>
+      </Voltra.Link>
+    </Voltra.VStack>
   )
 }