From 04274f5839889dc9ab375210547a3a236b75246d Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Wed, 23 Aug 2023 12:11:06 +0530
Subject: [PATCH] Fix styling on mobile devices

---
 CHANGES.md                          |  1 +
 ui/index.html                       |  8 ++--
 ui/media/css/main.css               | 69 +++++++++++++++++++++++++++++
 ui/media/js/multi-model-selector.js |  2 +-
 4 files changed, 75 insertions(+), 5 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 63e81f85..4f5b7d8f 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -17,6 +17,7 @@
 - **Major rewrite of the code** - We've switched to using diffusers under-the-hood, which allows us to release new features faster, and focus on making the UI and installer even easier to use.
 
 ### Detailed changelog
+* 3.0.2 - 23 Aug 2023 - Fix styling on mobile devices.
 * 3.0.2 - 22 Aug 2023 - Full support for inpainting models, including custom models. Support SD 1.x and SD 2.x inpainting models. Does not require you to specify a yaml config file.
 * 3.0.2 - 22 Aug 2023 - Reduce VRAM consumption of controlnet in 'low' VRAM mode, and allow accelerating controlnets using xformers.
 * 3.0.2 - 22 Aug 2023 - Improve auto-detection of SD 2.0 and 2.1 models, removing the need for custom yaml files for SD 2.x models. Improve the model load time by speeding-up the black image test.
diff --git a/ui/index.html b/ui/index.html
index eb4c62da..4cac4ae4 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -157,9 +157,9 @@
                     <tr><b class="settings-subheader">Image Settings</b></tr>
                     <tr class="pl-5"><td><label for="seed">Seed:</label></td><td><input id="seed" name="seed" size="10" value="0" onkeypress="preventNonNumericalInput(event)"> <input id="random_seed" name="random_seed" type="checkbox" checked><label for="random_seed">Random</label></td></tr>
                     <tr class="pl-5"><td><label for="num_outputs_total">Number of Images:</label></td>
-                        <td><input id="num_outputs_total" name="num_outputs_total" value="1" type="number" value="1" min="1" step="1" style="width:42pt;" onkeypres"="preventNonNumericalInput(event)">
+                        <td><input id="num_outputs_total" name="num_outputs_total" value="1" type="number" value="1" min="1" step="1" onkeypres"="preventNonNumericalInput(event)">
                         <label><small>(total)</small></label>
-                        <input id="num_outputs_parallel" name="num_outputs_parallel" value="1" type="number" value="1" min="1" step="1" style="width:42pt;" onkeypress="preventNonNumericalInput(event)">
+                        <input id="num_outputs_parallel" name="num_outputs_parallel" value="1" type="number" value="1" min="1" step="1" onkeypress="preventNonNumericalInput(event)">
                         <label id="num_outputs_parallel_label" for="num_outputs_parallel"><small>(in parallel)</small></label></td>
                     </tr>
                     <tr class="pl-5"><td><label for="stable_diffusion_model">Model:</label></td><td class="model-input">
@@ -290,7 +290,7 @@
                             <option value="1792">1792</option>
                             <option value="2048">2048</option>
                         </select>
-                        <label for="width"><small>(width)</small></label>
+                        <label id="widthLabel" for="width"><small><span>(width)</span></small></label>
                         <span id="swap-width-height" class="clickable smallButton" style="margin-left: 2px; margin-right:2px;"><i class="fa-solid fa-right-left"><span class="simple-tooltip top-left"> Swap width and height </span></i></span>
                         <select id="height" name="height" value="512">
                             <option value="128">128</option>
@@ -313,7 +313,7 @@
                             <option value="1792">1792</option>
                             <option value="2048">2048</option>
                         </select>
-                        <label for="height"><small>(height)</small></label>
+                        <label id="heightLabel" for="height"><small><span>(height)</span></small></label>
                         <div id="recent-resolutions-container">
                             <span id="recent-resolutions-button" class="clickable"><i class="fa-solid fa-sliders"><span class="simple-tooltip top-left"> Advanced sizes </span></i></span>
                             <div id="recent-resolutions-popup" class="displayNone">
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index e9021ead..8fe59882 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -1940,8 +1940,77 @@ div#enlarge-buttons {
     margin: 12px 10px;
 }
 
+#num_outputs_total {
+    width: 42pt;
+}
+#num_outputs_parallel {
+    width: 42pt;
+}
+.model_entry .model_weight {
+    width: 50pt;
+}
 
 /* hack for fixing Image Modifier Improvements plugin */
 #imageTagPopupContainer {
     position: absolute;
 }
+
+@media screen and (max-width: 400px) {
+    .editor-slider {
+        width: 40%;
+    }
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+    input[type=number] {
+        -moz-appearance: textfield;
+        /* Firefox */
+    }
+    #num_outputs_total {
+        width: 27pt;
+    }
+    #num_outputs_parallel {
+        width: 27pt;
+        margin-left: -4pt;
+    }
+    .model_entry .model_weight {
+        width: 30pt;
+    }
+    #width {
+        width: 50pt;
+    }
+    #height {
+        width: 50pt;
+    }
+}
+@media screen and (max-width: 460px) {
+    #widthLabel small span {
+        display: none;
+    }
+    #widthLabel small:after {
+        content: "(w)";
+    }
+    #heightLabel small span {
+        display: none;
+    }
+    #heightLabel small:after {
+        content: "(h)";
+    }
+    #prompt-toolbar-right {
+        text-align: right;
+    }
+    #editor-settings label {
+        font-size: 9pt;
+    }
+    #editor-settings .model-filter {
+        width: 56%;
+    }
+    #vae_model {
+        width: 65% !important;
+    }
+    .model_entry .model_name {
+        width: 60% !important;
+    }
+}
\ No newline at end of file
diff --git a/ui/media/js/multi-model-selector.js b/ui/media/js/multi-model-selector.js
index 472ed81a..0640288f 100644
--- a/ui/media/js/multi-model-selector.js
+++ b/ui/media/js/multi-model-selector.js
@@ -137,7 +137,7 @@ class MultiModelSelector {
         modelElement.className = "model_entry"
         modelElement.innerHTML = `
             <input id="${this.modelType}_${idx}" class="model_name model-filter" type="text" spellcheck="false" autocomplete="off" data-path="" />
-            <input class="model_weight" type="number" step="${this.weightStep}" style="width: 50pt" value="${this.defaultWeight}" pattern="^-?[0-9]*\.?[0-9]*$" onkeypress="preventNonNumericalInput(event)">
+            <input class="model_weight" type="number" step="${this.weightStep}" value="${this.defaultWeight}" pattern="^-?[0-9]*\.?[0-9]*$" onkeypress="preventNonNumericalInput(event)">
         `
         this.modelContainer.appendChild(modelElement)