Action2

src/apps/tracy/pages/TracyPage.module.css

@@ -45,25 +45,24 @@
 .canvasWrapper {
   position: relative;
   width: 100%;
+  aspect-ratio: 800/640;
   background: #0a0a0f;
   border-radius: 8px;
-  overflow: visible;
+  overflow: hidden;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 300px;
 }
 
 .canvas {
-  max-width: 100%;
-  max-height: 70vh;
+  width: 100%;
+  height: 100%;
   object-fit: contain;
   user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: default;
   touch-action: manipulation;
-  border-radius: 4px;
 }
 
 .loadingOverlay {
@@ -141,16 +140,13 @@
 .result {
   width: 100%;
   text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
 }
 
 .resultActions {
   display: flex;
   gap: 0.5rem;
   justify-content: center;
+  margin-top: 1rem;
   flex-wrap: wrap;
 }
 

src/apps/tracy/pages/TracyPage.tsx

@@ -206,48 +206,25 @@ const TracyPage = () => {
             )}
 
             {imageData && !isLoading && (
-              <div className={styles.result}>
-                <canvas
-                  id="render-canvas"
-                  className={styles.canvas}
-                  width={imageData.width}
-                  height={imageData.height}
-                  ref={(canvas) => {
-                    if (canvas && imageData) {
-                      const ctx = canvas.getContext('2d')
-                      if (ctx) {
-                        const img = new Image()
-                        img.onload = () => {
-                          ctx.clearRect(0, 0, canvas.width, canvas.height)
-                          ctx.drawImage(img, 0, 0)
-                        }
-                        img.src = `data:image/png;base64,${imageData.base64_png}`
+              <canvas
+                id="render-canvas"
+                className={styles.canvas}
+                width={imageData.width}
+                height={imageData.height}
+                ref={(canvas) => {
+                  if (canvas && imageData) {
+                    const ctx = canvas.getContext('2d')
+                    if (ctx) {
+                      const img = new Image()
+                      img.onload = () => {
+                        ctx.clearRect(0, 0, canvas.width, canvas.height)
+                        ctx.drawImage(img, 0, 0)
                       }
+                      img.src = `data:image/png;base64,${imageData.base64_png}`
                     }
-                  }}
-                />
-
-                <div className={styles.resultActions}>
-                  <button onClick={downloadImage} className={styles.downloadButton}>
-                    📥 Download
-                  </button>
-                  <button
-                    id="copy-button"
-                    onClick={copyToClipboard}
-                    className={styles.copyButton}
-                  >
-                    📋 Copy to Clipboard
-                  </button>
-                  <button
-                    id="blur-button"
-                    onClick={blurImage}
-                    disabled={isLoading}
-                    className={styles.blurButton}
-                  >
-                    🌊 Blur
-                  </button>
-                </div>
-              </div>
+                  }
+                }}
+              />
             )}
 
             {!imageData && !isLoading && !error && (
@@ -257,6 +234,29 @@ const TracyPage = () => {
               </div>
             )}
           </div>
+
+          {imageData && !isLoading && (
+            <div className={styles.resultActions}>
+              <button onClick={downloadImage} className={styles.downloadButton}>
+                📥 Download
+              </button>
+              <button
+                id="copy-button"
+                onClick={copyToClipboard}
+                className={styles.copyButton}
+              >
+                📋 Copy to Clipboard
+              </button>
+              <button
+                id="blur-button"
+                onClick={blurImage}
+                disabled={isLoading}
+                className={styles.blurButton}
+              >
+                🌊 Blur
+              </button>
+            </div>
+          )}
         </div>
       </div>
     </div>