From 56ec7152d7d625911ab083c16b56b6566440da27 Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Thu, 2 Nov 2023 03:10:40 +0900
Subject: [PATCH] better width scaling for mobile Ooba sliders

---
 public/css/st-tailwind.css |  4 ++
 public/index.html          | 88 +++++++++++++++-----------------------
 2 files changed, 39 insertions(+), 53 deletions(-)

diff --git a/public/css/st-tailwind.css b/public/css/st-tailwind.css
index a505fe467..3b717c18d 100644
--- a/public/css/st-tailwind.css
+++ b/public/css/st-tailwind.css
@@ -237,6 +237,10 @@
     flex-basis: 200px
 }
 
+.flexBasis48p {
+    flex-basis: 48%
+}
+
 .flex-container {
     display: flex;
     gap: 5px;
diff --git a/public/index.html b/public/index.html
index 566553f9c..5a91269c0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -215,7 +215,7 @@
                         <div id="common-gen-settings-block" class="width100p">
                             <div id="pro-settings-block" class="flex-container gap10h5v justifyCenter">
 
-                                <div id="amount_gen_block" class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis200px flexShrink gap0" data-i18n="response legth(tokens)">
+                                <div id="amount_gen_block" class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="response legth(tokens)">
                                     <small>Response Length (tokens)</small>
                                     <input class="neo-range-slider" type="range" id="amount_gen" name="volume" min="16" max="1024" step="1">
                                     <div data-randomization-disabled="true" class="wide100p">
@@ -230,7 +230,7 @@
                                         </label>
                                     </div>
                                 </div>
-                                <div id="max_context_block" class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis200px flexShrink gap0" data-i18n="context size(tokens)">
+                                <div id="max_context_block" class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="context size(tokens)">
                                     <small>Context Size (tokens)</small>
                                     <input class="neo-range-slider" type="range" id="max_context" name="volume" min="512" max="8192" step="64">
                                     <div data-randomization-disabled="true" class="wide100p">
@@ -451,56 +451,56 @@
                             </div>
                             <div id="range_block_textgenerationwebui">
                                 <div class="flex-container gap10h5v justifyCenter">
-                                    <div class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis200px flexShrink gap0" data-i18n="temperature">
+                                    <div class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="temperature">
                                         <small>Temperature
 
                                         </small>
                                         <input class="neo-range-slider" type="range" id="temp_textgenerationwebui" name="volume" min="0.0" max="2.0" step="0.01" x-setting-id="temp">
                                         <input type="number" class="neo-range-input" min="0.0" max="2.0" step="0.01" data-for="temp_textgenerationwebui" id="temp_counter_textgenerationwebui">
                                     </div>
-                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis200px flexShrink gap0" data-i18n="rep.pen">
+                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="rep.pen">
                                         <small>Repetition Penalty
 
                                         </small>
                                         <input class="neo-range-slider" type="range" id="rep_pen_textgenerationwebui" name="volume" min="1" max="1.5" step="0.01">
                                         <input class="neo-range-input" type="number" min="1" max="1.5" step="0.01" data-for="rep_pen_textgenerationwebui" id="rep_pen_counter_textgenerationwebui">
                                     </div>
-                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis200px flexShrink gap0" data-i18n="rep.pen range">
+                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="rep.pen range">
                                         <small>Repetition Penalty Range
 
                                         </small>
                                         <input class="neo-range-slider" type="range" id="rep_pen_range_textgenerationwebui" name="volume" min="0" max="4096" step="1">
                                         <input class="neo-range-input" type="number" min="0" max="4096" step="1" data-for="rep_pen_range_textgenerationwebui" id="rep_pen_range_counter_textgenerationwebui">
                                     </div>
-                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis200px flexShrink gap0" data-i18n="Encoder Rep. Pen.">
+                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Encoder Rep. Pen.">
                                         <small>Encoder Repetition Penalty
 
                                         </small>
                                         <input class="neo-range-slider" type="range" id="encoder_rep_pen_textgenerationwebui" name="volume" min="0.8" max="1.5" step="0.01" />
                                         <input class="neo-range-input" type="number" min="0.8" max="1.5" step="0.01" data-for="encoder_rep_pen_textgenerationwebui" id="encoder_rep_pen_counter_textgenerationwebui">
                                     </div>
-                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis200px flexShrink gap0" data-i18n="Frequency Penalty">
+                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Frequency Penalty">
                                         <small>Frequency Penalty
 
                                         </small>
                                         <input class="neo-range-slider" type="range" id="freq_pen_textgenerationwebui" name="volume" min="-2" max="2" step="0.01" />
                                         <input class="neo-range-input" type="number" data-for="freq_pen_textgenerationwebui" min="-2" max="2" step="0.01" id="freq_pen_counter_textgenerationwebui">
                                     </div>
-                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5  flexFlowColumn flexBasis200px flexShrink gap0" data-i18n="Presence Penalty">
+                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5  flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Presence Penalty">
                                         <small>Presence Penalty
 
                                         </small>
                                         <input class="neo-range-slider" type="range" id="presence_pen_textgenerationwebui" name="volume" min="-2" max="2" step="0.01" />
                                         <input class="neo-range-input" type="number" min="-2" max="2" step="0.01" data-for="presence_pen_textgenerationwebui" id="presence_pen_counter_textgenerationwebui">
                                     </div>
-                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis200px flexShrink gap0" data-i18n="No Repeat Ngram Size">
+                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="No Repeat Ngram Size">
                                         <small>No Repeat Ngram Size
 
                                         </small>
                                         <input class="neo-range-slider" type="range" id="no_repeat_ngram_size_textgenerationwebui" name="volume" min="0" max="20" step="1">
                                         <input class="neo-range-input" type="number" min="0" max="20" step="1" data-for="no_repeat_ngram_size_textgenerationwebui" id="no_repeat_ngram_size_counter_textgenerationwebui">
                                     </div>
-                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis200px flexShrink gap0" data-i18n="Min Length">
+                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Min Length">
                                         <small>Min Length
 
                                         </small>
@@ -1273,62 +1273,46 @@
                             <div data-newbie-hidden id="textgenerationwebui_api-settings">
 
                                 <div class="flex-container gap10h5v justifyCenter">
-                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis200px flexShrink gap0" data-i18n="Top K">
-                                        <small>Top K
-
-                                        </small>
+                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Top K">
+                                        <small>Top K</small>
                                         <input class="neo-range-slider" type="range" id="top_k_textgenerationwebui" name="volume" min="0" max="200" step="1">
                                         <input class="neo-range-input" type="number" min="0" max="200" step="1" data-for="top_k_textgenerationwebui" id="top_k_counter_textgenerationwebui">
                                     </div>
-                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis200px flexShrink gap0" data-i18n="Top P">
-                                        <small>Top P
-
-                                        </small>
+                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Top P">
+                                        <small>Top P</small>
                                         <input class="neo-range-slider" type="range" id="top_p_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                         <input class="neo-range-input" type="number" min="0" max="1" step="0.01" data-for="top_p_textgenerationwebui" id="top_p_counter_textgenerationwebui">
                                     </div>
-                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis200px flexShrink gap0" data-i18n="Typical P">
-                                        <small>Typical P
-
-                                        </small>
+                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Typical P">
+                                        <small>Typical P</small>
                                         <input class="neo-range-slider" type="range" id="typical_p_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                         <input class="neo-range-input" type="number" min="0" max="1" step="0.01" data-for="typical_p_textgenerationwebui" id="typical_p_counter_textgenerationwebui">
                                     </div>
-                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis200px flexShrink gap0" data-i18n="Top A">
-                                        <small>Top A
-
-                                        </small>
+                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Top A">
+                                        <small>Top A</small>
                                         <input class="neo-range-slider" type="range" id="top_a_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                         <input class="neo-range-input" type="number" min="0" max="1" step="0.01" data-for="top_a_textgenerationwebui" id="top_a_counter_textgenerationwebui">
                                     </div>
-                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis200px flexShrink gap0" data-i18n="Tail Free Sampling">
-                                        <small>Tail Free Sampling
-
-                                        </small>
+                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Tail Free Sampling">
+                                        <small>Tail Free Sampling</small>
                                         <input class="neo-range-slider" type="range" id="tfs_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                         <input class="neo-range-input" type="number" min="0" max="1" step="0.01" data-for="tfs_textgenerationwebui" id="tfs_counter_textgenerationwebui">
                                     </div>
-                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis200px flexShrink gap0" data-i18n="Epsilon Cutoff">
-                                        <small>Epsilon Cutoff
-
-                                        </small>
+                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Epsilon Cutoff">
+                                        <small>Epsilon Cutoff</small>
                                         <input class="neo-range-slider" type="range" id="epsilon_cutoff_textgenerationwebui" name="volume" min="0" max="9" step="0.01">
                                         <input class="neo-range-input" type="number" min="0" max="9" step="0.01" data-for="epsilon_cutoff_textgenerationwebui" id="epsilon_cutoff_counter_textgenerationwebui">
                                     </div>
-                                    <div class="alignitemscenter flex-container flexFlowColumn flexBasis200px flexShrink gap0" data-i18n="Eta Cutoff">
-                                        <small>Eta Cutoff
-
-                                        </small>
+                                    <div class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Eta Cutoff">
+                                        <small>Eta Cutoff</small>
                                         <input class="neo-range-slider" type="range" id="eta_cutoff_textgenerationwebui" name="volume" min="0" max="20" step="0.01">
                                         <input class="neo-range-input" type="number" min="0" max="20" step="0.01" data-for="eta_cutoff_textgenerationwebui" id="eta_cutoff_counter_textgenerationwebui">
                                     </div>
-                                    <div name="checkboxes" class="flex-container flexFlowColumn flexBasis200px flexShrink ">
+                                    <div name="checkboxes" class="flex-container flexFlowColumn flexBasis48p flexShrink ">
                                         <div class="justifyCenter">
                                             <label class="checkbox_label" for="do_sample_textgenerationwebui">
                                                 <input type="checkbox" id="do_sample_textgenerationwebui" />
-                                                <small data-i18n="Do Sample">Do Sample
-
-                                                </small>
+                                                <small data-i18n="Do Sample">Do Sample</small>
                                             </label>
                                             <label class="checkbox_label" for="add_bos_token_textgenerationwebui">
                                                 <input type="checkbox" id="add_bos_token_textgenerationwebui" />
@@ -1344,9 +1328,7 @@
                                             </label>
                                             <label class="checkbox_label" for="skip_special_tokens_textgenerationwebui">
                                                 <input type="checkbox" id="skip_special_tokens_textgenerationwebui" />
-                                                <small data-i18n="Skip Special Tokens">Skip Special Tokens
-
-                                                </small>
+                                                <small data-i18n="Skip Special Tokens">Skip Special Tokens</small>
                                             </label>
                                         </div>
                                     </div>
@@ -1356,17 +1338,17 @@
                                         </h4>
                                         <div class="flex-container flexFlowRow gap10px flexShrink">
                                             <div class="alignitemscenter flex-container marginBot5 flexFlowColumn  flexShrink gap0" data-i18n="Mirostat Mode">
-                                                Mode
+                                                <small>Mode</small>
                                                 <input class="neo-range-slider" type="range" id="mirostat_mode_textgenerationwebui" name="volume" min="0" max="2" step="1" />
                                                 <input class="neo-range-input" type="number" min="0" max="2" step="1" data-for="mirostat_mode_textgenerationwebui" id="mirostat_mode_counter_textgenerationwebui">
                                             </div>
                                             <div class="alignitemscenter flex-container marginBot5 flexFlowColumn  flexShrink gap0" data-i18n="Mirostat Tau">
-                                                Tau
+                                                <small>Tau</small>
                                                 <input class="neo-range-slider" type="range" id="mirostat_tau_textgenerationwebui" name="volume" min="0" max="20" step="0.01" />
                                                 <input class="neo-range-input" type="number" min="0" max="20" step="0.01" data-for="mirostat_tau_textgenerationwebui" id="mirostat_tau_counter_textgenerationwebui">
                                             </div>
                                             <div class="alignitemscenter flex-container marginBot5 flexFlowColumn  flexShrink gap0" data-i18n="Mirostat Eta">
-                                                Eta
+                                                <small>Eta</small>
                                                 <input class="neo-range-slider" type="range" id="mirostat_eta_textgenerationwebui" name="volume" min="0" max="1" step="0.01" />
                                                 <input class="neo-range-input" type="number" min="0" max="1" step="0.01" data-for="mirostat_eta_textgenerationwebui" id="mirostat_eta_counter_textgenerationwebui">
                                             </div>
@@ -1376,7 +1358,7 @@
                                         <h4 data-i18n="Contrastive search">Contrast Search
                                             <div class=" fa-solid fa-question opacity50p hoverglow" title="Helpful tip coming soon."></div>
                                         </h4>
-                                        <div class="alignitemscenter flexFlowColumn flex-container flexBasis200px flexShrink gap0" data-i18n="Penalty Alpha">
+                                        <div class="alignitemscenter flexFlowColumn flex-container flexBasis48p flexShrink gap0" data-i18n="Penalty Alpha">
                                             <small>Penalty Alpha</small>
                                             <input class="neo-range-slider" type="range" id="penalty_alpha_textgenerationwebui" name="volume" min="0" max="5" step="0.05" />
                                             <input class="neo-range-input" type="number" min="0" max="5" step="0.05" data-for="penalty_alpha_textgenerationwebui" id="penalty_alpha_counter_textgenerationwebui">
@@ -1387,12 +1369,12 @@
                                             <div class=" fa-solid fa-question opacity50p hoverglow" title="Helpful tip coming soon."></div>
                                         </h4>
                                         <div class="flex-container flexFlowRow gap10px ">
-                                            <div class="alignitemscenter flex-container  flexFlowColumn flexBasis200px  gap0" data-i18n="Number of Beams">
+                                            <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p  gap0" data-i18n="Number of Beams">
                                                 <small>Number of Beams</small>
                                                 <input class="neo-range-slider" type="range" id="num_beams_textgenerationwebui" name="volume" min="1" max="20" step="1" />
                                                 <input class="neo-range-input" type="number" min="1" max="20" step="1" data-for="num_beams_textgenerationwebui" id="num_beams_counter_textgenerationwebui">
                                             </div>
-                                            <div class="alignitemscenter flex-container  flexFlowColumn flexBasis200px  gap0">
+                                            <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p  gap0">
                                                 <small data-i18n="Length Penalty">Length Penalty</small>
                                                 <input class="neo-range-slider" type="range" id="length_penalty_textgenerationwebui" name="volume" min="-5" max="5" step="0.1" />
                                                 <input class="neo-range-input" type="number" min="-5" max="5" step="0.1" data-for="length_penalty_textgenerationwebui" id="length_penalty_counter_textgenerationwebui">
@@ -1401,7 +1383,7 @@
                                         <div class="justifyCenter widthFitContent marginTopBot5">
                                             <label class="checkbox_label" for="early_stopping_textgenerationwebui">
                                                 <input type="checkbox" id="early_stopping_textgenerationwebui" />
-                                                <span data-i18n="Early Stopping">Early Stopping</span>
+                                                <small data-i18n="Early Stopping">Early Stopping</small>
                                             </label>
                                         </div>
                                     </div>
@@ -1427,7 +1409,7 @@
                                         </small>
                                     </div>
                                     <hr class="width100p">
-                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis200px flexShrink gap0" data-i18n="CFG Scale">
+                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="CFG Scale">
                                         <div>
                                             CFG Scale
                                             <div class="margin5 fa-solid fa-question opacity50p hoverglow" title="Helpful tip coming soon."></div>