Business scraping modal changes

client/src/pages/Businesses.jsx

@@ -156,33 +156,33 @@ function BusinessCreatedModal({ business, onClose }) {
   const cdnUrls = extractCdnUrls(business?.scrapeArtifacts?.cdnUrls?.length ? { relevantImagePaths: business.scrapeArtifacts.cdnUrls } : business);
   const links = normalizeScrapeLinks(business?.scrapeArtifacts?.links);
   const prettyJson = useMemo(() => formatPrettyJson(business?.scrapeArtifacts?.json), [business]);
-  const [viewportWidth, setViewportWidth] = useState(() => (
-    typeof window === 'undefined' ? 1200 : window.innerWidth
-  ));
 
   useEffect(() => {
-    if (typeof window === 'undefined') return undefined;
+    const previousBodyOverflow = document.body.style.overflow;
+    const previousBodyOverscroll = document.body.style.overscrollBehavior;
+    const previousHtmlOverflow = document.documentElement.style.overflow;
+    const previousHtmlOverscroll = document.documentElement.style.overscrollBehavior;
 
-    const handleResize = () => setViewportWidth(window.innerWidth);
+    document.body.style.overflow = 'hidden';
-    handleResize();
+    document.body.style.overscrollBehavior = 'none';
-    window.addEventListener('resize', handleResize);
+    document.documentElement.style.overflow = 'hidden';
-    return () => window.removeEventListener('resize', handleResize);
+    document.documentElement.style.overscrollBehavior = 'none';
+
+    return () => {
+      document.body.style.overflow = previousBodyOverflow;
+      document.body.style.overscrollBehavior = previousBodyOverscroll;
+      document.documentElement.style.overflow = previousHtmlOverflow;
+      document.documentElement.style.overscrollBehavior = previousHtmlOverscroll;
+    };
   }, []);
 
-  const preferredWidth = prettyJson
-    ? 1080
-    : cdnUrls.length > 0 || links.length > 0
-      ? 860
-      : 560;
-  const modalWidth = Math.max(320, Math.min(viewportWidth - 32, preferredWidth));
-
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/55 p-4 backdrop-blur-sm">
       <div
-        className="w-full overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-xl"
+        className="flex h-full w-full flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-xl"
-        style={{ width: `${modalWidth}px`, maxWidth: 'calc(100vw - 2rem)', maxHeight: '88vh' }}
+        style={{ width: '920px', maxWidth: 'calc(100vw - 2rem)', height: 'min(78vh, 760px)' }}
       >
-        <div className="flex items-start justify-between gap-4 border-b border-gray-200 px-6 py-5">
+        <div className="shrink-0 flex items-start justify-between gap-4 border-b border-gray-200 px-6 py-5">
           <div>
             <p className="text-xs font-semibold uppercase tracking-[0.18em] text-gray-400">Business created</p>
             <h2 className="mt-2 text-2xl font-semibold text-gray-900">{name}</h2>
@@ -200,7 +200,8 @@ function BusinessCreatedModal({ business, onClose }) {
           </button>
         </div>
 
-        <div className="overflow-y-auto px-6 py-5 space-y-6">
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-5">
+          <div className="space-y-5 pb-2">
             <div className="rounded-xl border border-gray-200 bg-gray-50 p-4">
               <div className="flex items-start gap-4">
                 <div className="w-16 h-16 rounded-xl overflow-hidden bg-white border border-gray-200 shrink-0 flex items-center justify-center">
@@ -232,7 +233,7 @@ function BusinessCreatedModal({ business, onClose }) {
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-gray-400">Images</p>
                 <p className="mt-1 text-sm text-gray-500">Captured storefront images are available below.</p>
               </div>
-              <CdnGallery urls={cdnUrls} />
+              <CdnGallery urls={cdnUrls} compact showLabels={false} />
             </section>
           )}
 
@@ -243,7 +244,7 @@ function BusinessCreatedModal({ business, onClose }) {
                 <p className="mt-1 text-sm text-gray-500">Raw storefront data captured during onboarding.</p>
               </div>
               <div className="overflow-hidden rounded-xl border border-gray-200 bg-gray-950">
-                <pre className="max-h-80 overflow-auto px-4 py-4 text-xs leading-relaxed text-gray-100">
+                  <pre className="max-h-56 overflow-auto px-4 py-4 text-xs leading-relaxed text-gray-100">
                   {prettyJson}
                 </pre>
               </div>
@@ -275,8 +276,9 @@ function BusinessCreatedModal({ business, onClose }) {
               </section>
             )}
           </div>
+        </div>
 
-        <div className="border-t border-gray-200 px-6 py-4">
+        <div className="shrink-0 border-t border-gray-200 px-6 py-4">
           <button
             onClick={onClose}
             className="w-full rounded-lg bg-primary-blue py-2 text-sm font-medium text-white transition hover:bg-primary-dark"