diff --git a/framework/core/ember/app/styles/flarum/buttons.less b/framework/core/ember/app/styles/flarum/buttons.less
index 4e324434e..5597e5dc0 100644
--- a/framework/core/ember/app/styles/flarum/buttons.less
+++ b/framework/core/ember/app/styles/flarum/buttons.less
@@ -84,7 +84,6 @@
   border-radius: 18px;
 }
 
-
 .back-button {
   & .back {
     z-index: 3 !important; // z-index of an active .btn-group .btn is 2
@@ -100,13 +99,15 @@
       .rotate(45deg);
     }
   }
-  &.active {
-    & .back {
-      border-radius: @border-radius-base 0 0 @border-radius-base !important;
-    }
-    & .pin {
-      opacity: 1;
-      margin-left: 1px !important;
+  @media @desktop-hd {
+    &.active {
+      & .back {
+        border-radius: @border-radius-base 0 0 @border-radius-base !important;
+      }
+      & .pin {
+        opacity: 1;
+        margin-left: 1px !important;
+      }
     }
   }
 }
diff --git a/framework/core/ember/app/styles/flarum/index.less b/framework/core/ember/app/styles/flarum/index.less
index ef0cdf492..43081e161 100644
--- a/framework/core/ember/app/styles/flarum/index.less
+++ b/framework/core/ember/app/styles/flarum/index.less
@@ -160,13 +160,9 @@
       .box-shadow(2px 2px 6px -2px @fl-shadow-color);
       .transition(left 0.2s);
 
-      &.showing, .with-pane & {
+      &.showing {
         left: 0;
       }
-      .with-pane & {
-        z-index: @zindex-composer - 1;
-        .transition(none);
-      }
       & .container {
         width: auto;
         margin: 0;
@@ -196,7 +192,16 @@
       }
     }
   }
+}
 
+@media @desktop-hd {
+  .index-area.paned {
+    .with-pane & {
+      left: 0;
+      z-index: @zindex-composer - 1;
+      .transition(none);
+    }
+  }
   // When the pane is pinned, move the other page content inwards
   .global-content, .global-footer {
     .with-pane & {