MinecraftUtilities/Frontend
1
1
Fork 0
Code Issues 1 Pull Requests 10 Actions Activity

make the skin part dialog imags slightly smaller on mobile
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m3s
Details

Browse Source
This commit is contained in:
Lee 2024-04-18 08:21:03 +01:00
parent 93477561a0
commit 4739297ba5
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/components/player/skin-part-image.tsx
View File

@ -76,20 +76,20 @@ export function SkinPartImage({ playerName, part, url, size = 64 }: SkinPartImag
}}
/>
</DialogTrigger>
<DialogContent className="w-fit min-w-72 h-fit">
<DialogContent className="w-fit h-fit">
<DialogHeader>
<DialogTitle>
{playerName}&apos;s {partName}
</DialogTitle>
<DialogDescription>See the skin part below.</DialogDescription>
</DialogHeader>
<div className="flex items-center w-max flex-col divide-y md:flex-row md:divide-x md:divide-y-0 text-muted-foreground">
<div className="flex items-center w-full flex-col divide-y md:flex-row md:divide-x md:divide-y-0 text-muted-foreground">
{skinPartOverlay.map((overlay, index) => {
return (
<div key={index} className="p-2 text-center font-semibold flex flex-col gap-2">
<div key={index} className="p-2 text-center items-center font-semibold flex flex-col gap-2">
<p>{overlay.title}</p>
<img
className="h-[256px] w-max"
className="h-[200px] md:h-[256px]"
src={url + (overlay.overlays ? "?overlays=true" : "")}
alt={`The player's ${partName}`}
loading="lazy"