Changed Layout to limit wide screen mismatches

app.py

@@ -234,52 +234,51 @@ with gr.Blocks(css_paths="style_20250503.css", title="3D viewer", theme='Surn/be
             model_3d = gr.Model3D(
                 label="3D Model",
                 value=None,
-                height=480,
-                elem_id="model_3d", key="model_3d", clear_color=[1.0, 1.0, 1.0, 0.1], 
+                elem_id="model_3d", key="model_3d", clear_color=[1.0, 1.0, 1.0, 0.1],
                 elem_classes="centered solid imgcontainer", interactive=True
                 
             )
             image_slider = gr.ImageSlider(
                 label="2D Images",
                 value=None,
-                height=480,
+                height="100%",
                 elem_id="image_slider", key="image_slider",
                 type="filepath"
             )
         
-    with gr.Row():
-        gr.Markdown("## Upload your own files")
-        gr.Markdown("### Supported formats: " + ", ".join([f"`{ext}`" for ext in constants.upload_file_types]))
-    with gr.Row():
-        upload_btn = gr.UploadButton(
-            "Upload 3D Files", elem_id="upload_btn", key="upload_btn",
-            file_count="multiple",
-            file_types=constants.upload_file_types
-        )
+            with gr.Row():
+                gr.Markdown("## Upload your own files")
+                gr.Markdown("### Supported formats: " + ", ".join([f"`{ext}`" for ext in constants.upload_file_types]))
+            with gr.Row():
+                upload_btn = gr.UploadButton(
+                    "Upload 3D Files", elem_id="upload_btn", key="upload_btn",
+                    file_count="multiple",
+                    file_types=constants.upload_file_types
+                )
         
-    with gr.Row():
-        # New textbox for folder name.
-        folder_name_box = gr.Textbox(
-            label="Folder Name",
-            value=default_folder,
-            elem_id="folder_name",
-            key="folder_name",
-            placeholder="Enter folder name...",
-            elem_classes="solid centered"
-        )
-        permalink_button = gr.Button("Generate Permalink", elem_id="permalink_button", key="permalink_button", elem_classes="solid small centered")
+            with gr.Row():
+                # New textbox for folder name.
+                folder_name_box = gr.Textbox(
+                    label="Folder Name",
+                    value=default_folder,
+                    elem_id="folder_name",
+                    key="folder_name",
+                    placeholder="Enter folder name...",
+                    elem_classes="solid centered"
+                )
+                permalink_button = gr.Button("Generate Permalink", elem_id="permalink_button", key="permalink_button", elem_classes="solid small centered")
 
-    with gr.Row(visible=False, elem_id="permalink_row") as permalink_row:
-        permalink = gr.Textbox(
-            show_copy_button=True,
-            label="Permalink",
-            elem_id="permalink",
-            key="permalink",
-            elem_classes="solid centered",
-            max_lines=5,
-            lines=3
-        )
-        gr.Markdown("### Copy the permalink to share your model and images.", elem_classes="solid centered",)
+            with gr.Row(visible=False, elem_id="permalink_row") as permalink_row:
+                permalink = gr.Textbox(
+                    show_copy_button=True,
+                    label="Permalink",
+                    elem_id="permalink",
+                    key="permalink",
+                    elem_classes="solid centered",
+                    max_lines=5,
+                    lines=3
+                )
+                gr.Markdown("### Copy the permalink to share your model and images.", elem_classes="solid centered",)
     with gr.Row():
         gr.HTML(value=getVersions(), visible=True, elem_id="versions")
     

style_20250503.css

@@ -101,9 +101,14 @@ a {
 #gallery button.preview, #lora_gallery button.preview {
     position: relative !important;
 }
-
+.gradio-container #model_3d, .gradio-container #image_slider, .gradio-container #component-0 {
+    max-width: 1920px;
+    height: 100%;
+    margin: 10px auto;
+}
 .gradio-container .image-container .preview.svelte-k63p1v {
     object-fit: cover;
+    max-height: 1536px !important;
 }
 .gradio-container::before {
     content: ' ';