From 27836c9bce3cd7b4c9ae115464fe33c2c4ecaed5 Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Sun, 18 Jan 2026 12:04:41 +0100
Subject: [PATCH] [dyad] Improved aspect ratio presets - wrote 1 file(s)

---
 src/components/image-converter.tsx | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/image-converter.tsx b/src/components/image-converter.tsx
index 91eeb9b..1d0f0c9 100644
--- a/src/components/image-converter.tsx
+++ b/src/components/image-converter.tsx
@@ -294,11 +294,28 @@ export function ImageConverter() {
 
   const handleAspectRatioChange = (value: string) => {
     setAspectRatio(value);
-    if (value !== 'custom' && width) {
-      const [w, h] = value.split('/').map(Number);
-      const newHeight = Math.round(Number(width) * (h / w));
-      setHeight(newHeight);
+
+    if (value === "custom") {
+      return;
     }
+
+    const [w, h] = value.split("/").map(Number);
+    let newWidth: number;
+    let newHeight: number;
+
+    if (w > h) {
+      newWidth = 1000;
+      newHeight = Math.round((1000 * h) / w);
+    } else if (h > w) {
+      newHeight = 1000;
+      newWidth = Math.round((1000 * w) / h);
+    } else {
+      newWidth = 1000;
+      newHeight = 1000;
+    }
+
+    setWidth(newWidth);
+    setHeight(newHeight);
   };
 
   const handleWidthChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -315,7 +332,7 @@ export function ImageConverter() {
 
   return (
     <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 w-full">
-      <div className="lg:col-span-1 flex flex-col gap-8">
+      <div className="lg-col-span-1 flex flex-col gap-8">
         <Accordion type="single" collapsible defaultValue="image-settings" className="w-full space-y-8">
           <AccordionItem value="image-settings" className="border rounded-lg bg-card">
             <AccordionTrigger className="p-6 hover:no-underline">