Jul 29 - Update codes to support iPhone

JanitorialQC/Views/Inspection/InspectionHistoryView.swift

@@ -668,6 +668,8 @@ struct ReadOnlyGridFormView: View {
     let schema: [[String: Any]]
     let formValues: [String: String]
 
+    @Environment(\.horizontalSizeClass) private var hSizeClass
+
     // ── Field visibility filtering ────────────────────────────────────────
 
     // A row group: all visible fields that share the same original `row`.
@@ -767,9 +769,13 @@ struct ReadOnlyGridFormView: View {
                 .background(Color(.secondarySystemBackground))
                 .clipShape(RoundedRectangle(cornerRadius: 12))
         } else {
-            VStack(alignment: .leading, spacing: 3) {
+            VStack(alignment: .leading, spacing: hSizeClass == .compact ? 10 : 3) {
                 ForEach(visibleRowGroups.indices, id: \.self) { idx in
-                    rowView(visibleRowGroups[idx])
+                    if hSizeClass == .compact {
+                        stackedRowView(visibleRowGroups[idx])
+                    } else {
+                        rowView(visibleRowGroups[idx])
+                    }
                 }
             }
             .padding(12)
@@ -782,6 +788,11 @@ struct ReadOnlyGridFormView: View {
     // Render one row as a GeometryReader-based HStack so each field
     // occupies exactly (colSpan/12) of the available width, and leading
     // space before col > 1 is filled with a transparent spacer.
+    //
+    // On a narrow screen the same 12-column division that works on iPad
+    // leaves each field a few dozen points wide inside a fixed 36 pt row, so
+    // labels and values collide. Below `minGridWidth` each field gets its own
+    // full-width line at its natural height instead.
     @ViewBuilder
     private func rowView(_ group: RowGroup) -> some View {
         GeometryReader { geo in
@@ -808,6 +819,24 @@ struct ReadOnlyGridFormView: View {
         .frame(height: rowHeight(group))
     }
 
+    /// Stacked equivalent of `rowView` for narrow screens: no proportional
+    /// widths, no fixed row height, so nothing can overlap.
+    @ViewBuilder
+    private func stackedRowView(_ group: RowGroup) -> some View {
+        VStack(alignment: .leading, spacing: 8) {
+            ForEach(group.fields.indices, id: \.self) { i in
+                let f     = group.fields[i]
+                let fid   = f["id"] as? String ?? (f["id"] as? Int).map(String.init) ?? ""
+                let value = formValues[fid] ?? ""
+                let ftype = f["type"] as? String ?? "text"
+                let label = f["label"] as? String ?? ""
+
+                ReadOnlyCellView(field: f, value: value, fieldType: ftype, label: label)
+                    .frame(maxWidth: .infinity, alignment: .topLeading)
+            }
+        }
+    }
+
     // Row height: fixed 36pt for most fields; taller for section headers.
     private func rowHeight(_ group: RowGroup) -> CGFloat {
         let hasSection = group.fields.contains { ($0["type"] as? String) == "section" }