Fix icon button style and detail list padding

ExampleProject/ExampleProject/example/style/IconButtonStyle.swift

@@ -12,16 +12,29 @@ struct IconButtonStyle: ButtonStyle {
    var bgColor: Color //.opacity(0.8)
    var fillColor: Color
    /**
-    * makeBody Method: This method sets up the view for the button. It uses an Image view with the system icon name provided. The icon's foreground color, font size, padding, background color, and corner radius are set according to the instructions.
+    * This method sets up the view for the button. It uses an Image view with the system icon name provided. The icon's foreground color, font size, padding, background color, and corner radius are set according to the instructions.
+    * - Note: Square Background: The ZStack ensures the background is uniformly square (40x40 in this case).
+    * - Note: Icon Aspect Ratio: By using .aspectRatio(contentMode: .fit) and constraining the icon's maximum size (frame(maxWidth: 24, maxHeight: 24)), the icon will maintain its aspect ratio and fit within the square.
+    * - Note: Background: The bgColor background is defined as a square with rounded corners using .clipShape(RoundedRectangle(cornerRadius: 8)).
+    * - Note: Now, no matter what the shape of the icon is, the background will always be square, and the icon will fit neatly within that square. You can adjust the frame(width: height:) values to make the background larger or smaller as needed.
+    * - Fixme: ⚠️️ try to make all this relativly sized etc
     */
    func makeBody(configuration: Configuration) -> some View {
-      Image(systemName: iconName)
-         .foregroundColor(fillColor) // Icon fill color
-         .font(.system(size: 24)) // Icon size
-         .padding(4) // Padding around icon
-         .background(bgColor) // Background color
-         .clipShape(RoundedRectangle(cornerRadius: 8)) // Rounded corners
-         .scaleEffect(configuration.isPressed ? 0.9 : 1.0)
+      ZStack {
+         // Ensuring the background is always square
+         bgColor
+            .clipShape(RoundedRectangle(cornerRadius: 8))
+            .frame(width: 36, height: 36) // Background is square
+
+         // Icon with aspect ratio maintained
+         Image(systemName: iconName)
+            .foregroundColor(fillColor)
+            .font(.system(size: 20)) // Icon size
+            .aspectRatio(contentMode: .fit) // Maintain aspect ratio for the icon
+            .frame(maxWidth: 20, maxHeight: 20) // Limit the icon's size within the square
+      }
+      .scaleEffect(configuration.isPressed ? 0.9 : 1.0)
+      .animation(.easeInOut, value: configuration.isPressed) // Optional: animation for press effect
    }
 }
 /**
@@ -37,7 +50,11 @@ extension Button {
     * - Returns: A view modifier that applies the specified IconButtonStyle to the button.
     */
    func iconButtonStyle(iconName: String, bgColor: Color = Color.darkGray, fillColor: Color = Color.whiteOrBlack.opacity(0.8)) -> some View {
-      let style = IconButtonStyle(iconName: iconName, bgColor: bgColor, fillColor: fillColor)
+      let style = IconButtonStyle(
+         iconName: iconName,
+         bgColor: bgColor,
+         fillColor: fillColor
+      )
       return self.buttonStyle(style)
    }
 }
@@ -49,6 +66,8 @@ extension Button {
    Button(action: {
       Swift.print("press")
    }) {}
-   .iconButtonStyle(iconName: "square.lefthalf.fill")
+   .iconButtonStyle(iconName: "arrow.left.and.right") // square.lefthalf.fill or arrow.left.and.right.square
    .environment(\.colorScheme, .dark) // dark
 }
+
+

ExampleProject/ExampleProject/example/util/CustomColumnWidth.swift

@@ -12,7 +12,6 @@ public struct CustomColumnWidth: ColumnWidthKind {
    // - Note: Must be present when struct is public
    public init() {}
 }
-
 #if os(iOS)
 extension CustomColumnWidth {
    /**
@@ -27,6 +26,7 @@ extension CustomColumnWidth {
          isLandscape: isLandscape,
          winWidth: winWidth
       )
+      Swift.print("✨ sideBarColumn - isNarrow:  \(isNarrow) - isLandscape: \(isLandscape)")
       return .init(
          min: nil,
          ideal: isNarrow ? 200 : 340,
@@ -45,6 +45,7 @@ extension CustomColumnWidth {
          isLandscape: isLandscape,
          winWidth: winWidth
       )
+      Swift.print("✨ mainColumn - isNarrow: \(isNarrow) isLandscape: \(isLandscape)")
       return .init(
          min: nil,
          ideal: isNarrow ? 240 : 300,
@@ -59,7 +60,8 @@ extension CustomColumnWidth {
     * - Returns: A `ColumnWidth` instance with the ideal width set to 500. The minimum and maximum widths are not set (nil).
     */
    public func detailColumn(winWidth: CGFloat) -> ColumnWidth? { /*deviceOrientation: UIDeviceOrientation = */ /*isLandScape: Bool = isLandscape, */
-      .init(
+      Swift.print("✨ detailColumn: \(winWidth) isLandscape: \(isLandscape)")
+      return .init(
          min: nil, // deviceOrientation.isLandscape ? 500 : 400,
          ideal: 500,
          max: nil

ExampleProject/ExampleProject/example/view/detail/DetailList/DetailList+Content.swift

@@ -12,6 +12,8 @@ extension DetailList {
             getRow(title: title)
          }
       }
+      // - Fixme: ⚠️️ this should be 12. like main and sidebar. not sure why it isnt, figure it out
+      .padding(.vertical, 24) // - Fixme: ⚠️️ doc this etc
    }
 }
 /**

ExampleProject/ExampleProject/example/view/detail/DetailView+Content.swift

@@ -20,7 +20,6 @@ extension DetailView {
          .ignoresSafeArea(.all)
          // .toolbar(.hidden, for: .navigationBar) // Hides default navbar (⚠️️ seems like this is needed here aswell)
          #endif
-         .padding(.vertical, 12) // - Fixme: ⚠️️ doc this etc
    }
 }
 /**

ExampleProject/ExampleProject/example/view/main/MainView+Content.swift

@@ -44,7 +44,7 @@ extension MainView {
          mainList
          Spacer() // Pins the stack to the top
       }
-      .contentMargins(.horizontal, .zero) // Sets the horizontal margins of the content to zero, effectively aligning the content flush with the horizontal edges of its container.
+//      .contentMargins(.horizontal, .zero) // Sets the horizontal margins of the content to zero, effectively aligning the content flush with the horizontal edges of its container.
       .background(isTest ? .blue.opacity(0.3) : .whiteOrBlack.opacity(0.07)) // ⚠️️ debug
 
    }

Sources/SplitViewKit/modifier/DetailViewModifier.swift

@@ -7,14 +7,16 @@ struct DetailViewModifier: ViewModifier {
     * The width of the window in which the detail view is displayed.
     */
    let winWidth: CGFloat
-   // - Fixme: ⚠️️ add doc
+   /**
+    * - Fixme: ⚠️️ add doc
+    */
    let columnWidth: ColumnWidthKind
    /**
     * Body
-    * - Note: there is also: `navigationSplitViewColumnWidth`
-    * - Fixme: ⚠️️ remove the optionality in columnWidth
-    * - Fixme: ⚠️️ add doc regarding why columnWidth is optional
-    * - Fixme: ⚠️️ add description
+    * - Note: There is also: `navigationSplitViewColumnWidth`
+    * - Fixme: ⚠️️ Remove the optionality in columnWidth
+    * - Fixme: ⚠️️ Add doc regarding why columnWidth is optional
+    * - Fixme: ⚠️️ Add description
     */
    func body(content: Content) -> some View {
       if let columnWidth = columnWidth.detailColumn(winWidth: winWidth) {

Sources/SplitViewKit/util/ColumnWidth/ColumnWidthKind.swift

@@ -29,7 +29,8 @@ public protocol ColumnWidthKind {
    func detailColumn(winWidth: CGFloat) -> ColumnWidth?
 }
 /**
- * Defaults
+ * Defaults (overriden by implementer)
+ * - Fixme: ⚠️️ add more description
  */
 extension ColumnWidthKind {
    public func sideBarColumn(winWidth: CGFloat) -> ColumnWidth? {
@@ -47,16 +48,17 @@ extension ColumnWidthKind {
  */
 extension ColumnWidthKind {
    /**
+    * - Abstract: - Fixme: ⚠️️ add this
+    * - Description: This function checks if the window is considered narrow based on the device orientation and window width.
     * - Fixme: ⚠️️ rename to isNarrowFit or isSnugFit?
     * - Fixme: ⚠️️ add doc
     * - Fixme: ⚠️️ move into UIDeviceOrientation scope? or some scope
-    * - Description: This function checks if the window is considered narrow based on the device orientation and window width.
     * - Parameters:
     *   - winWidth: The width of the window.
     *   - isLandscape: A Boolean value indicating whether the device is in landscape orientation.
     * - Returns: A Boolean value indicating whether the window is considered narrow.
     */
-   public func isNarrow(isLandscape: Bool = true, winWidth: CGFloat) -> Bool { /*deviceOrientation: UIDeviceOrientation*/
+   public func isNarrow(isLandscape: Bool = true, winWidth: CGFloat) -> Bool {
       #if os(iOS)
       let isWindowWidthLessThanScreenWidth: Bool = winWidth < UIScreen.main.bounds.width
       return !isLandscape || isWindowWidthLessThanScreenWidth // deviceOrientation.isPortrait