[mobile] Fix edit comments for tablet

apps/common/mobile/lib/view/collaboration/Collaboration.jsx

@@ -134,7 +134,7 @@ class CollaborationView extends Component {
         const show_popover = this.props.usePopover;
         return (
             show_popover ?
-                <Popover id="coauth-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
+                <Popover id="coauth-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()} closeByOutsideClick={false}>
                     <PageCollaboration style={{height: '410px'}} page={this.props.page}/>
                 </Popover> :
                 <Sheet className="coauth__sheet" push onSheetClosed={() => this.props.onclosed()}>

apps/common/mobile/lib/view/collaboration/Comments.jsx

@@ -292,6 +292,12 @@ const EditCommentDialog = inject("storeComments")(observer(({storeComments, comm
                             done.classList.remove('disabled');
                         }
                     });
+                },
+                open: () => {
+                    $$('.dialog-backdrop.backdrop-in')[0].classList.add('over-popover');
+                },
+                closed: () => {
+                    $$('.dialog-backdrop.backdrop-in')[0].classList.remove('over-popover');
                 }
             }
         }).open();
@@ -411,6 +417,12 @@ const AddReplyDialog = inject("storeComments")(observer(({storeComments, userInf
                         }
                     });
                     done.classList.add('disabled');
+                },
+                open: () => {
+                    $$('.dialog-backdrop.backdrop-in')[0].classList.add('over-popover');
+                },
+                closed: () => {
+                    $$('.dialog-backdrop.backdrop-in')[0].classList.remove('over-popover');
                 }
             }
         }).open();
@@ -536,6 +548,12 @@ const EditReplyDialog = inject("storeComments")(observer(({storeComments, commen
                             done.classList.remove('disabled');
                         }
                     });
+                },
+                open: () => {
+                    $$('.dialog-backdrop.backdrop-in')[0].classList.add('over-popover');
+                },
+                closed: () => {
+                    $$('.dialog-backdrop.backdrop-in')[0].classList.remove('over-popover');
                 }
             }
         }).open();
@@ -825,7 +843,7 @@ const ViewCommentPopover = ({onCommentMenuClick, onResolveComment}) => {
         f7.popover.open('#view-comment-popover', '#btn-coauth');
     });
     return (
-        <Popover id='view-comment-popover' style={{height: '410px'}}>
+        <Popover id='view-comment-popover' style={{height: '410px'}} closeByOutsideClick={false}>
             <CommentList onCommentMenuClick={onCommentMenuClick} onResolveComment={onResolveComment} />
         </Popover>
     )

apps/common/mobile/resources/less/comments.less

@@ -23,6 +23,7 @@
 #add-comment-dialog, #edit-comment-dialog, #add-reply-dialog, #edit-reply-dialog {
   .dialog {
     --f7-dialog-width: 400px;
+    z-index: 13700;
     .dialog-inner {
       padding: 0;
       height: 400px;
@@ -195,3 +196,9 @@
     }
   }
 }
+
+.dialog-backdrop.backdrop-in {
+  &.over-popover {
+    z-index: 13600;
+  }
+}

apps/common/mobile/resources/less/common.less

@@ -134,6 +134,7 @@
 }
 
 .dialog {
+    z-index: 13700;
     .content-block {
         padding: 0;
     }