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

.gitignore

@@ -45,3 +45,6 @@ next-env.d.ts
 
 # semi-auto generated diff file
 commit.txt
+
+# folder for storing testing files
+.testing

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,24 @@ 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 this sophisticated iframe size calculation/CSS transform trickery.
+ *
+ * The reason is that the Wix website we are using is not truly responsive for iframe
+ * scenarios. While the usual way to handle this is with CSS media queries, Wix uses a
+ * User-Agent detection approach.
+ *
+ * So, when we embed it in an iframe (where the width is unknown and depends on the
+ * margin/padding of its container, i.e., resource-iframe.tsx), the iframe's inner
+ * content is not responsive when the frame is smaller than a certain pixel value.
+ * e.g. DESKTOP screen + 500px width iframe -> broken
+ *
+ * For mobile screens, due to the hacky way Wix implements its layout (using absolute
+ * pixel positioning like `left: 274px` instead of percentages), embedding it in an
+ * iframe always results in gaps on the left and right. In other words, the elements
+ * are not auto-scaled to fit the full iframe width.
+ * e.g. MOBILE screen + full width iframe -> broken
+ */
 const IFRAME_SIZE = {
   /**
    * For Wix, mobile UA serves:
@@ -15,9 +33,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 +178,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,
   },
 ];