From ad3e89a5c34a1a2769caf622322e2072e1c2c14c Mon Sep 17 00:00:00 2001
From: Alexander Harding <noreply@harding.dev>
Date: Tue, 3 Dec 2024 20:49:19 -0500
Subject: [PATCH] feat: multiline alt text (#1765)

---
 src/core/globalCssOverrides.css               |  5 ++++
 .../media/gallery/actions/AltText.module.css  | 10 ++++++++
 .../media/gallery/actions/AltText.tsx         |  2 +-
 .../gallery/actions/ImageMoreActions.tsx      |  2 +-
 .../media/gallery/actions/shared.module.css   | 24 ++++++++++++++++---
 src/features/post/new/PostEditorRoot.tsx      |  4 +++-
 6 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/core/globalCssOverrides.css b/src/core/globalCssOverrides.css
index 3461fd2614..a592497a54 100644
--- a/src/core/globalCssOverrides.css
+++ b/src/core/globalCssOverrides.css
@@ -124,6 +124,11 @@ ion-alert.preserve-newlines {
   display: none;
 }
 
+.pswp__hide-on-close {
+  /* Photoswipe `will-change: opacity` breaks alt text backdrop-filter (when opened) */
+  will-change: auto !important;
+}
+
 ion-action-sheet .detail::before {
   content: "";
   z-index: 1;
diff --git a/src/features/media/gallery/actions/AltText.module.css b/src/features/media/gallery/actions/AltText.module.css
index 2342ba2bba..e8d2d08cd1 100644
--- a/src/features/media/gallery/actions/AltText.module.css
+++ b/src/features/media/gallery/actions/AltText.module.css
@@ -2,6 +2,12 @@
   max-width: 600px;
   width: 100%;
 
+  margin-top: calc(
+    var(--ion-safe-area-top, env(safe-area-inset-top, 0)) + 50px
+  );
+
+  overflow-y: auto;
+
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -46,6 +52,8 @@
   line-height: 1.2;
 
   position: relative;
+
+  white-space: pre-wrap;
 }
 
 .clamped {
@@ -57,4 +65,6 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
+
+  white-space: initial;
 }
diff --git a/src/features/media/gallery/actions/AltText.tsx b/src/features/media/gallery/actions/AltText.tsx
index 2cf74b5b9b..a88f56ed5c 100644
--- a/src/features/media/gallery/actions/AltText.tsx
+++ b/src/features/media/gallery/actions/AltText.tsx
@@ -14,7 +14,7 @@ export default function AltText({ alt }: AltTextProps) {
   if (!alt) return;
 
   return (
-    <div className={styles.container}>
+    <div className={cx("alt-text", styles.container)}>
       <div
         className={styles.text}
         onClick={() => setShouldClampAltText((v) => !v)}
diff --git a/src/features/media/gallery/actions/ImageMoreActions.tsx b/src/features/media/gallery/actions/ImageMoreActions.tsx
index 89ff374f10..a0e24bd4c0 100644
--- a/src/features/media/gallery/actions/ImageMoreActions.tsx
+++ b/src/features/media/gallery/actions/ImageMoreActions.tsx
@@ -25,7 +25,7 @@ export default function ImageMoreActions({
       {alt && (
         <BottomContainer>
           <AltText alt={alt} />
-          <BottomContainerActions withBg={false} />
+          <BottomContainerActions withBg={!!alt} />
         </BottomContainer>
       )}
     </>
diff --git a/src/features/media/gallery/actions/shared.module.css b/src/features/media/gallery/actions/shared.module.css
index d2cbd49b57..5a728b7098 100644
--- a/src/features/media/gallery/actions/shared.module.css
+++ b/src/features/media/gallery/actions/shared.module.css
@@ -4,18 +4,22 @@
   right: 0;
   left: 0;
 
+  max-height: 100%;
+
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  --topPadding: 4rem;
+  > *:not(.bottomContainerActions) {
+    position: relative;
+    z-index: 1;
+  }
 }
 
 .bottomContainerActions {
   width: 100%;
 
   padding: 1rem;
-  padding-top: var(--topPadding);
   padding-bottom: calc(
     1rem + var(--ion-safe-area-bottom, env(safe-area-inset-bottom, 0))
   );
@@ -30,5 +34,19 @@
 }
 
 .withBg {
-  background: linear-gradient(0deg, rgba(0, 0, 0, 1), transparent);
+  &:after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+
+    background: linear-gradient(0deg, rgba(0, 0, 0, 1), transparent);
+  }
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
 }
diff --git a/src/features/post/new/PostEditorRoot.tsx b/src/features/post/new/PostEditorRoot.tsx
index c91d552dde..a08c4a03cd 100644
--- a/src/features/post/new/PostEditorRoot.tsx
+++ b/src/features/post/new/PostEditorRoot.tsx
@@ -339,9 +339,11 @@ export default function PostEditorRoot({
       message: "Add an accessible caption",
       inputs: [
         {
+          type: "textarea",
           value: altText,
-          placeholder: "Fluffy fur blankets the feline...",
+          placeholder: "Fluffy fur blankets the feline",
           name: "altText",
+          attributes: { rows: 3 },
         },
       ],
       buttons: [