diff --git a/frontend/src/css/file-view.css b/frontend/src/css/file-view.css
index 79db754161..c13d1586f7 100644
--- a/frontend/src/css/file-view.css
+++ b/frontend/src/css/file-view.css
@@ -41,11 +41,11 @@ body {
   color: #808080;
 }
 /* for mobile */
-.seafile-comment {
+.file-view-body .seafile-comment {
   width: 100%;
 }
 @media (min-width: 768px) {
-  .seafile-comment {
+  .file-view-body .seafile-comment {
     width: 29%;
   }
 }
diff --git a/frontend/src/css/markdown-viewer/markdown-editor.css b/frontend/src/css/markdown-viewer/markdown-editor.css
index 58caffab68..b5b77c4a3d 100644
--- a/frontend/src/css/markdown-viewer/markdown-editor.css
+++ b/frontend/src/css/markdown-viewer/markdown-editor.css
@@ -168,3 +168,7 @@
     display: none !important;
   }
 }
+
+.seafile-editor-side-panel .seafile-comment {
+  width: 100%;
+}
diff --git a/frontend/src/css/review-comments.css b/frontend/src/css/review-comments.css
index 26e9fbb5f1..f74660d024 100644
--- a/frontend/src/css/review-comments.css
+++ b/frontend/src/css/review-comments.css
@@ -1,8 +1,8 @@
 .review-side-panel .seafile-comment {
-  flex: 1;
   display: flex;
   flex-direction: column;
   height: 100%;
+  width: 100%;
   background-color: #fff;
 }
 .seafile-comment-resizing {
diff --git a/frontend/src/css/text-file-view.css b/frontend/src/css/text-file-view.css
index ac52940dda..365ea73f88 100644
--- a/frontend/src/css/text-file-view.css
+++ b/frontend/src/css/text-file-view.css
@@ -1,17 +1,17 @@
 .text-file-view {
     overflow: auto;
 }
-.ReactCodeMirror {
+.text-file-view .ReactCodeMirror {
     box-shadow: 0 0 6px #ccc;
     border: 1px solid #ccc;
     width: calc(100% - 40px);
     max-width: 950px;
     margin: 0 auto;
 }
-.CodeMirror {
+.text-file-view .CodeMirror {
     height: auto;
     min-height: 300px;
 }
-.CodeMirror-scroll {
+.text-file-view .CodeMirror-scroll {
     min-height: 300px;
 }
diff --git a/seahub/templates/markdown_file_view_react.html b/seahub/templates/markdown_file_view_react.html
index b2e1696fac..c260393213 100644
--- a/seahub/templates/markdown_file_view_react.html
+++ b/seahub/templates/markdown_file_view_react.html
@@ -12,8 +12,8 @@
         <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seafile-editor-font/seafile-editor-font.css" />
         <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seafile-ui.css" />
         <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seahub_react.css?t=1398068110" />
-        {% render_bundle 'markdownEditor' 'css' %}
         {% render_bundle 'commons' 'css' %}
+        {% render_bundle 'markdownEditor' 'css' %}
         <link rel="stylesheet" type="text/css" media="print" href="{{ MEDIA_URL }}css/print_for_md_file_view.css" />
         {% if branding_css != '' %}<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}{{ branding_css }}" />{% endif %}
         {% if enable_branding_css %}<link rel="stylesheet" type="text/css" href="{% url 'custom_css' %}" />{% endif %}