diff --git a/javascript/imageViewer.js b/javascript/imageViewer.js index 9f56ff876..85fa435a7 100644 --- a/javascript/imageViewer.js +++ b/javascript/imageViewer.js @@ -238,7 +238,7 @@ async function initImageViewer() { // exif const modalExif = document.createElement('div'); modalExif.id = 'modalExif'; - modalExif.style = 'position: absolute; bottom: 0px; width: 98%; background-color: rgba(0, 0, 0, 0.5); color: var(--neutral-300); padding: 1em; font-size: small; line-height: 1.2em;'; + modalExif.style = 'position: absolute; bottom: 0px; width: 100%; background-color: rgba(0, 0, 0, 0.5); color: var(--neutral-300); padding: 1em; font-size: small; line-height: 1.2em; z-index: 1'; // handlers modalPreviewZone.addEventListener('mousedown', () => { previewDrag = false; }); diff --git a/javascript/sdnext.css b/javascript/sdnext.css index 8bb05d4f1..d2b3f601e 100644 --- a/javascript/sdnext.css +++ b/javascript/sdnext.css @@ -86,7 +86,7 @@ button.custom-button { border-radius: var(--button-large-radius); padding: var(- #control_results { margin: 0; padding: 0; } #control_gallery { height: calc(100vw/3 + 60px); } #txt2img_gallery, #img2img_gallery { height: 50vh; } -#control-result { padding: 0 0.2em 0 0.2em; background: var(--input-background-fill); line-height: 2em; } +#control-result { padding: 0 0.2em 0 0.2em; background: var(--input-background-fill); line-height: 2em; white-space: pre-wrap; } #control-inputs { margin-top: 1em; } #txt2img_prompt_container, #img2img_prompt_container, #control_prompt_container { margin-right: var(--layout-gap) } #txt2img_footer, #img2img_footer, #control_footer { height: fit-content; display: none; } @@ -159,7 +159,7 @@ div#extras_scale_to_tab div.form { flex-direction: row; } .popup-metadata { color: white; background: #0000; display: inline-block; white-space: pre-wrap; font-size: var(--text-xxs); } /* fullpage image viewer */ -#lightboxModal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(20, 20, 20, 0.75); backdrop-filter: blur(6px); +#lightboxModal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(20, 20, 20, 0.75); backdrop-filter: blur(6px); user-select: none; -webkit-user-select: none; flex-direction: row; font-family: 'NotoSans';} .modalControls { display: flex; justify-content: space-evenly; background-color: transparent; position: absolute; width: 99%; z-index: 1; } .modalControls:hover { background-color: #50505050; } diff --git a/javascript/ui.js b/javascript/ui.js index 89e4ce51c..a3ff22542 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -33,7 +33,8 @@ function clip_gallery_urls(gallery) { } function all_gallery_buttons() { - const allGalleryButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small'); + let allGalleryButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small'); + if (allGalleryButtons.length === 0) allGalleryButtons = gradioApp().querySelectorAll('.gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small'); const visibleGalleryButtons = []; allGalleryButtons.forEach((elem) => { if (elem.parentElement.offsetParent) visibleGalleryButtons.push(elem); @@ -42,7 +43,8 @@ function all_gallery_buttons() { } function selected_gallery_button() { - const allCurrentButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnail-item.thumbnail-small.selected'); + let allCurrentButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnail-item.thumbnail-small.selected'); + if (allCurrentButtons.length === 0) allCurrentButtons = gradioApp().querySelectorAll('.gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small.selected'); let visibleCurrentButton = null; allCurrentButtons.forEach((elem) => { if (elem.parentElement.offsetParent) visibleCurrentButton = elem;