diff --git a/src/apps/tracy/pages/TracyPage.module.css b/src/apps/tracy/pages/TracyPage.module.css index b50e0b5..e6bee59 100644 --- a/src/apps/tracy/pages/TracyPage.module.css +++ b/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; } diff --git a/src/apps/tracy/pages/TracyPage.tsx b/src/apps/tracy/pages/TracyPage.tsx index b3827bd..d213f37 100644 --- a/src/apps/tracy/pages/TracyPage.tsx +++ b/src/apps/tracy/pages/TracyPage.tsx @@ -206,48 +206,25 @@ const TracyPage = () => { )} {imageData && !isLoading && ( -