Merge pull request #19 from bside-ms/image-dimensions

fix: layout of images in event-overview and news components
bside-ms · Dec 31, 2024 · a3aa72b · a3aa72b
2 parents ae9942d + 392be7b
commit a3aa72b
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/components/events/overview/EventOverviewEntry.tsx b/components/events/overview/EventOverviewEntry.tsx
@@ -39,7 +39,7 @@ const EventOverviewEntry = ({ event, areDisplayedOnHome }: Props): ReactElement
             href={`/events/${createEventSlug(event)}`}
             className="group flex cursor-pointer shadow-md transition-shadow hover:shadow-lg"
         >
-            <div className="relative hidden min-h-[150px] w-[100px] shrink-0 min-[350px]:block min-[450px]:w-[150px]">
+            <div className="relative my-auto hidden size-[150px] shrink-0 min-[350px]:block">
                 {eventImageUrl === null ? (
                     <EventOverviewEntryImageFallback />
                 ) : (

diff --git a/components/events/overview/EventsOverview.tsx b/components/events/overview/EventsOverview.tsx
@@ -124,7 +124,7 @@ const EventsOverview = ({ title = '', eventsOnPage }: Props): ReactElement => {
                         ))
                     ) : groupByDay.length > 0 ? (
                         groupByDay.map(([date, events]) => (
-                            <div key={date.toString()} className="mb-6 space-y-4">
+                            <div key={date.toString()} className="mb-6 space-y-2.5">
                                 <div className="bg-black px-3 py-1 font-serif font-bold text-white md:px-4 md:py-2">
                                     {formatDate(date, 'EE dd. MMMM yy')}
                                 </div>

diff --git a/components/news/NewsTeaser.tsx b/components/news/NewsTeaser.tsx
@@ -37,7 +37,7 @@ const NewsTeaser = ({ news }: Props): ReactElement | null => {
                                     <Image
                                         src={media.url!}
                                         alt={media.alt}
-                                        className="aspect-[3/4] size-auto object-cover transition-all group-hover:scale-105"
+                                        className="aspect-[3/3] size-auto object-cover transition-all group-hover:scale-105"
                                         width={300}
                                         height={300}
                                     />