Update Dockerfile to add HEIF support dependencies and adjust TimelineSection styles for better layout and image handling

Dockerfile

@@ -2,7 +2,29 @@ FROM node:22-alpine AS builder
 
 WORKDIR /app
 
+# Install build dependencies for sharp and libvips with HEIF support
+# See: https://sharp.pixelplumbing.com/install#alpine
+RUN apk add --no-cache \
+    build-base \
+    pkgconf \
+    # libvips runtime dependencies
+    libjpeg-turbo-dev \
+    libpng-dev \
+    libwebp-dev \
+    tiff-dev \
+    libexif-dev \
+    lcms2-dev \
+    glib-dev \
+    # libvips itself and its HEIF support
+    vips-dev \
+    libheif-dev \
+    # Codecs for HEIF
+    libde265-dev \
+    x265-dev
+
 COPY package*.json ./
+# Tell sharp to use the system-wide libvips we just installed with HEIF support
+ENV SHARP_IGNORE_GLOBAL_LIBVIPS=1
 RUN npm ci
 
 COPY . .
@@ -25,9 +47,11 @@ COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
 COPY --from=builder /app/public ./public
 
-# Copy sharp native binaries (needed for HEIC→JPEG conversion)
+# Sharp native binaries are no longer copied directly,
-COPY --from=builder /app/node_modules/sharp ./node_modules/sharp
+# as sharp is built against system libvips and is part of node_modules copied with the standalone app.
-COPY --from=builder /app/node_modules/@img ./node_modules/@img
+# If sharp is needed outside standalone, node_modules would need to be copied.
+# COPY --from=builder /app/node_modules/sharp ./node_modules/sharp
+# COPY --from=builder /app/node_modules/@img ./node_modules/@img
 
 RUN mkdir -p /app/data/uploads/photos /app/data/uploads/videos /app/data/uploads/music \
   && chown -R nextjs:nodejs /app/data

src/components/TimelineSection.tsx

@@ -58,7 +58,7 @@ export default function TimelineSection({ entries }: TimelineSectionProps) {
           <div className="absolute left-5 top-0 bottom-0 w-0.5 bg-gradient-to-b from-warm-gold/40 via-warm-gold/25 to-warm-gold/40 sm:hidden" />
 
           {/* Entries */}
-          <div className="space-y-12 sm:space-y-16 py-4 relative" style={{ zIndex: 10 }}>
+          <div className="space-y-8 sm:space-y-12 py-4 relative" style={{ zIndex: 10 }}>
             {entries.map((entry, index) => {
               const isLeft = index % 2 === 0
               const isBirth = index === birthIndex
@@ -75,8 +75,8 @@ export default function TimelineSection({ entries }: TimelineSectionProps) {
                   transition={{ duration: 0.6, delay: 0.1 }}
                   className={`relative flex items-start ${
                     isLeft
-                      ? 'pl-10 sm:pl-0 sm:pr-[52%]'
+                      ? 'pl-10 sm:pl-0 sm:pr-[50%]'
-                      : 'pl-10 sm:pl-[52%]'
+                      : 'pl-10 sm:pl-[50%]'
                   }`}
                 >
                   {/* Content Card */}
@@ -97,7 +97,7 @@ export default function TimelineSection({ entries }: TimelineSectionProps) {
                             key={i}
                             src={`/api/files/${filename.trim()}?w=600`}
                             alt=""
-                            className="w-full max-h-40 object-cover rounded-lg"
+                            className="w-full max-h-60 object-cover rounded-lg"
                             loading="lazy"
                           />
                         ))}
@@ -185,7 +185,7 @@ export default function TimelineSection({ entries }: TimelineSectionProps) {
               animate={{ scale: 1, y: 0 }}
               exit={{ scale: 0.9, y: 20 }}
               onClick={(e) => e.stopPropagation()}
-              className="bg-cream rounded-2xl shadow-2xl max-w-2xl w-full max-h-[85vh] overflow-y-auto"
+              className="bg-cream rounded-2xl shadow-2xl max-w-4xl w-full max-h-[85vh] overflow-y-auto"
             >
               {/* Header */}
               <div className="sticky top-0 bg-cream/95 backdrop-blur-sm border-b border-warm-border p-6 flex items-start justify-between">
@@ -220,7 +220,7 @@ export default function TimelineSection({ entries }: TimelineSectionProps) {
                     {selectedEntry.media_filenames.split(',').map((filename, i) => (
                       <img
                         key={i}
-                        src={`/api/files/${filename.trim()}?w=1200`}
+                        src={`/api/files/${filename.trim()}?w=1600`}
                         alt=""
                         className="w-full object-contain rounded-xl"
                       />