From 568e42abdd82c14c256718425e2a8d3492ffd546 Mon Sep 17 00:00:00 2001
From: VPS 4 Deploy Agent <deploy@clube67.com>
Date: Sat, 30 May 2026 21:17:06 +0200
Subject: [PATCH] =?UTF-8?q?fix(transform):=20bot=C3=A3o=20Posi=C3=A7=C3=B5?=
 =?UTF-8?q?es=20no=20header=20antes=20do=20nome=20+=20imagens=20n=C3=A3o?=
 =?UTF-8?q?=20estouram=20no=20ajuste=20fino?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dental-client/src/components/Modal.jsx     |  3 ++-
 .../src/components/TransformModal.jsx          | 18 +++++++++++-------
 dental-server/dental-client/src/index.css      |  4 ++--
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/dental-server/dental-client/src/components/Modal.jsx b/dental-server/dental-client/src/components/Modal.jsx
index 11d30b6..527d558 100644
--- a/dental-server/dental-client/src/components/Modal.jsx
+++ b/dental-server/dental-client/src/components/Modal.jsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-export default function Modal({ isOpen, onClose, title, children, large = true, actions = null, headerExtras = null }) {
+export default function Modal({ isOpen, onClose, title, children, large = true, actions = null, headerExtras = null, titlePrefix = null }) {
   // Fecha com ESC
   useEffect(() => {
     if (!isOpen) return;
@@ -16,6 +16,7 @@ export default function Modal({ isOpen, onClose, title, children, large = true,
       <div className={`modal-content${large ? ' modal-large' : ''}`}>
         <div className="modal-header">
           <div className="modal-title-group">
+            {titlePrefix}
             <h2>{title}</h2>
             {headerExtras}
           </div>
diff --git a/dental-server/dental-client/src/components/TransformModal.jsx b/dental-server/dental-client/src/components/TransformModal.jsx
index 30c8db0..0464f8a 100644
--- a/dental-server/dental-client/src/components/TransformModal.jsx
+++ b/dental-server/dental-client/src/components/TransformModal.jsx
@@ -247,6 +247,16 @@ export default function TransformModal({ isOpen, onClose, image, onSaved }) {
     </div>
   );
 
+  const titlePrefix = activeView === 'transform' && step === 'finetune' ? (
+    <button
+      type="button"
+      className="btn btn-secondary btn-small"
+      onClick={() => setStep('choose')}
+      style={{ marginRight: 8, flexShrink: 0 }}
+      title="Voltar para escolher a orientação"
+    >← Posições</button>
+  ) : null;
+
   return (
     <Modal
       isOpen={isOpen}
@@ -254,6 +264,7 @@ export default function TransformModal({ isOpen, onClose, image, onSaved }) {
       title={`${image.patient_name || 'Desconhecido'} — ${formatDate(image.created_at)}`}
       large
       headerExtras={headerExtras}
+      titlePrefix={titlePrefix}
     >
       {/* Info extra */}
       {showInfo && (
@@ -349,13 +360,6 @@ export default function TransformModal({ isOpen, onClose, image, onSaved }) {
 
             {/* Controles de rotação */}
             <div className="transform-sidebar">
-              <button
-                type="button"
-                className="btn btn-secondary btn-small"
-                onClick={() => setStep('choose')}
-                style={{ width: '100%', marginBottom: 12 }}
-                title="Voltar para escolher a orientação"
-              >← Posições</button>
               <h3 className="sidebar-title" style={{ fontSize: '0.65rem', textTransform: 'uppercase', letterSpacing: 1, color: 'var(--text-muted)', marginBottom: 12 }}>Ajuste</h3>
               <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center', width: '100%' }}>
                 {[
diff --git a/dental-server/dental-client/src/index.css b/dental-server/dental-client/src/index.css
index adb6e90..408c613 100644
--- a/dental-server/dental-client/src/index.css
+++ b/dental-server/dental-client/src/index.css
@@ -419,8 +419,8 @@ 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%; }
-.transform-panel img { max-width: 100%; max-height: 350px; object-fit: contain; border-radius: var(--radius-sm); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
+.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; }
 
 .transform-sidebar {
     width: 80px; display: flex; flex-direction: column;