authorgravatar for maria@kuuro.netmaria <maria@kuuro.net> 2026-10-10 21:47:09-03:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-10-10 21:47:09-03:00
log0ecb25a8d45b7768bada974a9d6a99b17cf8bf49
tree54518636a7ef939a9284684d6005b7e44f3f8582
parente4ef8d36bad346e0b8c38da276329cc54a1cce6f
signature Signed by PGP key B5690EEEBB952194

fix(web): media preview centers its content and pins the close button (#17951)

1 files changed, 17 insertions(+), 16 deletions(-)

apps/web/src/components/chat/ExpandedImageDialog.tsx+17-16
......@@ -180,7 +180,7 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
180180 variant="media"
181181 showCloseButton={false}
182182 bottomStickOnMobile={false}
183 className="row-start-1 max-h-[92vh] w-[92vw] max-w-[92vw] items-center overflow-visible [--media-width:92vw] [--media-height:min(86vh,calc(100vh-160px))] sm:[--media-width:calc(92vw-96px)]"
183 className="row-start-1 h-full max-h-[92vh] w-[92vw] max-w-[92vw] items-center justify-center overflow-visible [--media-width:92vw] [--media-height:min(86vh,calc(100vh-160px))] sm:[--media-width:calc(92vw-96px)]"
184184 onKeyDown={onKeyDown}
185185 initialFocus={closeButtonRef}
186186 finalFocus={() => returnFocusTarget}
......@@ -189,12 +189,24 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
189189 }}
190190 >
191191 <DialogTitle className="sr-only">Expanded {mediaLabel} preview</DialogTitle>
192 {/* The stage keeps a fixed size, so the close button stays put whatever the media or caption. */}
193 <Button
194 type="button"
195 ref={closeButtonRef}
196 size="icon-sm"
197 variant="media-close"
198 className="absolute right-0 top-0 z-20"
199 onClick={onClose}
200 aria-label={`Close ${mediaLabel} preview`}
201 >
202 <XIcon />
203 </Button>
192204 {preview.images.length > 1 && (
193205 <Button
194206 type="button"
195207 size="icon"
196208 variant="media-navigation"
197 className="left-0 top-auto -bottom-12 translate-y-0 sm:top-1/2 sm:bottom-auto sm:-translate-y-1/2"
209 className="left-0 top-auto bottom-0 translate-y-0 sm:top-1/2 sm:bottom-auto sm:-translate-y-1/2"
198210 aria-label="Previous media"
199211 onClick={() => navigateImage(-1)}
200212 >
......@@ -202,18 +214,7 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
202214 </Button>
203215 )}
204216 <MediaActions source={actionsSource}>
205 <div className="relative isolate z-10 max-h-[92vh] max-w-[var(--media-width)]">
206 <Button
207 type="button"
208 ref={closeButtonRef}
209 size="icon-xs"
210 variant="media-close"
211 className="absolute right-0 -top-10 z-20"
212 onClick={onClose}
213 aria-label={`Close ${mediaLabel} preview`}
214 >
215 <XIcon />
216 </Button>
217 <div className="relative isolate z-10 flex max-h-full max-w-[var(--media-width)] flex-col items-center">
217218 {item.type === "video" ? (
218219 <ExpandedVideo key={index} item={item} />
219220 ) : showingAccessibilityDetails ? (
......@@ -241,7 +242,7 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
241242 onError={() => setFailedImageSrc(item.src)}
242243 />
243244 )}
244 <div className="mt-2 flex max-w-[var(--media-width)] items-center justify-center gap-1.5 text-xs text-white/80">
245 <div className="mt-2 flex max-w-[var(--media-width)] items-center justify-center gap-1.5 text-xs text-white/80 max-sm:px-10">
245246 <span className="truncate" aria-live="polite" aria-atomic="true">
246247 {item.name}
247248 {preview.images.length > 1 ? ` (${index + 1}/${preview.images.length})` : ""}
......@@ -280,7 +281,7 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
280281 type="button"
281282 size="icon"
282283 variant="media-navigation"
283 className="right-0 top-auto -bottom-12 translate-y-0 sm:top-1/2 sm:bottom-auto sm:-translate-y-1/2"
284 className="right-0 top-auto bottom-0 translate-y-0 sm:top-1/2 sm:bottom-auto sm:-translate-y-1/2"
284285 aria-label="Next media"
285286 onClick={() => navigateImage(1)}
286287 >