Fixed file template dropdown for the "New File" editor for smaller/zoomed screens

1 files changed, 50 insertions, 1 deletions

diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 778126bcfb7..935f157b33d 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -51,8 +51,16 @@
 
   .new-file-name {
     display: inline-block;
-    width: 450px;
+    max-width: 450px;
     float: left;
+
+    @media(max-width: $screen-md-max) {
+      width: 280px;
+    }
+
+    @media(max-width: $screen-sm-max) {
+      width: 180px;
+    }
   }
 
   .file-buttons {
@@ -114,3 +122,44 @@
     }
   }
 }
+
+@media(max-width: $screen-xs-max){
+  .file-editor {
+    .file-title {
+      .pull-right {
+        height: auto;
+      }
+    }
+
+    .new-file-name {
+      margin-bottom: 0;
+      max-width: none;
+      width: 100%;
+    }
+
+    .file-buttons {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      margin-bottom: 7px;
+
+      .soft-wrap-toggle {
+        margin: 7px 0 0;
+      }
+
+      .encoding-selector,
+      .license-selector,
+      .gitignore-selector,
+      .gitlab-ci-yml-selector {
+        margin: 7px 0 0;
+
+        button {
+          width: 100%;
+        }
+      }
+
+    }
+
+  }
+
+}