From 9cbc9b383eb74d800e33f041a9f9b82b52a11e44 Mon Sep 17 00:00:00 2001
From: admbrainsteel <admtracksteel@gmail.com>
Date: Thu, 8 Oct 2026 14:19:48 -0300
Subject: [PATCH] fix: Alinhamento vertical dos controles 3D - largura uniforme
 e alinhamento de bordas

---
 src/components/viewer3d/ModelViewer3D.tsx | 46 +++++++++++------------
 1 file changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/components/viewer3d/ModelViewer3D.tsx b/src/components/viewer3d/ModelViewer3D.tsx
index 576fd00..d0322cb 100644
--- a/src/components/viewer3d/ModelViewer3D.tsx
+++ b/src/components/viewer3d/ModelViewer3D.tsx
@@ -1168,14 +1168,15 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
       />
 
       {/* Top Right: ViewCube + Controles Rápidos de Câmera + Painel de Ações de Seleção de Peças */}
-      <div className="absolute top-4 right-4 z-20 flex flex-col items-end gap-2.5 pointer-events-auto">
-        <div className="flex items-start gap-2">
+      <div className="absolute top-4 right-4 z-20 flex flex-col items-stretch gap-2 pointer-events-auto w-[140px]">
+        {/* Bloco Superior: Botões de Navegação + ViewCube perfeitamente alinhados */}
+        <div className="w-full flex items-start justify-between">
           {/* Botões Rápidos de Navegação ao lado do Cubo (Ortogonalidade e Enquadrar) */}
           <div className="flex flex-col gap-1.5 items-center justify-center pt-0.5">
             {/* Botão Alternar Vista Ortogonal / Perspectiva */}
             <button
               onClick={handleToggleCamera}
-              className={`flex items-center justify-center p-2 rounded-2xl backdrop-blur-md border transition-all duration-150 active:scale-95 shadow-lg ${
+              className={`w-9 h-9 flex items-center justify-center rounded-2xl backdrop-blur-md border transition-all duration-150 active:scale-95 shadow-lg ${
                 isOrthographic
                   ? 'bg-emerald-500 text-white border-emerald-400 shadow-emerald-500/30 dark:bg-emerald-600 dark:border-emerald-500'
                   : 'bg-white/95 dark:bg-slate-900/95 text-slate-700 dark:text-slate-200 border-slate-300 dark:border-slate-700 hover:text-emerald-600 dark:hover:text-emerald-400 hover:bg-slate-100 dark:hover:bg-slate-800 shadow-slate-300/30 dark:shadow-slate-950/50'
@@ -1193,7 +1194,7 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
             <button
               onClick={() => fitModelToView(modelGroupRef.current)}
               disabled={!modelData}
-              className={`flex items-center justify-center p-2 rounded-2xl bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border border-slate-300 dark:border-slate-700 shadow-lg shadow-slate-300/30 dark:shadow-slate-950/50 transition-all duration-150 active:scale-95 ${
+              className={`w-9 h-9 flex items-center justify-center rounded-2xl bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border border-slate-300 dark:border-slate-700 shadow-lg shadow-slate-300/30 dark:shadow-slate-950/50 transition-all duration-150 active:scale-95 ${
                 modelData
                   ? 'text-slate-700 hover:text-cyan-600 dark:text-slate-200 dark:hover:text-cyan-400 hover:bg-slate-100 dark:hover:bg-slate-800 cursor-pointer'
                   : 'text-slate-400 dark:text-slate-600 opacity-40 cursor-not-allowed'
@@ -1209,12 +1210,11 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
 
         {/* Card de Controle de Seleção Flutuante Harmonizado Abaixo do Cubo */}
         <div
-          className={`flex flex-col items-stretch gap-1.5 p-2 rounded-2xl backdrop-blur-md border transition-all duration-200 shadow-lg ${
+          className={`w-full flex flex-col items-stretch gap-1.5 p-2 rounded-2xl backdrop-blur-md border transition-all duration-200 shadow-lg ${
             selectedCount > 0
               ? 'bg-white/95 dark:bg-slate-900/95 border-slate-300 dark:border-slate-700 shadow-slate-300/40 dark:shadow-slate-950/60 ring-1 ring-blue-500/20'
               : 'bg-white/80 dark:bg-slate-900/70 border-slate-200 dark:border-slate-800/80 opacity-75 hover:opacity-100'
           }`}
-          style={{ minWidth: '130px' }}
         >
           {/* Badge Indicador de Seleção Ativa Sóbrio */}
           {selectedCount > 0 && (
@@ -1226,11 +1226,11 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
             </div>
           )}
 
-          {/* Botão Gerar Lista da Seleção (Azul Escuro no claro / Azul Elegante no escuro) */}
+          {/* Botão Gerar Lista da Seleção */}
           <button
             onClick={() => setIsSelectionModalOpen(true)}
             disabled={selectedCount === 0}
-            className={`flex items-center justify-center gap-1.5 px-2.5 py-1.5 rounded-xl text-[11px] font-bold transition-all duration-200 cursor-pointer ${
+            className={`w-full flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-xl text-[11px] font-bold transition-all duration-200 cursor-pointer ${
               selectedCount > 0
                 ? 'bg-blue-950 hover:bg-blue-900 text-white shadow-sm dark:bg-blue-600 dark:hover:bg-blue-500 scale-[1.02] active:scale-[0.98]'
                 : 'bg-slate-100 dark:bg-slate-800/50 text-slate-400 dark:text-slate-500 border border-slate-200 dark:border-slate-800 cursor-not-allowed opacity-50'
@@ -1245,11 +1245,11 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
             <span className="whitespace-nowrap">Gerar lista</span>
           </button>
 
-          {/* Botão Limpar Seleção Harmonizado */}
+          {/* Botão Limpar Seleção */}
           <button
             onClick={handleClearSelection}
             disabled={selectedCount === 0}
-            className={`flex items-center justify-center gap-1.5 px-2.5 py-1 rounded-xl text-[10px] font-semibold transition-all duration-200 cursor-pointer ${
+            className={`w-full flex items-center justify-center gap-1.5 px-2 py-1 rounded-xl text-[10px] font-semibold transition-all duration-200 cursor-pointer ${
               selectedCount > 0
                 ? 'text-slate-600 hover:text-rose-600 hover:bg-rose-50 border border-slate-200 dark:border-slate-700 dark:text-slate-400 dark:hover:text-rose-300 dark:hover:bg-rose-950/30 active:scale-[0.98]'
                 : 'text-slate-400 dark:text-slate-600 border border-transparent cursor-not-allowed opacity-40'
@@ -1262,24 +1262,21 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
         </div>
 
         {/* Card de Ajuste e Travamento de Rotação 3D (Tombamento 90° + Cadeado Memorizável) */}
-        <div
-          className="flex items-center gap-1.5 p-1.5 rounded-2xl bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border border-slate-300 dark:border-slate-700 shadow-lg shadow-slate-300/30 dark:shadow-slate-950/50 pointer-events-auto"
-          style={{ minWidth: '130px' }}
-        >
+        <div className="w-full flex items-center gap-1.5 p-1.5 rounded-2xl bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border border-slate-300 dark:border-slate-700 shadow-lg shadow-slate-300/30 dark:shadow-slate-950/50 pointer-events-auto">
           {/* Botão Rotacionar / Tombar 90° */}
           <button
             onClick={handleRotate90X}
             disabled={!modelData}
-            className={`flex-1 flex items-center justify-center gap-1.5 px-2.5 py-1.5 rounded-xl text-[11px] font-bold transition-all duration-150 active:scale-95 ${
+            className={`flex-1 min-w-0 flex items-center justify-center gap-1 px-1.5 py-1.5 rounded-xl text-[10px] font-bold transition-all duration-150 active:scale-95 ${
               modelData
                 ? 'bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-100 cursor-pointer shadow-sm'
                 : 'bg-slate-100/50 dark:bg-slate-800/30 text-slate-400 dark:text-slate-600 cursor-not-allowed opacity-50'
             }`}
             title="Girar o modelo 90° no eixo de tombamento (adequar orientação Z/Y)"
           >
-            <RotateCw className="w-3.5 h-3.5 text-blue-600 dark:text-blue-400" />
+            <RotateCw className="w-3 h-3 text-blue-600 dark:text-blue-400 shrink-0" />
             <span className="whitespace-nowrap">Girar 90°</span>
-            <span className="text-[10px] font-mono font-normal text-slate-600 dark:text-slate-300 bg-white dark:bg-slate-950 px-1 py-0.2 rounded border border-slate-200 dark:border-slate-800">
+            <span className="text-[9px] font-mono font-normal text-slate-600 dark:text-slate-300 bg-white dark:bg-slate-950 px-1 py-0.2 rounded border border-slate-200 dark:border-slate-800 shrink-0">
               {rotationX}°
             </span>
           </button>
@@ -1288,7 +1285,7 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
           <button
             onClick={handleToggleLockRotation}
             disabled={!modelData}
-            className={`flex items-center justify-center p-1.5 rounded-xl transition-all duration-200 active:scale-95 border ${
+            className={`flex items-center justify-center p-1.5 rounded-xl transition-all duration-200 active:scale-95 border shrink-0 ${
               !modelData
                 ? 'bg-slate-100/50 dark:bg-slate-800/30 text-slate-400 border-transparent cursor-not-allowed opacity-40'
                 : isRotationLocked
@@ -1302,17 +1299,16 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
             }
           >
             {isRotationLocked ? (
-              <Lock className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
+              <Lock className="w-3.5 h-3.5 text-emerald-600 dark:text-emerald-400" />
             ) : (
-              <Unlock className="w-4 h-4 text-amber-600 dark:text-amber-400" />
+              <Unlock className="w-3.5 h-3.5 text-amber-600 dark:text-amber-400" />
             )}
           </button>
         </div>
 
-        {/* Card de Luminosidade Expandido (Alinhado com a largura dos cards acima) */}
+        {/* Card de Luminosidade Expandido (Alinhado com a largura uniforme da coluna) */}
         <div
-          className="flex items-center gap-2 px-2.5 py-2 rounded-2xl bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border border-slate-300 dark:border-slate-700 shadow-lg shadow-slate-300/30 dark:shadow-slate-950/50 pointer-events-auto"
-          style={{ width: '100%', minWidth: '145px' }}
+          className="w-full flex items-center gap-1.5 px-2.5 py-1.5 rounded-2xl bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border border-slate-300 dark:border-slate-700 shadow-lg shadow-slate-300/30 dark:shadow-slate-950/50 pointer-events-auto"
           title="Ajuste de Luminosidade da Estrutura (arraste para clarear ou suavizar sombras das peças)"
         >
           <button
@@ -1330,9 +1326,9 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
             step="5"
             value={brightness}
             onChange={(e) => setBrightness(Number(e.target.value))}
-            className="flex-1 h-1.5 bg-slate-200 dark:bg-slate-700 rounded-lg appearance-none cursor-pointer accent-amber-500"
+            className="flex-1 min-w-0 h-1.5 bg-slate-200 dark:bg-slate-700 rounded-lg appearance-none cursor-pointer accent-amber-500"
           />
-          <span className="text-[10px] font-mono font-bold text-slate-600 dark:text-slate-300 min-w-[30px] text-right shrink-0">
+          <span className="text-[10px] font-mono font-bold text-slate-600 dark:text-slate-300 min-w-[28px] text-right shrink-0">
             {brightness}%
           </span>
         </div>