diff --git a/docs/site/app/(no-sidebar)/graphics/effortless.tsx b/docs/site/app/(no-sidebar)/graphics/effortless.tsx
index 8064aa8f7e7ac..bd967ab31a776 100644
--- a/docs/site/app/(no-sidebar)/graphics/effortless.tsx
+++ b/docs/site/app/(no-sidebar)/graphics/effortless.tsx
@@ -13,7 +13,7 @@ export const EffortlessGraphic = () => {
     setMounted(true);
   }, []);
 
-  if (!mounted) return null;
+  if (!mounted) return <div className={sizingString}></div>;
 
   if (resolvedTheme === "dark") {
     return <EffortlessDark />;
diff --git a/docs/site/app/(no-sidebar)/graphics/providers.tsx b/docs/site/app/(no-sidebar)/graphics/providers.tsx
index 70afc5054ce59..4e7c1e2c19e89 100644
--- a/docs/site/app/(no-sidebar)/graphics/providers.tsx
+++ b/docs/site/app/(no-sidebar)/graphics/providers.tsx
@@ -12,7 +12,7 @@ export const CiProviders = () => {
     setMounted(true);
   }, []);
 
-  if (!mounted) return null;
+  if (!mounted) return <div className={sizingString}></div>;
 
   if (resolvedTheme === "dark") {
     return <ProvidersDark />;
diff --git a/docs/site/app/(no-sidebar)/graphics/remote-caching.tsx b/docs/site/app/(no-sidebar)/graphics/remote-caching.tsx
index 86048939f7905..2962b01afc652 100644
--- a/docs/site/app/(no-sidebar)/graphics/remote-caching.tsx
+++ b/docs/site/app/(no-sidebar)/graphics/remote-caching.tsx
@@ -13,7 +13,7 @@ export const RemoteCachingGraphic = () => {
     setMounted(true);
   }, []);
 
-  if (!mounted) return null;
+  if (!mounted) return <div className={sizingString}></div>;
 
   if (resolvedTheme === "dark") {
     return <RemoteCachingDark />;
@@ -25,7 +25,7 @@ const RemoteCachingDark = () => {
   return (
     <div className={sizingString}>
       <svg
-        className="w-full h-auto"
+        className={sizingString}
         viewBox="0 0 307 200"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/docs/site/app/(no-sidebar)/graphics/sizing-string.ts b/docs/site/app/(no-sidebar)/graphics/sizing-string.ts
index 8e7608949fbca..f7a83589f0dd9 100644
--- a/docs/site/app/(no-sidebar)/graphics/sizing-string.ts
+++ b/docs/site/app/(no-sidebar)/graphics/sizing-string.ts
@@ -1,2 +1,2 @@
 export const sizingString =
-  "mx-auto w-[246px] xs:w-[326px] sm:w-[542px] md:w-[194px] lg:w-[255px] xl:w-[298px] xs:w-full";
+  "mx-auto h-[160px] xs:w-[326px] sm:w-[542px] md:w-[194px] lg:w-[255px] xl:w-[298px] xs:w-full";