diff --git a/ui/index.html b/ui/index.html
index 7bffdf63..f50e9204 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -62,7 +62,7 @@
                     <input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden -->
                 </div>
 
-                <label for="negative_prompt">Negative Prompt <small>(optional)</small>:</label> <input id="negative_prompt" name="negative_prompt" size="50"><br/><br/>
+                <label for="negative_prompt">Negative Prompt <small>(optional)</small>:</label> <input id="negative_prompt" name="negative_prompt"><br/><br/>
 
                 <div id="editor-inputs-init-image" class="row">
                     <label for="init_image"><b>Initial Image (img2img):</b> <small>(optional)</small> </label> <input id="init_image" name="init_image" type="file" /><br/>
diff --git a/ui/media/main.css b/ui/media/main.css
index 31d0c656..47896983 100644
--- a/ui/media/main.css
+++ b/ui/media/main.css
@@ -55,6 +55,7 @@
 
 * {
     font-family: Work Sans, Verdana, Geneva, sans-serif;
+    box-sizing: border-box;
 }
 
 body {
@@ -74,12 +75,6 @@ label {
 #prompt {
     width: 100%;
     height: 65pt;
-    box-sizing: border-box;
-}
-@media screen and (max-width: 600px) {
-    #prompt {
-        width: 95%;
-    }
 }
 .image_preview_container {
     /* display: none; */
@@ -228,6 +223,7 @@ label {
 }
 .flex-container {
     display: flex;
+    width: 100%;
 }
 .col-50 {
     flex: 50%;
@@ -517,6 +513,11 @@ img {
 #editor-settings-entries table td:first-child {
     float: right;
     padding-right: 4px;
+    white-space: nowrap;
+}
+
+#negative_prompt {
+    width: 100%;
 }
 
 button,
@@ -570,3 +571,40 @@ input[type="range"]::-moz-range-thumb {
     height: 24px;
     border-radius: 12px;
 } */
+
+@media screen and (max-width: 700px) {
+    body {
+        margin: 0px;
+    }
+    #container {
+        margin: 0px;
+        padding: 10px
+    }
+    .flex-container {
+        flex-direction: column;
+    }
+    #preview {
+        margin: 0px;
+        padding: 0px;
+    }
+    #preview .collapsible-content {
+        padding: 0px;
+    }
+    #preview .collapsible-content {
+        padding: 0px;
+    }
+    .imgItem {
+        margin-right: 0px;
+    }
+    .imgItem img {
+        height: 100%;
+        width: 100%;
+        object-fit: contain;
+    }
+    .dropdown-content {
+        width: auto !important;
+        transform: none !important;
+        left: 0px;
+        right: 0px;
+    }
+}