Fix iOS table rendering issue

App/App/View/SavedGamesView.swift

@@ -9,6 +9,7 @@ import SwiftUI
 
 struct SavedGamesView: View {
     var body: some View {
+        // TODO: use the same collection view with headers instead? Or use collapsible sections?
         ScoreTable(key: "savedGames.section.unfinished")
         ScoreTable(key: "savedGames.section.finished")
     }
@@ -17,18 +18,36 @@ struct SavedGamesView: View {
 struct ScoreTable: View {
     let key: LocalizedStringKey
     
+    @Environment(\.horizontalSizeClass)
+    private var horizontalSizeClass
+    
     @State private var unsinished = [
-        Result(date: "D1", player1: "P1", player2: "P2", rules: "Rule1"),
-        Result(date: "D2", player1: "P2", player2: "P3", rules: "Rule2"),
-        Result(date: "D3", player1: "P3", player2: "P4", rules: "Rule3"),
-        Result(date: "D4", player1: "P4", player2: "P5", rules: "Rule4"),
-        Result(date: "D5", player1: "P5", player2: "P1", rules: "Rule5")
+        Result(date: Date.now, player1: "P1", player2: "P2", rules: "Rule1"),
+        Result(date: Date.now, player1: "P2", player2: "P3", rules: "Rule2"),
+        Result(date: Date.now, player1: "P3", player2: "P4", rules: "Rule3"),
+        Result(date: Date.now, player1: "P4", player2: "P5", rules: "Rule4"),
+        Result(date: Date.now, player1: "P5", player2: "P1", rules: "Rule5")
     ];
     
     var body: some View {
         Section(self.key) {
+            // TODO: sort by date
+            if horizontalSizeClass == .compact {
+                List(self.unsinished) { result in
+                    VStack(alignment: .center) {
+                        Text("\(result.player1) savedGames.table.column.players.entry \(result.player2)")
+                        HStack {
+                            Text(result.date, style: .date)
+                            Spacer()
+                            Text(result.rules)
+                        }.foregroundStyle(.secondary)
+                    }
+                }
+            } else{
                 Table(self.unsinished) {
-                TableColumn("savedGames.table.column.date", value: \.date)
+                    TableColumn("savedGames.table.column.date") { result in
+                        Text(result.date, style: .date)
+                    }
                     TableColumn("savedGames.table.column.players") { result in
                         Text("\(result.player1) savedGames.table.column.players.entry \(result.player2)")
                     }
@@ -37,11 +56,12 @@ struct ScoreTable: View {
             }
         }
     }
+}
 
 struct Result: Identifiable {
     let id = UUID()
     
-    let date: String
+    let date: Date
     let player1: String
     let player2: String
     let rules: String