Feature/commenting responsive layout (#7091)

* Improve commenting layout

* Improve mobile layout

* Position comments absolutely on mobile

* Remove mobile state toggle

client/scss/components/_forms.scss

@@ -440,7 +440,11 @@ li.inline:first-child {
     }
 
     .field-content {
-        padding-right: 60px;
+        padding-right: 45px;
+
+        @include media-breakpoint-up(sm) {
+            padding-right: 60px;
+        }
     }
 
     .widget-draftail_rich_text_area .field-content {
@@ -448,6 +452,7 @@ li.inline:first-child {
     }
 
     .field-comment-control {
+        position: absolute;
         display: block;
         top: 0;
         right: 0;
@@ -462,10 +467,6 @@ li.inline:first-child {
             }
         }
 
-        @include media-breakpoint-up(md) {
-            position: absolute;
-        }
-
         button {
             @include transition(opacity 0.2s ease);
             border: 0;
@@ -476,7 +477,11 @@ li.inline:first-child {
             border-radius: 3px;
             position: absolute;
             top: 50%;
-            right: 10px;
+            right: 0;
+
+            @include media-breakpoint-up(sm) {
+                right: 10px;
+            }
 
             // Hide by default, reveal on hover of parent
             @include media-breakpoint-up(md) {

client/src/components/CommentApp/components/Comment/index.tsx

@@ -605,7 +605,7 @@ export default class CommentComponent extends React.Component<CommentProps> {
     const top = this.props.layout.getCommentPosition(
       this.props.comment.localId
     );
-    const right = this.props.isFocused ? 50 : 0;
+
     return (
       <FocusTrap
         focusTrapOptions={{
@@ -630,7 +630,6 @@ export default class CommentComponent extends React.Component<CommentProps> {
           style={{
             position: 'absolute',
             top: `${top}px`,
-            right: `${right}px`,
             display: this.props.isVisible ? 'block' : 'none',
           }}
           data-comment-id={this.props.comment.localId}

client/src/components/CommentApp/components/Comment/style.scss

@@ -1,20 +1,37 @@
 .comment {
     @include box;
 
-    width: 100%;
+    width: calc(100vw - 40px);
+    max-width: calc(100vw - 19%);
     display: block;
     transition: top 0.5s ease 0s, right 0.5s ease 0s, height 0.5s ease 0s;
     pointer-events: auto;
     box-sizing: border-box;
+    right: -2000px;
 
     @include media-breakpoint-up(sm) {
+        width: calc(100vw - 40px);
+        max-width: 400px;
+        left: initial;
+    }
+
+    @include media-breakpoint-up(md) {
         max-width: 200px;
+        right: 0;
     }
 
     @include media-breakpoint-up(lg) {
         max-width: 275px;
     }
 
+    &--focused {
+        right: 35px;
+
+        @include media-breakpoint-up(md) {
+            right: 50px;
+        }
+    }
+
     &__text {
         color: $color-box-text;
         font-size: 13px;

wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss

@@ -566,17 +566,17 @@ footer .preview {
 
     // Make room for comments on the right when enabled
     .tab-content--comments-enabled .object {
-        padding-right: 100px;
+        padding-right: 27%;
 
         &.full {
-            padding-right: 100px;
+            padding-right: 36%;
         }
 
         @include media-breakpoint-up(lg) {
-            padding-right: 266px;
+            padding-right: 30%;
 
             &.full {
-                padding-right: 450px;
+                padding-right: 36%;
             }
         }
     }