diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 0829529..a278e69 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -49,7 +49,7 @@ export const Layout = ({ children }: LayoutProps) => {
             </div>
           </header>
           {/* Conteúdo principal */}
-          <div className="flex-1 overflow-auto">
+          <div className="flex-1 overflow-auto flex flex-col min-h-0">
             {children}
           </div>
         </main>
diff --git a/src/components/viewer3d/ModelViewer3D.tsx b/src/components/viewer3d/ModelViewer3D.tsx
index cc6e449..d83e901 100644
--- a/src/components/viewer3d/ModelViewer3D.tsx
+++ b/src/components/viewer3d/ModelViewer3D.tsx
@@ -235,11 +235,12 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
     };
     animate();
 
-    // 8. Resize Handler
+    // 8. Resize Handler com ResizeObserver para garantir cálculo perfeito de dimensões
     const handleResize = () => {
       if (!canvasContainerRef.current || !rendererRef.current) return;
       const w = canvasContainerRef.current.clientWidth;
       const h = canvasContainerRef.current.clientHeight;
+      if (w <= 0 || h <= 0) return;
 
       perspCamera.aspect = w / h;
       perspCamera.updateProjectionMatrix();
@@ -255,9 +256,17 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
     };
     window.addEventListener('resize', handleResize);
 
+    const resizeObserver = new ResizeObserver(() => {
+      handleResize();
+    });
+    if (canvasContainerRef.current) {
+      resizeObserver.observe(canvasContainerRef.current);
+    }
+
     return () => {
       cancelAnimationFrame(animationFrameId);
       window.removeEventListener('resize', handleResize);
+      resizeObserver.disconnect();
       themeObserver.disconnect();
       renderer.dispose();
     };
diff --git a/src/pages/Visualizador3D.tsx b/src/pages/Visualizador3D.tsx
index aebf720..865a2ae 100644
--- a/src/pages/Visualizador3D.tsx
+++ b/src/pages/Visualizador3D.tsx
@@ -501,7 +501,7 @@ export default function Visualizador3D() {
   const hasSavedModel = Boolean(currentOFInfo?.ifc_url);
 
   return (
-    <div className="flex flex-col flex-1 min-h-0 p-4 md:p-6 space-y-4 max-w-[1920px] mx-auto overflow-hidden">
+    <div className="flex flex-col flex-1 h-[calc(100vh-var(--hub-banner-height,0px)-4rem)] min-h-[600px] w-full p-4 md:p-6 space-y-4 max-w-[1920px] mx-auto">
       {/* Top Header Bar */}
       <div className="flex flex-wrap items-center justify-between gap-4 p-4 bg-white dark:bg-slate-900/90 backdrop-blur-md border border-slate-200 dark:border-slate-800 rounded-2xl shadow-lg dark:shadow-xl">
         {/* Left: Title, OF Selector & Phase Filter */}
@@ -695,7 +695,7 @@ export default function Visualizador3D() {
       </div>
 
       {/* Main 3D Viewport */}
-      <div className="relative flex-1 w-full bg-slate-100 dark:bg-slate-950 rounded-2xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-xl dark:shadow-2xl">
+      <div className="relative flex-1 min-h-[480px] w-full bg-slate-100 dark:bg-slate-950 rounded-2xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-xl dark:shadow-2xl">
         {isLoadingModel && (
           <div className="absolute inset-0 z-30 flex flex-col items-center justify-center p-6 bg-white dark:bg-slate-950/90 backdrop-blur-md text-slate-900 dark:text-white space-y-4">
             <div className="p-4 bg-cyan-100 text-cyan-600 dark:bg-cyan-500/20 dark:text-cyan-400 rounded-2xl border border-cyan-300 dark:border-cyan-500/40 animate-pulse">