Update app.py

app.py

@@ -211,45 +211,43 @@ class CustomTheme(gr.themes.Base):
         )
 
 css = """
-/* Сбрасываем отступы и делаем адаптив */
-html, body {
-    margin: 0;
-    padding: 0;
+:root, html, body, #root, #__next, body > div, body > div > div, body > div > div > div {
     background-color: #191a1e !important;
-    color: #FFFFFF;
-    font-family: 'Poppins', sans-serif;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+    width: 100% !important;
+    min-height: 100%;
 }
 
-/* Общий контейнер приложения */
+/* Контейнер приложения */
 .gradio-container, .gr-app {
     background-color: #191a1e !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;
+/* Уменьшаем контейнеры с картинками */
+.gr-image img {
+    max-width: 300px !important;
+    max-height: 300px !important;
+    object-fit: contain;
 }
 
-/* Верхний ряд с контентом будет адаптивным */
+/* Адаптивная верстка */
 .gr-row {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
+    align-items: flex-start;
 }
 
-/* Колонки также адаптивны */
 .gr-column {
-    flex: 1 1 300px;
+    flex: 1 1 auto;
     min-width: 300px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 }
 
-/* Кнопка */
 .generate-button {
     background-color: #5271FF !important;
     color: #FFFFFF !important;
@@ -260,7 +258,7 @@ html, body {
     border-radius: 0.3em !important;
 }
 
-/* Примеры (Examples) делаем адаптивными внизу */
+/* Примеры внизу адаптивно */
 .gr-examples {
     display: flex !important;
     flex-wrap: wrap !important;
@@ -269,13 +267,11 @@ html, body {
     align-items: center !important;
 }
 
-/* Пример одной картинки */
 .gr-examples img {
     max-height: 64px;
     object-fit: contain;
 }
 
-/* Скрываем футер */
 footer {
     display: none !important;
 }