fix(resources): apply CSS transform trickery only to Wixsite

This commit should resolve most of the questions of why we need so much code for a single iframe scenario, as we typically assume all websites adhere to responsive designs. To be fair, WordPress link we received does, but just not for the wixsite link. Unfortunately, we kind of entered a local maximum and decided to fix everything ourselves (a wiser way would be asking the wixsite owner for the account and optimizing on that side).

Therefore, we disable the tricks on the WordPress website, as it is responsive by design.

Left a TODO to explain this big pile of code/logic just for this very edge-case scenario.

Author: eric15342335

src/app/resources/[slug]/page.tsx

@@ -28,6 +28,7 @@ export default async function ResourceEmbedPage({ params }: { params: Promise<{
       title={resource.title}
       websiteUrl={resource.websiteUrl}
       hideTopPx={resource.hideTopPx}
+      scale={resource.scale}
       hideHeader
       showOnMobile
       containerHeight="100dvh"

src/components/sections/resource-iframe.tsx

@@ -6,6 +6,10 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { cn, isInternalHref, noReturnDebounce } from "@/lib/utils";
 import { CSSProperties, RefObject, useCallback, useEffect, useRef, useState } from "react";
 
+/**
+ * @todo Explain why we need sophisticated iframe size calculation/CSS transform trickery
+ * The reason is for the Wix website that we got, it is not truly responsive for iframe scenarios
+ */
 const IFRAME_SIZE = {
   /**
    * For Wix, mobile UA serves:
@@ -15,9 +19,9 @@ const IFRAME_SIZE = {
    * Hence MOBILE_WIDTH = 320.
    */
   MOBILE_WIDTH: 320,
-  DESKTOP_WIDTH: 1440,
+  DESKTOP_WIDTH: 1338,
   /** DEFAULT_WIDTH = DESKTOP_WIDTH */
-  DEFAULT_WIDTH: 1440,
+  DEFAULT_WIDTH: 1338,
   /** Non-fullscreen view iframe height in /resource page */
   HEIGHT: 400,
 } as const;
@@ -160,7 +164,7 @@ export function ResourceIframe({
             title={title}
             allowFullScreen
             loading="lazy"
-            className="border-0"
+            className="border-0 w-full"
             style={{
               transform: `scale(${finalScale})`,
               transformOrigin: "top left",

src/lib/resources.ts

@@ -4,6 +4,7 @@ export type Resource = {
   websiteUrl: string;
   hideTopPx: number;
   authorLine?: string;
+  scale?: number;
 };
 
 export const resources: Resource[] = [
@@ -20,6 +21,7 @@ export const resources: Resource[] = [
     websiteUrl: "https://thespineofthenation.wordpress.com/2025/07/22/the-spine-of-the-nation/",
     hideTopPx: 49,
     authorLine: "Mr Richard Yan (ALPHA Summer Program 2025)",
+    scale: 1,
   },
 ];