From 937e941b8ce1728c64a462cbcc8e20d9da6bbb22 Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Tue, 20 Jan 2026 13:31:31 +0100
Subject: [PATCH] [dyad] Created two-column results layout - wrote 1 file(s)

---
 src/components/meta-form.tsx | 263 ++++++++++++++++++-----------------
 1 file changed, 136 insertions(+), 127 deletions(-)

diff --git a/src/components/meta-form.tsx b/src/components/meta-form.tsx
index bd9fb7c..a1279d6 100644
--- a/src/components/meta-form.tsx
+++ b/src/components/meta-form.tsx
@@ -120,140 +120,149 @@ export function MetaForm() {
               Extraction Results
             </CardTitle>
           </CardHeader>
-          <CardContent className="space-y-6">
-            <div>
-              <h3 className="font-semibold text-card-foreground mb-2">
-                SERP Preview
-              </h3>
-              <SerpPreview
-                title={editableTitle}
-                description={editableDescription}
-                url={url}
-              />
-            </div>
+          <CardContent>
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+              <div className="space-y-6">
+                <div>
+                  <h3 className="font-semibold text-card-foreground mb-2">
+                    SERP Preview
+                  </h3>
+                  <SerpPreview
+                    title={editableTitle}
+                    description={editableDescription}
+                    url={url}
+                  />
+                </div>
 
-            {metaData.image && (
-              <div>
-                <h3 className="font-semibold text-card-foreground mb-2">
-                  Preview Image
-                </h3>
-                <div className="aspect-video bg-muted rounded-md overflow-hidden relative flex items-center justify-center">
-                  {!imageError ? (
-                    <img
-                      src={metaData.image}
-                      alt="Meta preview image"
-                      className="w-full h-full object-cover"
-                      onError={() => setImageError(true)}
+                {metaData.image && (
+                  <div>
+                    <h3 className="font-semibold text-card-foreground mb-2">
+                      Preview Image
+                    </h3>
+                    <div className="aspect-video bg-muted rounded-md overflow-hidden relative flex items-center justify-center">
+                      {!imageError ? (
+                        <img
+                          src={metaData.image}
+                          alt="Meta preview image"
+                          className="w-full h-full object-cover"
+                          onError={() => setImageError(true)}
+                        />
+                      ) : (
+                        <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                          <ImageOff className="h-8 w-8" />
+                          <span>Image not available</span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+              <div className="space-y-6">
+                <div>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-semibold text-card-foreground">
+                        Meta Title
+                      </h3>
+                      <LengthIndicator
+                        length={editableTitle.length}
+                        type="title"
+                      />
+                      <span className="text-sm text-muted-foreground">
+                        {editableTitle.length} Characters
+                      </span>
+                    </div>
+                    <div className="flex items-center">
+                      <CopyButton textToCopy={editableTitle} />
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => setIsEditingTitle(!isEditingTitle)}
+                        className="h-8 w-8"
+                      >
+                        {isEditingTitle ? (
+                          <Check className="h-4 w-4" />
+                        ) : (
+                          <Edit className="h-4 w-4" />
+                        )}
+                        <span className="sr-only">
+                          {isEditingTitle ? "Done editing" : "Edit"}
+                        </span>
+                      </Button>
+                    </div>
+                  </div>
+                  <p className="text-sm text-muted-foreground mt-1 mb-2">
+                    The title of the page, ideally between 30 and 60
+                    characters.
+                  </p>
+                  {isEditingTitle ? (
+                    <Input
+                      value={editableTitle}
+                      onChange={(e) => setEditableTitle(e.target.value)}
+                      className="w-full"
+                      placeholder="Meta Title"
                     />
                   ) : (
-                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
-                      <ImageOff className="h-8 w-8" />
-                      <span>Image not available</span>
+                    <p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[40px] break-words">
+                      {editableTitle || "Not found"}
+                    </p>
+                  )}
+                </div>
+                <div>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-semibold text-card-foreground">
+                        Meta Description
+                      </h3>
+                      <LengthIndicator
+                        length={editableDescription.length}
+                        type="description"
+                      />
+                      <span className="text-sm text-muted-foreground">
+                        {editableDescription.length} Characters
+                      </span>
                     </div>
+                    <div className="flex items-center">
+                      <CopyButton textToCopy={editableDescription} />
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() =>
+                          setIsEditingDescription(!isEditingDescription)
+                        }
+                        className="h-8 w-8"
+                      >
+                        {isEditingDescription ? (
+                          <Check className="h-4 w-4" />
+                        ) : (
+                          <Edit className="h-4 w-4" />
+                        )}
+                        <span className="sr-only">
+                          {isEditingDescription ? "Done editing" : "Edit"}
+                        </span>
+                      </Button>
+                    </div>
+                  </div>
+                  <p className="text-sm text-muted-foreground mt-1 mb-2">
+                    A brief summary of the page's content, ideally between 120
+                    and 158 characters.
+                  </p>
+                  {isEditingDescription ? (
+                    <Textarea
+                      value={editableDescription}
+                      onChange={(e) =>
+                        setEditableDescription(e.target.value)
+                      }
+                      className="w-full min-h-[100px]"
+                      placeholder="Meta Description"
+                    />
+                  ) : (
+                    <p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[100px] break-words">
+                      {editableDescription || "Not found"}
+                    </p>
                   )}
                 </div>
               </div>
-            )}
-            <div>
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <h3 className="font-semibold text-card-foreground">
-                    Meta Title
-                  </h3>
-                  <LengthIndicator
-                    length={editableTitle.length}
-                    type="title"
-                  />
-                  <span className="text-sm text-muted-foreground">
-                    {editableTitle.length} Characters
-                  </span>
-                </div>
-                <div className="flex items-center">
-                  <CopyButton textToCopy={editableTitle} />
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => setIsEditingTitle(!isEditingTitle)}
-                    className="h-8 w-8"
-                  >
-                    {isEditingTitle ? (
-                      <Check className="h-4 w-4" />
-                    ) : (
-                      <Edit className="h-4 w-4" />
-                    )}
-                    <span className="sr-only">
-                      {isEditingTitle ? "Done editing" : "Edit"}
-                    </span>
-                  </Button>
-                </div>
-              </div>
-              <p className="text-sm text-muted-foreground mt-1 mb-2">
-                The title of the page, ideally between 30 and 60 characters.
-              </p>
-              {isEditingTitle ? (
-                <Input
-                  value={editableTitle}
-                  onChange={(e) => setEditableTitle(e.target.value)}
-                  className="w-full"
-                  placeholder="Meta Title"
-                />
-              ) : (
-                <p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[40px] break-words">
-                  {editableTitle || "Not found"}
-                </p>
-              )}
-            </div>
-            <div>
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <h3 className="font-semibold text-card-foreground">
-                    Meta Description
-                  </h3>
-                  <LengthIndicator
-                    length={editableDescription.length}
-                    type="description"
-                  />
-                  <span className="text-sm text-muted-foreground">
-                    {editableDescription.length} Characters
-                  </span>
-                </div>
-                <div className="flex items-center">
-                  <CopyButton textToCopy={editableDescription} />
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={() =>
-                      setIsEditingDescription(!isEditingDescription)
-                    }
-                    className="h-8 w-8"
-                  >
-                    {isEditingDescription ? (
-                      <Check className="h-4 w-4" />
-                    ) : (
-                      <Edit className="h-4 w-4" />
-                    )}
-                    <span className="sr-only">
-                      {isEditingDescription ? "Done editing" : "Edit"}
-                    </span>
-                  </Button>
-                </div>
-              </div>
-              <p className="text-sm text-muted-foreground mt-1 mb-2">
-                A brief summary of the page's content, ideally between 120 and
-                158 characters.
-              </p>
-              {isEditingDescription ? (
-                <Textarea
-                  value={editableDescription}
-                  onChange={(e) => setEditableDescription(e.target.value)}
-                  className="w-full min-h-[100px]"
-                  placeholder="Meta Description"
-                />
-              ) : (
-                <p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[100px] break-words">
-                  {editableDescription || "Not found"}
-                </p>
-              )}
             </div>
           </CardContent>
         </Card>