Render alt text

MastodonSDK/Sources/MastodonUI/View/Content/MediaAltTextOverlay.swift

@@ -14,15 +14,33 @@ struct MediaAltTextOverlay: View {
     @State private var showingAlt = false
 
     var body: some View {
-        HStack {
-            VStack {
-                Spacer(minLength: 0)
-                if altDescription != nil {
-                    Button("ALT") {}
-                        .buttonStyle(AltButtonStyle())
+        GeometryReader { geom in
+            ZStack {
+                if let altDescription {
+                    if showingAlt {
+                        HStack(alignment: .top) {
+                            Text(altDescription)
+                            Spacer()
+                            Button(action: { showingAlt = false }) {
+                                Image(systemName: "xmark.circle.fill")
+                                    .frame(width: 20, height: 20)
+                            }
+                        }
+                        .padding(8)
+                        .frame(width: geom.size.width)
+                        .fixedSize()
+                    } else {
+                        Button("ALT") { showingAlt = true }
+                            .fixedSize()
+                            .buttonStyle(AltButtonStyle())
+                    }
                 }
             }
-            Spacer(minLength: 0)
+            .foregroundColor(.white)
+            .tint(.white)
+            .background(Color.black.opacity(0.85))
+            .cornerRadius(4)
+            .frame(width: geom.size.width, height: geom.size.height, alignment: .bottomLeading)
         }
         .padding(.horizontal, 16)
         .padding(.vertical, 8)
@@ -34,29 +52,21 @@ struct MediaAltTextOverlay: View {
 
 @available(iOS 15.0, *)
 private struct AltButtonStyle: ButtonStyle {
-    @Environment(\.pixelLength) private var pixelLength
     func makeBody(configuration: Configuration) -> some View {
         configuration.label
             .font(.caption.weight(.semibold))
-            .foregroundColor(.white)
             .padding(.horizontal, 8)
             .padding(.vertical, 3)
-            .background(Color.black.opacity(0.85))
-            .cornerRadius(4)
             .opacity(configuration.isPressed ? 0.5 : 1)
-            .overlay(
-                .white.opacity(0.4),
-                in: RoundedRectangle(cornerRadius: 4)
-                    .inset(by: -0.5)
-                    .stroke(lineWidth: 0.5)
-            )
     }
 }
 
 @available(iOS 15.0, *)
 struct MediaAltTextOverlay_Previews: PreviewProvider {
     static var previews: some View {
-        MediaAltTextOverlay(altDescription: nil)
         MediaAltTextOverlay(altDescription: "Hello, world!")
+            .frame(height: 300)
+            .background(Color.gray)
+            .previewLayout(.sizeThatFits)
     }
 }