From 3b6797883911ec11fc24d3f27afd7ab60ccf16f1 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Sun, 25 Jan 2026 20:04:00 +0000
Subject: [PATCH] fix(*): Fix google ad styling

---
 src/components/UserNameModal.svelte | 39 +++++++++++++++++++++++------
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/components/UserNameModal.svelte b/src/components/UserNameModal.svelte
index bb91fa7..6ddea81 100644
--- a/src/components/UserNameModal.svelte
+++ b/src/components/UserNameModal.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { onMount } from 'svelte';
+	import { onMount, tick } from 'svelte';
 
 	export let closeModal;
 	export let joinRoom;
@@ -29,11 +29,28 @@
 		rememberName = event.target.checked;
 	}
 
-	onMount(() => {
-		if (typeof window !== 'undefined' && window.adsbygoogle) {
-			window.adsbygoogle = window.adsbygoogle || [];
-			window.adsbygoogle.push({});
-		}
+	let adContainer;
+	let adPushed = false;
+
+	function tryPushAd() {
+		if (adPushed || !adContainer) return;
+		if (adContainer.offsetWidth === 0) return;
+		if (typeof window === 'undefined' || !window.adsbygoogle) return;
+		window.adsbygoogle = window.adsbygoogle || [];
+		window.adsbygoogle.push({});
+		adPushed = true;
+	}
+
+	onMount(async () => {
+		await tick();
+		tryPushAd();
+		if (adPushed || typeof ResizeObserver === 'undefined') return;
+		const observer = new ResizeObserver(() => {
+			tryPushAd();
+			if (adPushed) observer.disconnect();
+		});
+		observer.observe(adContainer);
+		return () => observer.disconnect();
 	});
 
 	$: userName = typeof localStorage !== 'undefined' ? localStorage.getItem('userName') || '' : '';
@@ -67,7 +84,9 @@
 				<button on:click={handleSubmit}>Save</button>
 			</div>
 			<!-- Name Entry - Square Ad -->
-			<ins class="adsbygoogle"
+			<ins
+				bind:this={adContainer}
+				class="adsbygoogle"
 				style="display:block"
 				data-ad-client="ca-pub-5812114745839139"
 				data-ad-slot="5531796845"
@@ -105,6 +124,7 @@
 		flex-direction: column;
 		align-items: center;
 		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+		width: min(90vw, 22rem);
 	}
 
 	.input-container {
@@ -147,6 +167,11 @@
 		background-color: #005f8a;
 	}
 
+	.adsbygoogle {
+		align-self: stretch;
+		width: 100%;
+	}
+
 	p {
 		font-size: 1rem;
 		font-style: italic;