Fix testimonial preview sizing (#91)

- set the testimonial preview surface to a fixed 1200x630 size for social media exports
- add a scrollable preview container so the form stays responsive even when the preview is wider
- widen the page shell on large screens to better accommodate the fixed-size preview

------
[Codex Task](https://chatgpt.com/codex/tasks/task_e_694039a947548325a874f54932e5e79c)

Author: rodrigogiraoserrao

testimonial-card-generator.html

@@ -14,11 +14,21 @@
             --image-height: 630px;
         }
 
+        .page-shell {
+            max-width: min(100%, calc(var(--image-width) + 320px));
+        }
+
         .layout {
             display: grid;
             grid-template-columns: 1fr;
             gap: clamp(1rem, 3vw, 1.5rem);
-            align-items: stretch;
+            align-items: start;
+        }
+
+        @media (min-width: 1100px) {
+            .layout {
+                grid-template-columns: minmax(320px, 1fr) auto;
+            }
         }
 
         .field {
@@ -90,11 +100,19 @@
         .preview-wrapper {
             display: grid;
             gap: 0.75rem;
+            align-items: start;
+            min-inline-size: 0;
+        }
+
+        .preview-shell {
+            width: 100%;
+            overflow-x: auto;
+            padding: 0.25rem;
         }
 
         .image-space {
-            width: min(100%, var(--image-width));
-            aspect-ratio: calc(var(--image-width) / var(--image-height));
+            width: var(--image-width);
+            height: var(--image-height);
             background: var(--bg-2);
             border: 1px solid var(--ui-2);
             border-radius: var(--radius-lg);
@@ -106,9 +124,8 @@
         }
 
         .render-surface {
-            width: min(100%, var(--image-width));
-            max-width: var(--image-width);
-            aspect-ratio: calc(var(--image-width) / var(--image-height));
+            width: var(--image-width);
+            height: var(--image-height);
             display: flex;
             justify-content: center;
             align-items: center;
@@ -213,15 +230,17 @@ <h1>Testimonial Card Image Generator</h1>
 
                 <div class="surface preview-wrapper" aria-live="polite">
                     <div class="status" id="status"></div>
-                    <div class="image-space">
-                        <div class="render-surface" id="renderSurface">
-                            <div class="card" id="card">
-                                <blockquote id="quote">Add your testimonial to see a preview.</blockquote>
-                                <div class="person">
-                                    <img class="avatar" id="avatar" src="" alt="Avatar preview">
-                                    <div>
-                                        <div class="name" id="previewName">Name</div>
-                                        <div class="affiliation" id="previewAffiliation">Affiliation</div>
+                    <div class="preview-shell">
+                        <div class="image-space">
+                            <div class="render-surface" id="renderSurface">
+                                <div class="card" id="card">
+                                    <blockquote id="quote">Add your testimonial to see a preview.</blockquote>
+                                    <div class="person">
+                                        <img class="avatar" id="avatar" src="" alt="Avatar preview">
+                                        <div>
+                                            <div class="name" id="previewName">Name</div>
+                                            <div class="affiliation" id="previewAffiliation">Affiliation</div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>