Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-20 08:42:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix details modal overflow

Browse source
This commit is contained in:
Pas 2025-06-02 22:47:21 -06:00
parent 400c31336e
commit 3713a85720
1 changed files with 43 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
src/components/overlays/details/DetailsHeader.tsx
View file

@ -28,45 +28,54 @@ export function DetailsHeader({
return (
<div className="space-y-4">
{/* TMDB Rating and Year/Seasons */}
<div className="flex items-center gap-2 text-sm text-white/80">
{voteAverage && (
<div className="flex items-center gap-1">
<Icon icon={Icons.TMDB} />
<span>{voteAverage.toFixed(1)}</span>
{voteCount && (
<span className="text-white/60">
({voteCount.toLocaleString()})
</span>
)}
</div>
)}
{imdbData?.rating && (
<>
<span className="text-white/60">•</span>
<div className="flex flex-wrap items-center gap-2 text-sm text-white/80">
{/* Ratings Group */}
<div className="flex items-center gap-2">
{voteAverage && (
<div className="flex items-center gap-1">
<Icon icon={Icons.IMDB} className="text-yellow-400" />
<span>{imdbData.rating.toFixed(1)}</span>
{imdbData.votes && (
<Icon icon={Icons.TMDB} />
<span>{voteAverage.toFixed(1)}</span>
{voteCount && (
<span className="text-white/60">
({imdbData.votes.toLocaleString()})
({voteCount.toLocaleString()})
</span>
)}
</div>
</>
)}
{releaseDate && (
<>
<span className="text-white/60">•</span>
<span>{formatDate(releaseDate)}</span>
</>
)}
{seasons && (
<>
<span className="text-white/60">•</span>
<span>
{seasons} {t("details.seasons")}
</span>
</>
)}
{imdbData?.rating && (
<>
<span className="text-white/60">•</span>
<div className="flex items-center gap-1">
<Icon icon={Icons.IMDB} className="text-yellow-400" />
<span>{imdbData.rating.toFixed(1)}</span>
{imdbData.votes && (
<span className="text-white/60">
({imdbData.votes.toLocaleString()})
</span>
)}
</div>
</>
)}
</div>
{/* Release Date and Seasons Group */}
{(releaseDate || seasons) && (
<div className="flex items-center gap-2">
{releaseDate && (
<>
<span className="text-white/60">•</span>
<span>{formatDate(releaseDate)}</span>
</>
)}
{seasons && (
<>
<span className="text-white/60">•</span>
<span>
{seasons} {t("details.seasons")}
</span>
</>
)}
</div>
)}
</div>