adjust header layout for Tags page

src/client/js/components/Page/TagEditor.jsx

@@ -46,7 +46,7 @@ export default class TagEditor extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={this.state.isOpenModal} toggle={this.closeModalHandler} id="editTagModal">
+      <Modal isOpen={this.state.isOpenModal} toggle={this.closeModalHandler} id="edit-tag-modal">
         <ModalHeader tag="h4" toggle={this.closeModalHandler} className="bg-primary">
           <span className="text-white">Edit Tags</span>
         </ModalHeader>

src/client/styles/scss/_tag.scss

@@ -1,31 +1,35 @@
-.tag-viewer {
-  .manage-tags {
-    font-size: 10px;
-    cursor: pointer;
+.tags-page {
+  .grw-header.sticky-top {
+    height: unset;
   }
 
-  .tag-icon:not(:first-child) {
-    margin-left: 5px;
-  }
+  .tag-viewer {
+    .manage-tags {
+      font-size: 10px;
+      cursor: pointer;
+    }
 
-  .btn.btn-edit-tags,
-  .tag-icon {
-    font-size: 10px;
-  }
+    .tag-icon:not(:first-child) {
+      margin-left: 5px;
+    }
 
-  .tag-name {
-    margin-left: 1px;
-    font-size: 10px;
+    .btn.btn-edit-tags,
+    .tag-icon {
+      font-size: 10px;
+    }
+
+    .tag-name {
+      margin-left: 1px;
+      font-size: 10px;
+    }
   }
-}
 
-#tags-page {
   .list-tag-count {
     background: rgba(0, 0, 0, 0.08);
   }
 }
 
-#editTagModal {
+#edit-tag-modal {
   .form-control {
     height: auto;
   }

src/client/styles/scss/theme/_apply-colors-dark.scss

@@ -123,7 +123,9 @@ textarea.form-control {
 /*
  * GROWI subnavigation
  */
-.admin-page {
+.admin-page,
+.user-settings-page,
+.tags-page {
   .grw-header {
     background-color: rgba(darken($bgcolor-global, 90%), 0.9);
   }

src/client/styles/scss/theme/_apply-colors-light.scss

@@ -27,7 +27,8 @@
  * GROWI subnavigation
  */
 .admin-page,
-.user-settings-page {
+.user-settings-page,
+.tags-page {
   .grw-header {
     background-color: rgba(darken($bgcolor-global, 6%), 0.9);
   }

src/server/views/tags.html

@@ -1,16 +1,15 @@
 {% extends 'layout/layout.html' %}
 
+{% block html_title %}{{ customizeService.generateCustomTitle(t('Tags')) }}{% endblock %}
+
+{% block html_base_css %}tags-page{% endblock %}
+
 {% block layout_main %}
+<header class="sticky-top py-0 grw-header">
+  <h1 class="title">{{ t('Tags') }}</h1>
+</header>
+
 <div class="container-fluid">
-  <div class="row grw-subnav">
-    <div class="col-xs-12">
-      {% block content_header %}
-      <header id="page-header">
-        <h1 class="title">{{ t('Tags') }}</h1>
-      </header>
-      {% endblock %}
-    </div>
-  </div>
   <div class="row">
     <div id="main" class="main mt-3 col-md-12 tags-page">
       <div class="" id="tags-page"></div>