sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust photo gallery widget to fit card dimensions

Browse Source 
Modify the `PhotoGalleryWidget` and `SingleImageCarousel` components to ensure images within the gallery correctly fill their containers, aligning with adjacent content cards by adjusting aspect ratios and layout properties.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: d6345611-8671-439f-bcfe-09ca2d5c71ba
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/drGbo1a
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 21:31:27 +00:00
parent a46897c227
commit be140b7c99
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/components/photo-gallery.tsx
View File

@ -106,11 +106,11 @@ function SingleImageCarousel({
return (
<div
className="relative w-full h-full"
className="relative w-full h-full flex flex-col"
onMouseEnter={() => setPaused(true)}
onMouseLeave={() => setPaused(false)}
>
<div className="relative w-full overflow-hidden rounded-b-lg aspect-video">
<div className="relative w-full overflow-hidden rounded-b-lg flex-1 min-h-0">
<img
src={images[index].large || images[index].thumb}
alt={images[index].fileName}
@ -189,8 +189,8 @@ export function PhotoGalleryWidget() {
return (
<>
<div className="bg-card rounded-lg border border-card-border overflow-hidden h-full" data-testid="widget-gallery">
<div className="p-3 flex items-center gap-2 border-b border-card-border">
<div className="bg-card rounded-lg border border-card-border overflow-hidden h-full flex flex-col" data-testid="widget-gallery">
<div className="p-3 flex items-center gap-2 border-b border-card-border flex-shrink-0">
<Images className="w-4 h-4 text-primary" />
<h3 className="font-bold text-card-foreground text-sm">Fotogalerie</h3>
</div>