fix(transform): botão Posições no header antes do nome + imagens não estouram no ajuste fino

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>

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%' }}>
                 {[

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;