diff --git a/assets/webui/index.html b/assets/webui/index.html
index 2208ec5..0430910 100644
--- a/assets/webui/index.html
+++ b/assets/webui/index.html
@@ -354,9 +354,11 @@
-
+
diff --git a/assets/webui/ofdgo.css b/assets/webui/ofdgo.css
index 13a6b01..5ec234e 100644
--- a/assets/webui/ofdgo.css
+++ b/assets/webui/ofdgo.css
@@ -1665,14 +1665,29 @@ button:not(:disabled):hover {
width: 600px;
}
-.create-image-actions {
- display: flex;
+.create-images-row {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
- gap: 8px;
+ gap: 4px;
+ margin-bottom: 12px;
+}
+
+.create-image-actions {
+ display: grid;
+ grid-template-columns: repeat(6, minmax(0, 1fr));
+ gap: 4px;
+}
+
+@media (max-width: 600px) {
+ .create-image-actions {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
}
#createImageCount {
- margin-left: auto;
+ align-self: start;
+ line-height: var(--control-height);
color: var(--text-muted);
}
@@ -1847,9 +1862,7 @@ button:not(:disabled):hover {
}
#createImageOrder {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
- gap: 4px;
+ display: contents;
}
#createImageOrder span {
@@ -3427,6 +3440,8 @@ button.outline-link:hover {
.navigation-tabs[hidden],
.page-selection-tools[hidden],
.form-row[hidden],
+.create-images-row[hidden],
+#createImageOrder[hidden],
.form-pair[hidden],
.form-actions > [hidden],
.document-actions > [hidden],
diff --git a/assets/webui/ofdgo.js b/assets/webui/ofdgo.js
index e459624..dd7b0f6 100644
--- a/assets/webui/ofdgo.js
+++ b/assets/webui/ofdgo.js
@@ -3854,6 +3854,7 @@ function updateCreateOptions() {
el.createSize.querySelector('[value="image"]').hidden = !images;
el.createSize.querySelector('[value="image"]').disabled = !images;
el.createImageQueue.hidden = !images || !state.createImageQueue?.entries.length;
+ el.createImageOrder.hidden = el.createImageQueue.hidden;
el.createPanel.classList.toggle("create-images", images);
el.createImageAdd.disabled = busy;
for (const input of el.createImageOrder.querySelectorAll("input")) input.disabled = busy;