Fixed comment edit size on mobile

cjmalloy · Nov 10, 2023 · 4965452 · 4965452
1 parent 23a3f21
commit 4965452
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 15 deletions.
diff --git a/src/app/component/comment/comment-thread/comment-thread.component.ts b/src/app/component/comment/comment-thread/comment-thread.component.ts
@@ -11,7 +11,7 @@ import { ThreadStore } from '../../../store/thread';
   styleUrls: ['./comment-thread.component.scss']
 })
 export class CommentThreadComponent implements OnInit, OnDestroy {
-  @HostBinding('class') css = 'comment-list';
+  @HostBinding('class') css = 'comment-thread';
   private destroy$ = new Subject<void>();
   private disposers: IReactionDisposer[] = [];
 

diff --git a/src/app/component/comment/comment.component.scss b/src/app/component/comment/comment.component.scss
@@ -1,5 +1,11 @@
 :host {
   display: block;
+  max-width: 100vw;
+  width: 100%;
+}
+
+.comment-container {
+  flex: 1;
 }
 
 .comment-collapse {
@@ -14,3 +20,7 @@
 .comment-body {
   display: block;
 }
+
+.comment-children {
+  width: calc(100% - 5px);
+}
diff --git a/src/app/directive/image-dim.directive.ts b/src/app/directive/image-dim.directive.ts
@@ -77,7 +77,7 @@ export class ImageDimDirective implements OnInit, OnDestroy {
     }
     const parentWidth = this.el.parentElement.offsetWidth;
     if (!this.grid && this.config.mobile && (!this.defaultWidth || this.defaultWidth >= window.innerWidth)) {
-      this.el.style.width = parentWidth + 'px';
+      this.el.style.width = (parentWidth - 12) + 'px';
       this.el.style.height = this.defaultHeightPx || height(parentWidth, this.dim) + 'px';
     } else if (this.grid || this.dim.width > parentWidth && (!this.defaultWidth || this.defaultWidth >= parentWidth)) {
       this.el.style.width = '100%';

diff --git a/src/app/page/ref/comments/comments.component.scss b/src/app/page/ref/comments/comments.component.scss
@@ -1,4 +1,5 @@
 :host {
+  display: block;
   width: 100vw;
-  overflow-x: hidden;
+  overflow: hidden;
 }
diff --git a/src/app/page/submit/submit.component.html b/src/app/page/submit/submit.component.html
@@ -78,6 +78,7 @@ <h5 class="fake-link" routerLink="." i18n>
                [placeholder]="placeholder"
                class="big"
                type="text"
+               size="1"
                autocomplete="off"
                formControlName="url"
                appAutofocus>

diff --git a/src/theme/common.scss b/src/theme/common.scss
@@ -1065,10 +1065,6 @@ formly-field-radio, formly-field-multicheckbox {
   }
 }
 
-.comment-list {
-  display: grid;
-}
-
 .comment {
   margin-left: 10px;
 

diff --git a/src/theme/mobile.scss b/src/theme/mobile.scss
@@ -187,13 +187,19 @@ $tablet-width: 767px;
   textarea {
     margin: 0;
     resize: vertical;
-    width: calc(100vw - 12px) !important;
+    width: 100% !important;
   }
 
   .editor textarea {
     margin-left: -3px;
   }
 
+  .app-comment-reply, app-comment-edit {
+    .editor textarea {
+      margin-left: -11px;
+    }
+  }
+
   .json-editor ngx-monaco-editor {
     margin: 0 0 0 -10px;
     width: 100vw !important;
@@ -239,21 +245,17 @@ $tablet-width: 767px;
     .comment-children {
       margin-left: 2px;
     }
-
-    .comment-container {
-      max-width: calc(100% - 8px);
-    }
   }
 
   .comment-reply, .comment-edit {
-    width: calc(100vw - 8px);
+    width: calc(min(100%, 100vw - 8px));
   }
 
-  .embed {
+  .embed:not(.comment-body) {
     position: relative;
     left: 0;
     margin: 0;
-    width: 100vw;
+    width: calc(min(100%, 100vw - 8px));
   }
 
   .audio-expand {