Merge pull request #5682 from weseek/imprv/modify-pagelist-and-comment-pos

imprv: Adjust pagelist and comment position

packages/app/src/components/Page/DisplaySwitcher.tsx

@@ -70,7 +70,9 @@ const DisplaySwitcher = (): JSX.Element => {
                         className="btn btn-block btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between align-items-center"
                         onClick={() => openDescendantPageListModal(currentPath)}
                       >
-                        <PageListIcon />
+                        <div className="grw-page-accessories-control-icon">
+                          <PageListIcon />
+                        </div>
                         {t('page_list')}
                         <span></span> {/* for a count badge */}
                       </button>
@@ -79,13 +81,13 @@ const DisplaySwitcher = (): JSX.Element => {
 
                   {/* Comments */}
                   { getCommentListDom != null && !isTopPagePath && (
-                    <div className="mt-2">
+                    <div className="grw-page-accessories-control mt-2">
                       <button
                         type="button"
                         className="btn btn-block btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between align-items-center"
                         onClick={() => smoothScrollIntoView(getCommentListDom, WIKI_HEADER_LINK)}
                       >
-                        <i className="mr-2 icon-fw icon-bubbles"></i>
+                        <i className="icon-fw icon-bubbles grw-page-accessories-control-icon"></i>
                         <span>Comments</span>
                         <span></span> {/* for a count badge */}
                       </button>

packages/app/src/styles/_page-accessories-control.scss

@@ -8,4 +8,9 @@
       height: 16px;
     }
   }
+  .grw-page-accessories-control-icon {
+    display: flex;
+    justify-content: center;
+    width: 20px;
+  }
 }