23962 Make new file page mobile friendly23962-new-file-mobile

2 files changed, 34 insertions, 10 deletions

diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 6cde9c592de..bff5f753356 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -23,14 +23,9 @@
 
   .file-title {
     @extend .monospace;
-
     line-height: 35px;
     padding-top: 7px;
-    padding-bottom: 7px;
-
-    .pull-right {
-      height: 20px;
-    }
+    padding-bottom: 0;
   }
 
   .editor-ref {
@@ -44,19 +39,43 @@
 
   .editor-file-name {
     @extend .monospace;
-
     float: left;
     margin-right: 10px;
   }
 
   .new-file-name {
     display: inline-block;
-    width: 450px;
+    max-width: 450px;
     float: left;
+    margin-bottom: 7px;
+
+    @media (max-width: $screen-xs-min) {
+      margin-bottom: 0;
+    }
   }
 
   .file-buttons {
-    font-size: 0;
+    @media (max-width: $screen-xs-min) {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      margin-bottom: 7px;
+
+      .encoding-selector,
+      .license-selector,
+      .gitignore-selector,
+      .gitlab-ci-yml-selector {
+        margin: 7px 0 0;
+
+        button {
+          width: 100%;
+        }
+      }
+
+      .soft-wrap-toggle {
+        margin: 7px 0 0;
+      }
+    }
   }
 
   .select2 {
@@ -71,10 +90,11 @@
     display: inline-block;
     vertical-align: top;
     font-family: $regular_font;
+    margin-bottom: 7px;
   }
 
   .soft-wrap-toggle {
-    margin: 0 $btn-side-margin;
+    margin-right: $btn-side-margin;
 
     .soft-wrap {
       display: block;
diff --git a/changelogs/unreleased/23962-new-file-mobile.yml b/changelogs/unreleased/23962-new-file-mobile.yml
new file mode 100644
index 00000000000..16716f69da1
--- /dev/null
+++ b/changelogs/unreleased/23962-new-file-mobile.yml
@@ -0,0 +1,4 @@
+---
+title: 25040 Make new file page mobile friendly
+merge_request: 
+author: