Show new element on the first row (title)

extend.php

@@ -19,6 +19,7 @@
 return [
     (new Extend\Frontend('forum'))
         ->js(__DIR__.'/js/dist/forum.js')
+        ->css(__DIR__.'/resources/less/forum.less')
         ->route('/drafts', 'fof.drafts.view'),
 
     (new Extend\Frontend('admin'))

resources/less/_extension.less

@@ -0,0 +1,21 @@
+// ============================================================================
+// Extension
+// ============================================================================
+
+@media @phone {
+  .item-save-draft {
+    display: inline-block !important;
+    padding: (@gg-spacer-fine - (@gg-spacer-fine / @gg-spacer-fine)) 0 0 (@gg-spacer-small - (@gg-spacer-fine / @gg-spacer-fine)) !important;
+    margin-right: 0 !important;
+    border: none;
+    margin-top: @gg-spacer-tiny;
+    float: left;
+    background: @gg-color-light-green;
+
+    .icon {
+      &::before {
+        color: @gg-color-black;
+      }
+    }
+  }
+}

resources/less/_variables-flarum.less

@@ -0,0 +1,9 @@
+// ============================================================================
+// Flarum override variables
+// ============================================================================
+
+// Breakpoints
+@screen-phone-max:                 (@screen-tablet - 1);
+@screen-tablet:                    @gg-breakpoint-medium;
+
+@phone:                            ~"(max-width: @{screen-phone-max})";

resources/less/_variables-gg.less

@@ -0,0 +1,30 @@
+// ============================================================================
+// giffgaff design tokens
+// ============================================================================
+
+// Colours
+@gg-color-black: #000000;
+@gg-color-white: #ffffff;
+@gg-color-light-pink: #eb5f8e;
+@gg-color-light-green: #72b72a;
+@gg-color-light-blue: #35adce;
+@gg-color-yellow: #fcc31e;
+@gg-color-dark-pink: #ae0d21;
+@gg-color-dark-green: #007349;
+@gg-color-dark-blue: #00528a;
+@gg-color-orange: #ea5b25;
+@gg-color-dove-grey: #666666;
+@gg-color-alto: #d0d0d0;
+@gg-color-wild-sand: #f5f5f5;
+@gg-color-gallery: #ececec;
+
+// Breakpoints
+@gg-breakpoint-medium: 768px;
+
+// Spacers
+@gg-spacer-fine: 4px;
+@gg-spacer-tiny: 8px;
+@gg-spacer-small: 16px;
+@gg-spacer-medium: 24px;
+@gg-spacer-large: 56px;
+@gg-spacer-huge: 72px;

resources/less/forum.less

@@ -0,0 +1,3 @@
+@import "_variables-gg";
+@import "_variables-flarum";
+@import "_extension";