Inspector scroll view positioning/sizing

Author: ole

Sources/LayoutInspector/DebugLayoutImpl.swift

@@ -7,6 +7,7 @@ struct InspectLayout: ViewModifier {
     @State private var generation: Int = 0
     @State private var inspectorFrame: CGRect = CGRect(x: 0, y: 0, width: 300, height: 300)
     @State private var contentSize: CGSize? = nil
+    @State private var tableSize: CGSize? = nil
     @State private var isPresentingInfoPanel: Bool = false
 
     private static let coordSpaceName = "InspectLayout"
@@ -34,23 +35,31 @@ struct InspectLayout: ViewModifier {
     }
 
     @ViewBuilder private var inspectorUI: some View {
-        LogEntriesGrid(logEntries: logStore.log, highlight: $selectedView)
-            .safeAreaInset(edge: .bottom) {
-                toolbar
-            }
-            .resizableAndDraggable(
-                frame: $inspectorFrame,
-                coordinateSpace: .named(Self.coordSpaceName)
-            )
-            .background {
-                Rectangle().fill(.thickMaterial)
-                    .shadow(radius: 5)
-            }
-            .cornerRadius(4)
-            .overlay {
-                RoundedRectangle(cornerRadius: 4)
-                    .strokeBorder(.quaternary)
-            }
+        ScrollView([.vertical, .horizontal]) {
+            LogEntriesGrid(logEntries: logStore.log, highlight: $selectedView)
+                .measureSize { size in
+                    tableSize = size
+                }
+        }
+        .frame(maxWidth: tableSize?.width, maxHeight: tableSize?.height)
+        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
+        .safeAreaInset(edge: .bottom) {
+            toolbar
+        }
+        .font(.subheadline)
+        .resizableAndDraggable(
+            frame: $inspectorFrame,
+            coordinateSpace: .named(Self.coordSpaceName)
+        )
+        .background {
+            Rectangle().fill(.thickMaterial)
+                .shadow(radius: 5)
+        }
+        .cornerRadius(4)
+        .overlay {
+            RoundedRectangle(cornerRadius: 4)
+                .strokeBorder(.quaternary)
+        }
     }
 
     @ViewBuilder private var toolbar: some View {

Sources/LayoutInspector/LogEntriesGrid.swift

@@ -19,59 +19,59 @@ public struct LogEntriesGrid: View {
     }
 
     public var body: some View {
-        ScrollView([.vertical, .horizontal]) {
-            Grid(alignment: .leadingFirstTextBaseline, horizontalSpacing: 0, verticalSpacing: 0) {
-                // Table header row
-                GridRow {
-                    Text("View")
-                    Text("Proposal")
-                    Text("Response")
-                }
-                .font(.headline)
+        Grid(
+            alignment: .leadingFirstTextBaseline,
+            horizontalSpacing: 0,
+            verticalSpacing: 0
+        ) {
+            // Table header row
+            GridRow {
+                Text("View")
+                Text("Proposal")
+                Text("Response")
+            }
+            .bold()
+            .padding(.vertical, Self.tableRowVerticalPadding)
+            .padding(.horizontal, Self.tableRowHorizontalPadding)
+
+            // Table header separator line
+            Rectangle().fill(.secondary)
+                .frame(height: 1)
+                .gridCellUnsizedAxes(.horizontal)
                 .padding(.vertical, Self.tableRowVerticalPadding)
                 .padding(.horizontal, Self.tableRowHorizontalPadding)
 
-                // Table header separator line
-                Rectangle().fill(.secondary)
-                    .frame(height: 1)
-                    .gridCellUnsizedAxes(.horizontal)
-                    .padding(.vertical, Self.tableRowVerticalPadding)
-                    .padding(.horizontal, Self.tableRowHorizontalPadding)
+            // Table rows
+            ForEach(logEntries) { item in
+                let isSelected = highlight == item.label
+                GridRow {
+                    HStack(spacing: 0) {
+                        indentation(level: item.indent)
+                        Text(item.label)
+                    }
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
 
-                // Table rows
-                ForEach(logEntries) { item in
-                    let isSelected = highlight == item.label
-                    GridRow {
-                        HStack(spacing: 0) {
-                            indentation(level: item.indent)
-                            Text(item.label)
-                                .font(.body)
-                        }
+                    Text(item.proposal?.pretty ?? "…")
+                        .monospacedDigit()
+                        .fixedSize()
                         .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
 
-                        Text(item.proposal?.pretty ?? "…")
-                            .monospacedDigit()
-                            .fixedSize()
-                            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
-
-                        Text(item.response?.pretty ?? "…")
-                            .monospacedDigit()
-                            .fixedSize()
-                            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
-                    }
-                    .font(.callout)
-                    .padding(.vertical, Self.tableRowVerticalPadding)
-                    .padding(.horizontal, Self.tableRowHorizontalPadding)
-                    .foregroundColor(isSelected ? .white : nil)
-                    .background(isSelected ? Color.accentColor : .clear)
-                    .contentShape(Rectangle())
-                    .onTapGesture {
-                        highlight = isSelected ? nil : item.label
-                    }
+                    Text(item.response?.pretty ?? "…")
+                        .monospacedDigit()
+                        .fixedSize()
+                        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
+                }
+                .padding(.vertical, Self.tableRowVerticalPadding)
+                .padding(.horizontal, Self.tableRowHorizontalPadding)
+                .foregroundColor(isSelected ? .white : nil)
+                .background(isSelected ? Color.accentColor : .clear)
+                .contentShape(Rectangle())
+                .onTapGesture {
+                    highlight = isSelected ? nil : item.label
                 }
             }
-            .padding(.vertical, 8)
         }
+        .padding(.vertical, 8)
     }
 
     private func indentation(level: Int) -> some View {