dev
/
sudo-archive
mirror of https://github.com/sussy-code/smov.git
2
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update PopupModal.tsx (Better Responsivness)

This commit is contained in:
Abdullah Khan 2024-06-19 01:22:40 -04:00 committed by GitHub
parent 7643c777b8
commit 08243acaf9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/media/PopupModal.tsx
View File

@ -152,15 +152,19 @@ export function PopupModal({
return ( return (
<div <div
className="fixed inset-0 bg-opacity-50 flex justify-center items-center z-50 transition-opacity duration-100 overflow-y-auto" className="fixed inset-0 bg-opacity-50 flex justify-center items-center sm:items-start z-50 transition-opacity duration-100 top-10 sm:top-10"
style={{ opacity: style.opacity, visibility: style.visibility }} style={{ opacity: style.opacity, visibility: style.visibility }}
> >
<div <div
ref={modalRef} ref={modalRef}
className="rounded-xl p-3 m-4 sm:m-8 bg-modal-background flex justify-center items-center transition-opacity duration-100 max-w-full sm:max-w-xl w-full sm:w-auto" className="rounded-xl bg-modal-background flex flex-col justify-center items-center transition-opacity duration-100 max-w-full sm:max-w-xl w-full sm:w-auto sm:h-auto overflow-y-auto p-4"
style={{ opacity: style.opacity }} style={{
opacity: style.opacity,
maxHeight: "90vh",
height: "auto",
}}
> >
<div className="aspect-w-16 aspect-h-9 overflow-y-auto w-full sm:w-auto"> <div className="aspect-w-16 aspect-h-9 w-full sm:w-auto">
<div className="rounded-xl"> <div className="rounded-xl">
{data?.backdrop_path ? ( {data?.backdrop_path ? (
<img <img
@ -168,6 +172,9 @@ export function PopupModal({
alt={media.poster ? "" : "failed to fetch :("} alt={media.poster ? "" : "failed to fetch :("}
className="rounded-xl object-cover w-full h-full" className="rounded-xl object-cover w-full h-full"
loading="lazy" loading="lazy"
style={{
maxHeight: "60vh",
}}
/> />
) : ( ) : (
<Skeleton /> <Skeleton />