From f7e3b363f150ed7ec0afc7ff577ff8cd046281ba Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 11 Jul 2026 17:15:00 -0700
Subject: [PATCH] fix(landing): correct sizes underestimate + fix dead .map
 header rule

- integrations-callout: derive sizes from the section's actual grid math
  (fixed 386px copy column, 40px gap, section gutters) instead of an
  approximated vw fraction. Verified against a static reproduction of the
  layout rendered at each Tailwind breakpoint - the old 110vw mobile tier
  underestimated real render width by ~3% right at the 1023px stack
  boundary, which could cause the browser to pick a too-small srcset
  candidate and upscale.
- next.config: the .map header rule's trailing `$` was read as a literal
  character by Next's path-to-regexp source matcher, not a regex anchor,
  so the rule never matched a real .map URL (confirmed via routes-manifest
  regex + a live header check). Removed the dead anchor and added a
  bounded Cache-Control so a future decision to stop shipping source maps
  isn't undermined by a 1yr immutable cache on already-fetched maps.
---
 .../integrations-callout.tsx                  | 18 ++++++++++++------
 apps/sim/next.config.ts                       | 19 +++++++++++++++++--
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/apps/sim/app/(landing)/components/features/components/integrations-callout/integrations-callout.tsx b/apps/sim/app/(landing)/components/features/components/integrations-callout/integrations-callout.tsx
index 3b7df62854..4e7659ee10 100644
--- a/apps/sim/app/(landing)/components/features/components/integrations-callout/integrations-callout.tsx
+++ b/apps/sim/app/(landing)/components/features/components/integrations-callout/integrations-callout.tsx
@@ -18,11 +18,17 @@ import { CalloutFrame } from '@/app/(landing)/components/features/components/cal
  * peek at part of the product rather than a complete miniature, scaling
  * proportionally with the aspect-locked stage. Decorative.
  *
- * `sizes` mirrors the sibling backdrop image's own hint (`FeatureCard`'s
- * `70vw`/`900px` stage width), scaled by this callout's 125% overhang, with an
- * extra `max-width: 1023px` tier for `FeatureCard`'s `max-lg:grid-cols-1`
- * stack (media becomes ~full card width there, not the desktop 2-column
- * remainder) - verified against Lighthouse's measured mobile render width.
+ * `sizes` is derived directly from the section's grid math rather than
+ * approximated, then rounded up to the worst-case (peak render/viewport
+ * ratio) in each tier so the browser never under-fetches:
+ * `callout = 1.25 * (viewport - 2*gutter - 32px card padding - [40px gap +
+ * 386px fixed copy column, desktop only])`, gutter = `px-20`/`max-lg:px-8`/
+ * `max-sm:px-5` from `Features`'s grid, matching `FeatureCard`'s
+ * `max-lg:grid-cols-1` stack. Peak ratios (verified against a static
+ * reproduction of this exact layout rendered at each Tailwind breakpoint):
+ * ~113.3% at the `max-width: 1023px` stacked tier's own upper edge, ~108.6%
+ * at `1460px` (the container's cap, where render width stops growing with
+ * viewport - hence the final tier is a flat px value, not a vw fraction).
  */
 export function IntegrationsCallout() {
   return (
@@ -35,7 +41,7 @@ export function IntegrationsCallout() {
           src='/landing/feature-integrate-ui.png'
           alt=''
           fill
-          sizes='(max-width: 1023px) 110vw, (max-width: 1460px) 87.5vw, 1125px'
+          sizes='(max-width: 1023px) 114vw, (max-width: 1460px) 109vw, 1053px'
           className='object-cover'
         />
       </CalloutFrame>
diff --git a/apps/sim/next.config.ts b/apps/sim/next.config.ts
index e789a8b1fe..845241d3cd 100644
--- a/apps/sim/next.config.ts
+++ b/apps/sim/next.config.ts
@@ -253,14 +253,29 @@ const nextConfig: NextConfig = {
           },
         ],
       },
-      // Block access to sourcemap files (defense in depth)
+      // Block access to sourcemap files (defense in depth). The trailing
+      // `$` this rule previously ended with is not a regex anchor in Next's
+      // `source` matcher (path-to-regexp syntax, not raw regex) - it matched
+      // a literal `$` character, so this rule never actually fired against
+      // real `.map` URLs. Next already anchors the compiled pattern at both
+      // ends, so no trailing anchor is needed here.
+      //
+      // Also bounds `.map` files to a short, revalidated TTL rather than
+      // Next's built-in 1yr immutable default for `_next/static/*` - maps
+      // are content-hashed like their JS, so this isn't about staleness,
+      // it's so a future decision to stop shipping `productionBrowserSourceMaps`
+      // isn't undermined by browsers/edges holding old maps for a year.
       {
-        source: '/(.*)\\.map$',
+        source: '/(.*)\\.map',
         headers: [
           {
             key: 'x-robots-tag',
             value: 'noindex',
           },
+          {
+            key: 'Cache-Control',
+            value: 'public, max-age=86400, stale-while-revalidate=604800',
+          },
         ],
       },
       // Chat pages - allow iframe embedding from any origin