Fix appearance on mobile

TesseractCat · TesseractCat · commit 91966e9ffa01 · 2022-08-25T15:01:08.000-04:00
diff --git a/scripts/static/index.css b/scripts/static/index.css
@@ -6,16 +6,25 @@
 }
 #search {
     margin-top: 20vh;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 800px;
+
     text-align: center;
 }
 fieldset {
     border: none;
 }
+#fieldset-search {
+    display: flex;
+}
 #prompt {
-    width: 500px;
+    flex-grow: 1;
+
     border-radius: 20px 0px 0px 20px;
     padding: 5px 10px 5px 10px;
     border: 1px solid black;
+    border-right: none;
     outline: none;
 }
 #submit {
@@ -25,8 +34,8 @@ fieldset {
 }
 #results {
     text-align: center;
-    padding-left: 20vw;
-    padding-right: 20vw;
+    max-width: 1000px;
+    margin: auto;
     padding-top: 10px;
 }
 img {
@@ -35,7 +44,7 @@ img {
     border-radius: 5px;
     margin: 10px;
 }
-#generate-config {
+#fieldset-config {
     line-height:2em;
 }
 input[type="number"] {
@@ -47,3 +56,6 @@ input[type="number"] {
 hr {
     width: 200px;
 }
+label {
+    white-space: nowrap;
+}
diff --git a/scripts/static/index.html b/scripts/static/index.html
@@ -2,6 +2,7 @@
   <head>
     <title>Stable Diffusion WebUI</title>
     <link rel="icon" href="data:,">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <link rel="stylesheet" href="scripts/static/index.css">
     <script src="scripts/static/index.js"></script>
@@ -11,11 +12,11 @@
       <h2 id="header">Stable Diffusion</h2>
 
       <form id="generate-form" method="post" action="#">
-        <fieldset>
+        <fieldset id="fieldset-search">
           <input type="text" id="prompt" name="prompt">
           <input type="submit" id="submit" value="Generate">
         </fieldset>
-        <fieldset id="generate-config">
+        <fieldset id="fieldset-config">
           <label for="batch">Batch Size:</label>
           <input value="1" type="number" id="batch" name="batch">
           <label for="steps">Steps:</label>
