Upload custom.css

ui/assets/css/custom.css

@@ -949,10 +949,11 @@ h1, h2, h3, h4, h5, h6 {
     transform: scale(1.1) !important;
 }
 
-/* === SCENE DISPLAY STYLES (for future phases) === */
+/* === SCENE DISPLAY STYLES (Gradio 6 compatible) === */
 .scene-container {
     position: relative !important;
     width: 100% !important;
+    min-width: 100% !important;
     max-width: none !important;
     border-radius: 12px !important;
     overflow: hidden !important;
@@ -960,30 +961,31 @@ h1, h2, h3, h4, h5, h6 {
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
 }
 
-.scene-image {
+/* Force all Gradio wrapper elements to take full width */
+.scene-image,
+.scene-image > *,
+.scene-image > * > *,
+.scene-image [class*="svelte"],
+.scene-image .image-container,
+.scene-image .wrap {
     width: 100% !important;
+    min-width: 100% !important;
     max-width: none !important;
-    height: 350px !important;
-    object-fit: cover !important;
-    filter: brightness(0.85) contrast(1.1) !important;
-    transition: all 0.8s ease !important;
 }
 
-.scene-image img {
-    width: 100% !important;
-    max-width: none !important;
-    height: 100% !important;
-    object-fit: cover !important;
+/* Image container specific sizing */
+.scene-image {
+    height: 350px !important;
+    display: block !important;
 }
 
-/* Force Gradio image container to be full width */
-.scene-image > div,
-.scene-image > div > div,
-.scene-image > div > div > img {
+/* Target the actual image element */
+.scene-image img {
+    display: block !important;
     width: 100% !important;
-    max-width: none !important;
     height: 350px !important;
     object-fit: cover !important;
+    filter: brightness(0.85) contrast(1.1) !important;
 }
 
 .scene-image.transitioning {