fix(web): increase build memory to 8GB and support smooth-scroll in IframeSection

.gitea/workflows/deploy.yml

@@ -316,6 +316,7 @@ jobs:
             S3_BUCKET=${{ secrets.S3_BUCKET || vars.S3_BUCKET || 'mintel' }}
             S3_REGION=${{ secrets.S3_REGION || vars.S3_REGION || 'fsn1' }}
             S3_PREFIX=${{ secrets.S3_PREFIX || vars.S3_PREFIX || 'mintel.me' }}
+            BUILD_ID=${{ github.sha }}
           tags: registry.infra.mintel.me/mintel/mintel.me:${{ needs.prepare.outputs.image_tag }}
           cache-from: type=registry,ref=registry.infra.mintel.me/mintel/mintel.me:buildcache-${{ needs.prepare.outputs.target }}
           cache-to: type=registry,ref=registry.infra.mintel.me/mintel/mintel.me:buildcache-${{ needs.prepare.outputs.target }},mode=max

Dockerfile

@@ -13,6 +13,7 @@ ARG S3_SECRET_KEY
 ARG S3_BUCKET
 ARG S3_REGION
 ARG S3_PREFIX
+ARG BUILD_ID
 
 # Environment variables for Next.js build
 ENV NEXT_PUBLIC_BASE_URL=$NEXT_PUBLIC_BASE_URL
@@ -47,10 +48,14 @@ RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
     rm .npmrc
 
 # Copy source code
+# We use BUILD_ID here to ensure that if the commit changes, we always COPY the latest files
+# even if Docker's metadata-based fingerprinting for the public directory fails.
+ARG BUILD_ID
+RUN echo "Building with ID: ${BUILD_ID}"
 COPY . .
 
 # Build application (monorepo filter)
-ENV NODE_OPTIONS="--max_old_space_size=4096"
+ENV NODE_OPTIONS="--max_old_space_size=8192"
 RUN pnpm --filter @mintel/web build
 
 # Stage 2: Runner
@@ -65,6 +70,13 @@ COPY --from=builder /app/apps/web/.next/static ./apps/web/.next/static
 
 # Explicitly copy Payload dynamically generated importMap.js excluded by Standalone tracing
 COPY --from=builder /app/apps/web/app/(payload)/admin/importMap.js ./apps/web/app/(payload)/admin/importMap.js
+
+# Fix permissions for the non-root user (Standard uid/gid from base image)
+# We do this as root before switching users
+USER root
+RUN chown -R 1001:65533 /app
+USER nextjs
+
 # Start from the app directory to ensure references solve correctly
 WORKDIR /app/apps/web
 CMD ["node", "server.js"]

Dockerfile.dev

@@ -1,7 +1,7 @@
 FROM node:20-alpine
 
 # Install essential build tools if needed (e.g., for node-gyp)
-RUN apk add --no-cache libc6-compat python3 make g++
+RUN apk add --no-cache libc6-compat git python3 make g++
 
 WORKDIR /app
 

apps/web/src/components/IframeSection.tsx

@@ -196,11 +196,13 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
 
   const updateScrollState = React.useCallback(() => {
     try {
+      const win = iframeRef.current?.contentWindow;
       const doc = iframeRef.current?.contentDocument?.documentElement;
-      if (doc) {
-        const atTop = doc.scrollTop <= 5;
+      if (doc && win) {
+        const scrollTop = doc.scrollTop || win.scrollY || 0;
+        const atTop = scrollTop <= 5;
         const atBottom =
-          doc.scrollTop + doc.clientHeight >= doc.scrollHeight - 5;
+          scrollTop + doc.clientHeight >= doc.scrollHeight - 5;
         const isScrollable = doc.scrollHeight > doc.clientHeight + 10;
         setScrollState({ atTop, atBottom, isScrollable });
       }
@@ -493,7 +495,6 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
                       style.textContent = `
                                               *::-webkit-scrollbar { display: none !important; }
                                               * { -ms-overflow-style: none !important; scrollbar-width: none !important; }
-                                              body { background: transparent !important; }
                                           `;
                       iframe.contentDocument.head.appendChild(style);
                       setTimeout(updateAmbilight, 600);

docker-compose.dev.yml

@@ -31,6 +31,7 @@ services:
       # - CI=true
       - NPM_TOKEN=${NPM_TOKEN:-}
       - DATABASE_URI=postgres://${postgres_DB_USER:-payload}:${postgres_DB_PASSWORD:-payload}@postgres-db:5432/${postgres_DB_NAME:-payload}
+      - QDRANT_URL=http://qdrant:6333
       - PAYLOAD_SECRET=dev-secret
     command: >
       sh -c "pnpm install --no-frozen-lockfile && pnpm --filter @mintel/web dev"

scripts/visual_debug.mjs

@@ -0,0 +1,36 @@
+import puppeteer from 'puppeteer';
+
+(async () => {
+    // Launch browser
+    const browser = await puppeteer.launch({ headless: true });
+    const page = await browser.newPage();
+    
+    // Set viewport
+    await page.setViewport({ width: 1920, height: 1080 });
+    
+    try {
+        console.log("Navigating to case study page...");
+        await page.goto('https://mintel.me/case-studies/klz-cables', { waitUntil: 'networkidle2' });
+        
+        console.log("Waiting a bit for iframes to load...");
+        await new Promise(r => setTimeout(r, 5000));
+        
+        // Let's get console logs from the page too
+        page.on('console', msg => console.log('PAGE LOG:', msg.text()));
+        
+        console.log("Taking screenshot...");
+        await page.screenshot({ path: '/Users/marcmintel/Projects/mintel.me/screenshot_case_study.png', fullPage: true });
+        
+        // Also take a screenshot of the actual showcase HTML page directly to compare
+        console.log("Navigating directly to showcase HTML...");
+        await page.goto('https://mintel.me/showcase/klz-cables.com/power-cables-medium-voltage-cables.html', { waitUntil: 'networkidle2' });
+        await new Promise(r => setTimeout(r, 3000));
+        await page.screenshot({ path: '/Users/marcmintel/Projects/mintel.me/screenshot_showcase.png', fullPage: true });
+
+        console.log("Done!");
+    } catch (e) {
+        console.error("Error:", e);
+    } finally {
+        await browser.close();
+    }
+})();

wget_out.txt

@@ -0,0 +1 @@
+zsh:1: command not found: wget