Fix alignment bugs in frame modifiers.

Sources/Ignite/Elements/ZStack.swift

@@ -45,7 +45,6 @@ public struct ZStack: HTML {
             elementAttributes.append(classes: "mb-0")
             elementAttributes.append(styles: [
                 .init(.position, value: "relative"),
-                .init(.display, value: "grid"),
                 .init(.gridArea, value: "1/1"),
                 .init(.zIndex, value: "\(index)")
             ])
@@ -61,20 +60,3 @@ public struct ZStack: HTML {
         return "<div\(attributes)>\(content)</div>"
     }
 }
-
-private extension Alignment {
-    /// Alignment rules for the items of containers
-    var itemAlignmentRules: [InlineStyle] {
-        switch (horizontal, vertical) {
-        case (.leading, .top):      [.init(.alignSelf, value: "flex-start"), .init(.justifySelf, value: "flex-start")]
-        case (.center, .top):       [.init(.alignSelf, value: "flex-start"), .init(.justifySelf, value: "center")]
-        case (.trailing, .top):     [.init(.alignSelf, value: "flex-start"), .init(.justifySelf, value: "flex-end")]
-        case (.leading, .center):   [.init(.alignSelf, value: "center"), .init(.justifySelf, value: "flex-start")]
-        case (.center, .center):    [.init(.alignSelf, value: "center"), .init(.justifySelf, value: "center")]
-        case (.trailing, .center):  [.init(.alignSelf, value: "center"), .init(.justifySelf, value: "flex-end")]
-        case (.leading, .bottom):   [.init(.alignSelf, value: "flex-end"), .init(.justifySelf, value: "flex-start")]
-        case (.center, .bottom):    [.init(.alignSelf, value: "flex-end"), .init(.justifySelf, value: "center")]
-        case (.trailing, .bottom):  [.init(.alignSelf, value: "flex-end"), .init(.justifySelf, value: "flex-end")]
-        }
-    }
-}

Sources/Ignite/Framework/ElementTypes/HTML.swift

@@ -84,6 +84,11 @@ extension HTML {
     var isText: Bool {
         body is Text || (body as? AnyHTML)?.wrapped is Text
     }
+
+    /// A Boolean value indicating whether this represents `Image`.
+    var isImage: Bool {
+        self is Image || (self as? AnyHTML)?.wrapped is Image
+    }
 }
 
 extension HTML {

Sources/Ignite/Modifiers/ContainerRelativeFrame.swift

@@ -23,13 +23,19 @@ private let edgeAlignmentRules: [InlineStyle] = [
 
 private extension HTML {
     func containerRelativeFrameModifer(_ alignment: Alignment) -> any HTML {
-        let frameableContent: any HTML = self is Section ?
-            self.style(.marginBottom, "0") :
-            Section(self.style(.marginBottom, "0"))
+        var frameableContent: any HTML = self
+            .style(.marginBottom, "0")
+            .style(alignment.itemAlignmentRules)
+
+        frameableContent = if self is Section {
+            frameableContent
+        } else {
+            Section(frameableContent)
+        }
 
         return frameableContent
             .style(.display, "flex")
-            .style(.flexDirection, "column")
+            .style(self.isImage ? .init(.flexDirection, value: "column") : nil)
             .style(.overflow, "hidden")
             .style(edgeAlignmentRules)
             .style(alignment.flexAlignmentRules)

Sources/Ignite/Modifiers/Frame.swift

@@ -172,12 +172,15 @@ private extension HTML {
 
         if let alignment {
             // Create a positioning context with the specified frame for the modified element
-            return Section(self)
-                .style(.display, "flex")
-                .style(.flexDirection, "column")
-                .style(.overflow, "hidden")
-                .style(alignment.flexAlignmentRules)
-                .style(dimensions)
+            return Section {
+                self.style(alignment.itemAlignmentRules)
+                    .style(self.isImage ? dimensions : [])
+            }
+            .style(.display, "flex")
+            .style(self.isImage ? .init(.flexDirection, value: "column") : nil)
+            .style(.overflow, "hidden")
+            .style(alignment.flexAlignmentRules)
+            .style(dimensions)
         }
 
         // Apply the frame to the modified element directly

Sources/Ignite/Types/Alignment.swift

@@ -68,4 +68,19 @@ extension Alignment {
         case (.trailing, .bottom): [.init(.alignItems, value: "flex-end"), .init(.justifyContent, value: "flex-end")]
         }
     }
+
+    /// Alignment rules for the items of containers
+    var itemAlignmentRules: [InlineStyle] {
+        switch (horizontal, vertical) {
+        case (.leading, .top):      [.init(.alignSelf, value: "flex-start"), .init(.justifySelf, value: "flex-start")]
+        case (.center, .top):       [.init(.alignSelf, value: "flex-start"), .init(.justifySelf, value: "center")]
+        case (.trailing, .top):     [.init(.alignSelf, value: "flex-start"), .init(.justifySelf, value: "flex-end")]
+        case (.leading, .center):   [.init(.alignSelf, value: "center"), .init(.justifySelf, value: "flex-start")]
+        case (.center, .center):    [.init(.alignSelf, value: "center"), .init(.justifySelf, value: "center")]
+        case (.trailing, .center):  [.init(.alignSelf, value: "center"), .init(.justifySelf, value: "flex-end")]
+        case (.leading, .bottom):   [.init(.alignSelf, value: "flex-end"), .init(.justifySelf, value: "flex-start")]
+        case (.center, .bottom):    [.init(.alignSelf, value: "flex-end"), .init(.justifySelf, value: "center")]
+        case (.trailing, .bottom):  [.init(.alignSelf, value: "flex-end"), .init(.justifySelf, value: "flex-end")]
+        }
+    }
 }

Tests/IgniteTesting/Elements/ZStack.swift

@@ -30,9 +30,9 @@ class ZStackTests: IgniteTestSuite {
 
         #expect(output == """
         <div style="display: grid">\
-        <label class="mb-0" style="position: relative; display: grid; grid-area: 1/1; \
+        <label class="mb-0" style="position: relative; grid-area: 1/1; \
         z-index: 0; align-self: center; justify-self: center">Top Label</label>\
-        <label class="mb-0" style="position: relative; display: grid; grid-area: 1/1; \
+        <label class="mb-0" style="position: relative; grid-area: 1/1; \
         z-index: 1; align-self: center; justify-self: center">Bottom Label</label>\
         </div>
         """)