adapt macOS 26 SwiftUI behavior changes with minor tweaks

* Picker no longer occupies full width
* Stepper becomes wide enough for UX, with minus button becoming ugly
* Give padding top and bottom
* Replace unnecessary Grid and ZStack with VStack
* Unify and enlarge clickable area of +/-/up buttons on List

Author: eagleoflqj

src/config/imageoptionview.swift

@@ -12,7 +12,7 @@ struct ImageOptionView: OptionView {
   @ObservedObject var model: ImageOption
 
   var body: some View {
-    VStack {
+    VStack(alignment: .leading) {  // Avoid layout shift of Picker when switching modes.
       Picker("", selection: $model.mode) {
         ForEach(Array(modes.enumerated()), id: \.0) { idx, mode in
           Text(mode)

src/config/inputmethod.swift

@@ -135,7 +135,7 @@ struct InputMethodConfigView: View {
         if let configModel = viewModel.configModel {
           VStack {
             let scrollView = ScrollView([.vertical]) {
-              buildView(config: configModel).padding([.leading, .trailing])
+              buildView(config: configModel).padding()
             }
             if #available(macOS 14.0, *) {
               scrollView.defaultScrollAnchor(.topTrailing)

src/config/navigationsplit.swift

@@ -28,13 +28,13 @@ struct ListConfigView: View {
     } detail: {
       if key == "theme" {
         TextField(NSLocalizedString("Type here to preview style", comment: ""), text: $dummyText)
-          .padding()
+          .padding([.top, .leading, .trailing])
       }
       ScrollView {
         if let config = viewModel.selectedConfig {
-          buildView(config: config).padding([.leading, .trailing])
+          buildView(config: config).padding()
         }
-      }.padding([.top], 1)
+      }.padding([.top], 1)  // Cannot be 0 otherwise content overlaps with title bar.
       footer(
         reset: {
           // Reset only current page.

src/config/optionviews.swift

@@ -91,7 +91,7 @@ struct IntegerOptionView: OptionView {
   @FocusState private var isFocused: Bool
 
   var body: some View {
-    ZStack(alignment: .trailing) {
+    HStack {
       TextField(label, value: $model.value, formatter: numberFormatter)
         .focused($isFocused)
         .textFieldStyle(RoundedBorderTextFieldStyle())
@@ -100,19 +100,30 @@ struct IntegerOptionView: OptionView {
             validate()
           }
         }
-        .padding(.trailing, 60)
-      HStack(spacing: 0) {
-        Button {
+      if #available(macOS 26.0, *) {
+        Stepper {
+        } onIncrement: {
+          model.value += 1
+          validate()
+        } onDecrement: {
           model.value -= 1
           validate()
-        } label: {
-          Image(systemName: "minus")
         }
-        Button {
-          model.value += 1
-          validate()
-        } label: {
-          Image(systemName: "plus")
+      } else {
+        // Stepper is too narrow.
+        HStack(spacing: 0) {
+          Button {
+            model.value -= 1
+            validate()
+          } label: {
+            Image(systemName: "minus")
+          }
+          Button {
+            model.value += 1
+            validate()
+          } label: {
+            Image(systemName: "plus")
+          }
         }
       }
     }
@@ -241,8 +252,8 @@ struct ExternalOptionView: OptionView {
     .sheet(isPresented: $viewModel.hasConfig) {
       VStack {
         ScrollView([.vertical]) {
-          buildView(config: viewModel.externalConfig!).padding([.leading, .trailing])
-        }.padding([.top])
+          buildView(config: viewModel.externalConfig!).padding()
+        }
         footer(
           reset: {
             viewModel.externalConfig?.resetToDefault()
@@ -297,28 +308,34 @@ struct ListOptionView<T: Option & EmptyConstructible>: OptionView {
           AnyView(buildViewImpl(label: "", option: element.value))
 
           let index = findElementIndex(element)
-          Button(action: { moveUp(index: index) }) {
-            Image(systemName: "arrow.up")
+          Button {
+            moveUp(index: index)
+          } label: {
+            Image(systemName: "arrow.up").square()
           }
           .disabled(index == 0)
           .buttonStyle(BorderlessButtonStyle())
 
-          Button(action: { remove(at: index) }) {
-            Image(systemName: "minus")
-              .frame(maxHeight: .infinity)
-              .contentShape(Rectangle())
+          Button {
+            remove(at: index)
+          } label: {
+            Image(systemName: "minus").square()
           }
           .buttonStyle(BorderlessButtonStyle())
 
-          Button(action: { add(at: index) }) {
-            Image(systemName: "plus")
+          Button {
+            add(at: index)
+          } label: {
+            Image(systemName: "plus").square()
           }
           .buttonStyle(BorderlessButtonStyle())
         }
       }
 
-      Button(action: { add(at: model.value.count) }) {
-        Image(systemName: "plus")
+      Button {
+        add(at: model.value.count)
+      } label: {
+        Image(systemName: "plus").square()
       }
       .buttonStyle(BorderlessButtonStyle())
       .frame(maxWidth: .infinity, alignment: .trailing)
@@ -476,17 +493,16 @@ struct GroupOptionView: OptionView {
   let children: [Config]
 
   var body: some View {
-    Grid(alignment: .topLeading) {
+    VStack(alignment: .leading, spacing: 8) {
       ForEach(children) { child in
         let subView = buildViewImpl(config: child)
         let subLabel = Text(subView.label)
         if subView is GroupOptionView {
           // If this is a nested group, put it inside a box, and let
           // it span two columns.
-          GridRow {
+          VStack(alignment: .leading, spacing: 4) {
             subLabel
               .font(.title3)
-              .gridCellColumns(2)
               .help(NSLocalizedString("Right click to reset this group", comment: ""))
               .contextMenu {
                 Button {
@@ -495,21 +511,19 @@ struct GroupOptionView: OptionView {
                   Text("Reset to default")
                 }
               }
-          }
-          GridRow {
             GroupBox {
               AnyView(subView)
-            }.gridCellColumns(2)
+            }
           }
         } else {
           // Otherwise, put the label in the left column and the
           // content in the right column.
-          GridRow {
+          HStack(spacing: 16) {
             if subView is ExternalOptionView {
-              HStack {}  // Label is baked in button.
+              Spacer().frame(maxWidth: .infinity)  // Label is baked in button.
             } else {
               subLabel
-                .frame(minWidth: 100, maxWidth: 250, alignment: .trailing)
+                .frame(maxWidth: .infinity, alignment: .trailing)
                 .help(NSLocalizedString("Right click to reset this item", comment: ""))
                 .contextMenu {
                   Button {
@@ -520,6 +534,7 @@ struct GroupOptionView: OptionView {
                 }
             }
             AnyView(subView)
+              .frame(maxWidth: .infinity, alignment: .leading)
           }
         }
       }

src/config/ui.swift

@@ -18,6 +18,11 @@ extension View {
       Image(systemName: "questionmark.circle.fill").help(text)
     }
   }
+
+  // Enlarge clickable area for border-less icon button, especially minus.
+  func square() -> some View {
+    self.frame(width: 20, height: 20).background(Color.black.opacity(0.001))
+  }
 }
 
 func footer(reset: @escaping () -> Void, apply: @escaping () -> Void, close: @escaping () -> Void)