revert

packages/app/src/components/Navbar/GrowiSubNavigation.module.scss

@@ -119,18 +119,19 @@
         isolation: isolate;
       }
     }
-
-    .btn-copy,
-    .btn-edit-tags:hover {
-      // change button opacity
-      opacity: unset;
-    }
   }
 
   &:global {
     /*
      * Compact Mode
      */
+    &:hover {
+      .btn-copy,
+      .btn-edit-tags {
+        // change button opacity
+        opacity: unset;
+      }
+    }
     &.grw-subnav-compact {
       min-height: 70px;
 

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

@@ -23,7 +23,7 @@ const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
   const isTagsEmpty = tags.length === 0;
   const tagElements = tags.map((tag) => {
     return (
-      <a key={tag} href={`/_search?q=tag:${tag}`} className="ml-2 grw-tag-label badge badge-secondary">
+      <a key={tag} href={`/_search?q=tag:${tag}`} className="grw-tag-label badge badge-secondary mr-2">
         {tag}
       </a>
     );
@@ -32,14 +32,16 @@ const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
   return (
     <>
       {tagElements}
-      <a
-        id="edit-tags-btn-wrapper-for-tooltip"
-        className={`ml-2 p-0 btn btn-link btn-edit-tags text-muted d-flex align-items-center ${isTagsEmpty ? 'no-tags' : ''} ${isGuestUser ? 'disabled' : ''}`}
-        onClick={openEditorHandler}
-      >
-        { isTagsEmpty && <span>{t('Add tags for this page')}</span>}
-        <span className="ml-1 icon-plus"></span>
-      </a>
+
+      <div id="edit-tags-btn-wrapper-for-tooltip">
+        <a
+          className={`btn btn-link btn-edit-tags p-0 text-muted d-flex ${isTagsEmpty ? 'no-tags' : ''} ${isGuestUser ? 'disabled' : ''}`}
+          onClick={openEditorHandler}
+        >
+          { isTagsEmpty && <>{ t('Add tags for this page') }</>}
+          <i className="ml-1 icon-plus"></i>
+        </a>
+      </div>
       {isGuestUser && (
         <UncontrolledTooltip placement="top" target="edit-tags-btn-wrapper-for-tooltip" fade={false}>
           {t('Not available for guest')}

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

@@ -37,7 +37,7 @@ export const TagLabels:FC<Props> = (props: Props) => {
   return (
     <>
       <div className={`${styles['grw-tag-labels']} grw-tag-labels d-flex align-items-center`} data-testid="grw-tag-labels">
-        <span className="icon-tag" />
+        <i className="tag-icon icon-tag mr-2"></i>
         <RenderTagLabels
           tags={tags}
           openEditorModal={openEditorModal}