Update app.py

app.py

@@ -211,46 +211,45 @@ class CustomTheme(gr.themes.Base):
         )
 
 css = """
-/* Универсальный сброс стилей */
-*, *::before, *::after {
-    box-sizing: border-box;
-}
-
+/* Сбрасываем отступы и делаем адаптив */
 html, body {
+    margin: 0;
+    padding: 0;
     background-color: #191a1e !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    width: 100vw !important;
-    height: 100vh !important;
-}
-
-/* Перекрываем потенциальные обёртки Hugging Face */
-#root, #__next, body > div, body > div > div, body > div > div > div {
-    background-color: #191a1e !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    border: none !important;
-    width: 100% !important;
-    height: 100% !important;
+    color: #FFFFFF;
+    font-family: 'Poppins', sans-serif;
 }
 
+/* Общий контейнер приложения */
 .gradio-container, .gr-app {
     background-color: #191a1e !important;
-    width: 100% !important;
-    height: 100% !important;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh; /* тянем на всю высоту окна */
+    width: 100%;
 }
 
+/* Основная обертка под контент */
 .gr-block, .gr-row, .gr-column, .gr-box, 
 .gr-examples, .gr-examples .gr-box, .gr-examples .gr-card {
     background-color: #191a1e !important;
     border: none !important;
 }
 
-/* Резервируем место справа для того, чтобы при показе 3D модели верстка не прыгала */
-#right_column {
-    min-height: 1000px; /* Подберите нужное значение */
+/* Верхний ряд с контентом будет адаптивным */
+.gr-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
 }
 
+/* Колонки также адаптивны */
+.gr-column {
+    flex: 1 1 300px;
+    min-width: 300px;
+}
+
+/* Кнопка */
 .generate-button {
     background-color: #5271FF !important;
     color: #FFFFFF !important;
@@ -261,12 +260,24 @@ html, body {
     border-radius: 0.3em !important;
 }
 
+/* Примеры (Examples) делаем адаптивными внизу */
+.gr-examples {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 10px !important;
+    justify-content: flex-start !important;
+    align-items: center !important;
+}
+
+/* Пример одной картинки */
+.gr-examples img {
+    max-height: 64px;
+    object-fit: contain;
+}
+
+/* Скрываем футер */
 footer {
-    visibility: hidden !important;
-    height: 0 !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    overflow: hidden !important;
+    display: none !important;
 }
 """
 
@@ -312,7 +323,7 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
                 elem_classes="generate-button",
             )
 
-        with gr.Column(elem_id="right_column"):
+        with gr.Column():
             output_3d = LitModel3D(
                 label="3D Model",
                 visible=False,