From 3f3e5fc33b7cb6907c394de20d6c84044caa1593 Mon Sep 17 00:00:00 2001
From: VPS 4 Deploy Agent <deploy@clube67.com>
Date: Sat, 30 May 2026 21:26:48 +0200
Subject: [PATCH] =?UTF-8?q?fix(transform):=20imagens=20n=C3=A3o=20cortadas?=
 =?UTF-8?q?=20nas=204=20posi=C3=A7=C3=B5es=20(70%=3D1/=E2=88=9A2)=20e=20no?=
 =?UTF-8?q?=20ajuste=20fino=20(sem=20overflow=20hidden)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dental-client/src/components/TransformModal.jsx          | 5 +++--
 dental-server/dental-client/src/index.css                    | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/dental-server/dental-client/src/components/TransformModal.jsx b/dental-server/dental-client/src/components/TransformModal.jsx
index 0464f8a..a7c0dbb 100644
--- a/dental-server/dental-client/src/components/TransformModal.jsx
+++ b/dental-server/dental-client/src/components/TransformModal.jsx
@@ -314,12 +314,13 @@ export default function TransformModal({ isOpen, onClose, image, onSaved }) {
                   onMouseLeave={(e) => (e.currentTarget.style.borderColor = 'var(--glass-border)')}
                   title={`Usar ${deg}° ${pg.flipH ? '(espelho H)' : pg.flipV ? '(espelho V)' : ''}`}
                 >
-                  <div style={{ width: '100%', aspectRatio: '1 / 1', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
+                  {/* max 70% = 1/√2: garante que ao rotacionar 90° a imagem cabe no quadrado sem cortar */}
+                  <div style={{ width: '100%', aspectRatio: '1 / 1', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                     <img
                       src={imageUrl}
                       alt={`${deg}°`}
                       loading="lazy"
-                      style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', transform: cssTransform(deg, pg.flipH, pg.flipV) }}
+                      style={{ maxWidth: '70%', maxHeight: '70%', objectFit: 'contain', transform: cssTransform(deg, pg.flipH, pg.flipV), transformOrigin: 'center' }}
                     />
                   </div>
                   <span style={{ fontSize: '0.8rem', fontWeight: 600, color: 'var(--text-secondary)' }}>
diff --git a/dental-server/dental-client/src/index.css b/dental-server/dental-client/src/index.css
index 408c613..9368f4b 100644
--- a/dental-server/dental-client/src/index.css
+++ b/dental-server/dental-client/src/index.css
@@ -419,8 +419,9 @@ body {
 }
 
 .panel-title { font-size: 1rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 16px; }
-.transform-panel .img-container { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden; border-radius: var(--radius-sm); }
-.transform-panel img { max-width: 100%; max-height: 300px; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: block; }
+/* overflow: visible para não cortar imagens rotacionadas */
+.transform-panel .img-container { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px; box-sizing: border-box; }
+.transform-panel img { max-width: 100%; max-height: 320px; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: block; }
 
 .transform-sidebar {
     width: 80px; display: flex; flex-direction: column;