render_example: fix image width in mobile view

GooeyAI · Mar 7, 2025 · 36437a5 · 36437a5
1 parent 03bbd32
commit 36437a5
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/daras_ai_v2/base.py b/daras_ai_v2/base.py
@@ -2368,14 +2368,18 @@ def render_example_author_meta():
                     }
 
                     & .gui_example_media .gui-img, .gui-video {
-                        width: fit-content !important;
+                        max-width: 150px !important;
                         height: 100% !important;
                     }
 
                     @media (max-width: 768px) {
                         & .gui_example_media {
                             height: 86px;
                         }
+                        & .gui_example_media .gui-img, .gui-video {
+                            max-width:  86px !important;
+                            height: 100% !important;
+                        }
                     }
                 """
             ):
@@ -2430,11 +2434,12 @@ def render_example_author_meta():
                                                     unsafe_allow_html=True,
                                                 )
                             with gui.div(
-                                className="flex-grow-1 d-flex justify-content-end gui_example_media"
+                                className="flex-grow-1 d-flex justify-content-end"
                             ):
-                                self.render_example_preview_media(
-                                    published_run=published_run
-                                )
+                                with gui.div(className="gui_example_media"):
+                                    self.render_example_preview_media(
+                                        published_run=published_run
+                                    )
             with gui.div(className="d-md-none"):
                 render_example_author_meta()
                 with gui.div(className="container-margin-reset mt-2 mt-md-0"):