Add inline editing to issues on mobile

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/39497

1 files changed, 33 insertions, 10 deletions

diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index cd6f94fb354..5389eb0a5f2 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -57,6 +57,7 @@
 .md-header {
   .nav-links {
     a {
+      width: 100%;
       padding-top: 0;
       line-height: 19px;
 
@@ -72,6 +73,28 @@
   }
 }
 
+.md-header-tab {
+  @media(max-width: $screen-xs-max) {
+    flex: 1;
+    width: 100%;
+    border-bottom: 1px solid $border-color;
+    text-align: center;
+  }
+}
+
+.md-header-toolbar {
+  margin-left: auto;
+
+  @media(max-width: $screen-xs-max) {
+    flex: none;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    padding-top: $gl-padding-top;
+    padding-bottom: $gl-padding-top;
+  }
+}
+
 .referenced-users {
   color: $gl-text-color;
   padding-top: 10px;
@@ -126,16 +149,6 @@
   }
 }
 
-.toolbar-group {
-  float: left;
-  margin-right: -5px;
-  margin-left: $gl-padding;
-
-  &:first-child {
-    margin-left: 0;
-  }
-}
-
 .toolbar-btn {
   float: left;
   padding: 0 7px;
@@ -158,6 +171,16 @@
   }
 }
 
+.toolbar-fullscreen-btn {
+  margin-left: $gl-padding;
+  margin-right: -5px;
+
+  @media(max-width: $screen-xs-max) {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
 .atwho-view {
   overflow-y: auto;
   overflow-x: hidden;