Update style.css

style.css

@@ -288,3 +288,123 @@ input[type="range"]{ accent-color: var(--accent); }
 
 /* Optional: hide Gradio footer */
 footer{ display:none !important; }
+
+
+
+/* ============================================================
+   FIX PACK — Gallery Carousel + Button Width (Gradio 4.44.x)
+   REQUIRES: elem_id="down_gallery" and elem_id="strange_gallery"
+   ============================================================ */
+
+/* ----------------------------
+   1) Buttons: stop banner mode
+   ---------------------------- */
+
+/* Gradio often forces buttons to 100% width via wrapper rules */
+.gradio-container :is(button, .gr-button){
+  width: fit-content !important;
+  min-width: 180px !important;
+  max-width: 320px !important;
+
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+
+  flex: 0 0 auto !important;
+}
+
+/* If the parent is a flex/column that stretches, align to start */
+.gradio-container :is(.gr-panel, .block, .wrap, .container, .gr-form) :is(button, .gr-button){
+  align-self: flex-start !important;
+}
+
+/* Some Gradio themes wrap buttons inside a full-width container */
+.gradio-container :is(button, .gr-button){
+  white-space: nowrap !important;
+}
+
+
+/* ----------------------------
+   2) Gallery: kill “round giant”
+   ---------------------------- */
+
+/* Neutralize mask/clip and ensure thumbnails, not posters */
+#down_gallery img,
+#strange_gallery img{
+  border-radius: 12px !important;
+  clip-path: none !important;
+  mask-image: none !important;
+
+  width: 100% !important;
+  height: 140px !important;
+  object-fit: contain !important;
+
+  background: rgba(255,255,255,.02) !important;
+}
+
+/* Sometimes the radius is on wrapper elements, not the <img> */
+#down_gallery :is(figure, li, .gallery-item, .thumbnail-item, .item, .card),
+#strange_gallery :is(figure, li, .gallery-item, .thumbnail-item, .item, .card){
+  border-radius: 14px !important;
+  overflow: hidden !important;
+  background: rgba(255,255,255,.03) !important;
+  border: 1px solid rgba(255,255,255,.10) !important;
+  padding: 8px !important;
+}
+
+/* Hide captions/filename vibe */
+#down_gallery :is(figcaption, .caption, .filename),
+#strange_gallery :is(figcaption, .caption, .filename){
+  display:none !important;
+}
+
+
+/* ----------------------------
+   3) Gallery: force carousel
+   ---------------------------- */
+
+/* Ensure the internal container can scroll horizontally */
+#down_gallery,
+#strange_gallery{
+  width: 100% !important;
+}
+
+/* The direct child often holds the grid/list */
+#down_gallery > div,
+#strange_gallery > div{
+  overflow-x: auto !important;
+  overflow-y: hidden !important;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Cover multiple possible DOM structures across Gradio builds */
+#down_gallery :is(.grid, .wrap, .gallery, .container, ul, .items, .thumbnails),
+#strange_gallery :is(.grid, .wrap, .gallery, .container, ul, .items, .thumbnails){
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  gap: 14px !important;
+  align-items: stretch !important;
+
+  padding: 12px !important;
+
+  scroll-snap-type: x mandatory;
+}
+
+/* Each slide width */
+#down_gallery :is(figure, li, .gallery-item, .thumbnail-item, .item, .card),
+#strange_gallery :is(figure, li, .gallery-item, .thumbnail-item, .item, .card){
+  flex: 0 0 auto !important;
+  width: 240px !important;
+  scroll-snap-align: start;
+}
+
+/* Sleek scrollbar */
+#down_gallery *::-webkit-scrollbar,
+#strange_gallery *::-webkit-scrollbar{
+  height: 6px;
+}
+#down_gallery *::-webkit-scrollbar-thumb,
+#strange_gallery *::-webkit-scrollbar-thumb{
+  background: rgba(255,255,255,.14);
+  border-radius: 999px;
+}