Update app.py

app.py

@@ -239,35 +239,60 @@ def update_history(new_image, history):
 css = """
 h1 {
   text-align: center;
-  display: block;
+  display: block; /* Ensure it takes full width for centering */
+  margin-block-start: 0.5em; /* Reduce top margin */
+  margin-block-end: 0.5em; /* Reduce bottom margin */
+}
+p.center-description {
+    text-align: center;
+    margin-bottom: 1em;
 }
 
-/* --- Centering the main UI --- */
+/* --- Centering the main UI Block --- */
 .gradio-container {
-    max-width: 1280px; /* Adjust this value for desired max width */
-    margin-left: auto !important; /* Add !important to override defaults if needed */
+    max-width: 1200px; /* Adjust max-width as desired */
+    margin-left: auto !important;
     margin-right: auto !important;
-    padding-left: 20px; /* Add some padding so content isn't flush against edge */
-    padding-right: 20px;
+    padding-left: 15px; /* Add some padding */
+    padding-right: 15px;
+    box-sizing: border-box; /* Include padding in width */
 }
-/* --- End Centering --- */
-
 
-/* Make gallery items smaller */
+/* --- Gallery Styling --- */
 .gradio-container .gallery {
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; /* Adjust 120px as needed */
-    gap: 10px !important;
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important; /* Smaller min size */
+    gap: 8px !important; /* Smaller gap */
 }
 .gradio-container .gallery > .gallery-item {
-    height: auto !important; /* Allow height to adjust based on content */
-    max-height: 150px; /* Set a max height if needed */
-    overflow: hidden; /* Hide overflow */
+    height: auto !important;
+    aspect-ratio: 1 / 1; /* Make items square */
+    overflow: hidden;
+    border-radius: 4px; /* Slightly rounded corners */
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle shadow */
 }
 .gradio-container .gallery > .gallery-item img {
-    object-fit: contain !important; /* Fit image within bounds */
+    object-fit: cover !important; /* Changed to cover for better square filling */
     height: 100% !important;
     width: 100% !important;
 }
+
+/* Ensure buttons and inputs don't get too wide */
+.gradio-container button, .gradio-container input[type=text], .gradio-container textarea {
+    max-width: 100%;
+}
+.gradio-container .gr-button {
+    min-width: min(100%, 100px) !important; /* Adjust min-width for buttons */
+    flex-grow: 1;
+}
+
+/* Adjust Accordion header padding */
+.gradio-container .gr-accordion > .gr-block > div:first-child {
+    padding: 8px 12px !important;
+}
+/* Tweak slider spacing */
+.gradio-container .gr-slider {
+    margin-bottom: 5px !important;
+}
 """
 
 title = """<h1 align="center">Diffusers Image Outpaint Lightning</h1>