From 0b735ac632a88c477335324066d10988dd04ec86 Mon Sep 17 00:00:00 2001
From: enricobuehler <buehler@unom.io>
Date: Thu, 11 Jun 2026 12:52:45 +0200
Subject: [PATCH] =?UTF-8?q?fix(apple/iOS):=20larger=20host=20cards=20?=
 =?UTF-8?q?=E2=80=94=20touch-first=20sizing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 160 pt grid minimum packed five small cards per iPad row. iOS columns now use a
280 pt minimum (one full-width card on iPhone portrait, 3–4 generous cards on iPad)
and the card content scales with it: 56 pt icon, title3 name, taller padding. macOS
keeps its compact 180–240 pt cards.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../Sources/PunktfunkClient/ContentView.swift | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/clients/apple/Sources/PunktfunkClient/ContentView.swift b/clients/apple/Sources/PunktfunkClient/ContentView.swift
index af5df85..ca1d865 100644
--- a/clients/apple/Sources/PunktfunkClient/ContentView.swift
+++ b/clients/apple/Sources/PunktfunkClient/ContentView.swift
@@ -160,12 +160,13 @@ struct ContentView: View {
     }
 
     /// macOS caps card width (a huge window shouldn't yield huge cards); on iOS the
-    /// columns FILL the width so the cards stay edge-aligned with the title and bars.
+    /// columns FILL the width so the cards stay edge-aligned with the title and bars —
+    /// sized touch-first: one column on iPhone portrait, 3–4 generous cards on iPad.
     private var gridColumns: [GridItem] {
         #if os(macOS)
         [GridItem(.adaptive(minimum: 180, maximum: 240), spacing: 16)]
         #else
-        [GridItem(.adaptive(minimum: 160), spacing: 16)]
+        [GridItem(.adaptive(minimum: 280), spacing: 16)]
         #endif
     }
 
@@ -203,23 +204,34 @@ struct ContentView: View {
 
     private func hostCard(_ host: StoredHost) -> some View {
         let isConnecting = model.phase == .connecting && model.activeHost?.id == host.id
+        #if os(iOS)
+        let iconSize: CGFloat = 56
+        let iconBox: CGFloat = 76
+        let cardPadding: CGFloat = 28
+        let nameFont = Font.title3.weight(.semibold)
+        #else
+        let iconSize: CGFloat = 42
+        let iconBox: CGFloat = 56
+        let cardPadding: CGFloat = 18
+        let nameFont = Font.headline
+        #endif
         return Button {
             connect(host)
         } label: {
             VStack(spacing: 10) {
                 ZStack {
                     Image(systemName: "play.display")
-                        .font(.system(size: 42, weight: .light))
+                        .font(.system(size: iconSize, weight: .light))
                         .foregroundStyle(.tint)
                         .opacity(isConnecting ? 0.3 : 1)
                     if isConnecting {
                         ProgressView()
                     }
                 }
-                .frame(height: 56)
+                .frame(height: iconBox)
                 VStack(spacing: 2) {
                     Text(host.displayName)
-                        .font(.headline)
+                        .font(nameFont)
                         .lineLimit(1)
                     HStack(spacing: 4) {
                         if host.pinnedSHA256 != nil {
@@ -235,7 +247,7 @@ struct ContentView: View {
                 }
             }
             .frame(maxWidth: .infinity)
-            .padding(.vertical, 18)
+            .padding(.vertical, cardPadding)
             .padding(.horizontal, 12)
             .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 14))
         }