move edit tags btn wrapper for tooltip

apps/app/src/components/PageTags/PageTags.tsx

@@ -1,6 +1,10 @@
 import type { FC } from 'react';
 import React from 'react';
 
+import { useTranslation } from 'next-i18next';
+
+import { NotAvailableForGuest } from '../NotAvailableForGuest';
+import { NotAvailableForReadOnlyUser } from '../NotAvailableForReadOnlyUser';
 import { Skeleton } from '../Skeleton';
 
 import RenderTagLabels from './RenderTagLabels';
@@ -22,29 +26,50 @@ export const PageTags:FC<Props> = (props: Props) => {
   const {
     tags, isTagLabelsDisabled, onClickEditTagsButton,
   } = props;
+  const { t } = useTranslation();
 
   if (tags == null) {
     return <></>;
   }
 
-  const printNoneClass = tags.length === 0 ? 'd-print-none' : '';
+  const isTagsEmpty = tags.length === 0;
+  const printNoneClass = isTagsEmpty ? 'd-print-none' : '';
 
   return (
     <>
-      <div className={`${styles['grw-tag-labels']} grw-tag-labels d-flex align-items-center ${printNoneClass}`} data-testid="grw-tag-labels">
+      <div className={`${styles['grw-tag-labels']} grw-tag-labels d-flex align-items-center mb-2 ${printNoneClass}`} data-testid="grw-tag-labels">
         <button
           type="button"
-          className={`btn btn-sm btn-outline-secondary rounded-pill mb-2 d-flex d-lg-none ${styles['grw-tag-icon-button']}`}
+          className={`btn btn-sm btn-outline-secondary rounded-pill d-flex d-lg-none ${styles['grw-tag-icon-button']}`}
           onClick={onClickEditTagsButton}
         >
           <span className="material-symbols-outlined">local_offer</span>
         </button>
-        <div className="d-none d-lg-flex">
-          <RenderTagLabels
-            tags={tags}
-            isTagLabelsDisabled={isTagLabelsDisabled}
-            onClickEditTagsButton={onClickEditTagsButton}
-          />
+        <div className="d-none d-lg-flex row">
+          <div className="col text-secondary">
+            <span className="material-symbols-outlined me-1">local_offer</span>
+            <span className="me-1">{t('Tags')}</span>
+            <NotAvailableForGuest>
+              <NotAvailableForReadOnlyUser>
+                <span id="edit-tags-btn-wrapper-for-tooltip">
+                  <a
+                    className={
+                      `btn btn-link btn-edit-tags text-muted
+                        ${isTagsEmpty && 'no-tags'}
+                        ${isTagLabelsDisabled && 'disabled'}`
+                    }
+                    onClick={onClickEditTagsButton}
+                  >
+                    {isTagsEmpty && <span className="me-1">{ t('Add tags for this page') }</span>}
+                    <i className="icon-plus" />
+                  </a>
+                </span>
+              </NotAvailableForReadOnlyUser>
+            </NotAvailableForGuest>
+          </div>
+          <div className="d-flex flex-wrap align-items-center">
+            <RenderTagLabels tags={tags} />
+          </div>
         </div>
       </div>
     </>

apps/app/src/components/PageTags/RenderTagLabels.tsx

@@ -1,28 +1,16 @@
 import React from 'react';
 
-import { useTranslation } from 'next-i18next';
-
 import { useKeywordManager } from '~/client/services/search-operation';
 
-import { NotAvailableForGuest } from '../NotAvailableForGuest';
-import { NotAvailableForReadOnlyUser } from '../NotAvailableForReadOnlyUser';
-
 type RenderTagLabelsProps = {
   tags: string[],
-  isTagLabelsDisabled: boolean,
-  onClickEditTagsButton: () => void,
 }
 
 const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
-  const {
-    tags, isTagLabelsDisabled, onClickEditTagsButton,
-  } = props;
-  const { t } = useTranslation();
+  const { tags } = props;
 
   const { pushState } = useKeywordManager();
 
-  const isTagsEmpty = tags.length === 0;
-
   return (
     <>
       {tags.map((tag) => {
@@ -30,30 +18,13 @@ const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
           <a
             key={tag}
             type="button"
-            className="grw-tag badge me-2"
+            className="grw-tag badge me-1 mb-1"
             onClick={() => pushState(`tag:${tag}`)}
           >
             {tag}
           </a>
         );
       })}
-      <NotAvailableForGuest>
-        <NotAvailableForReadOnlyUser>
-          <div id="edit-tags-btn-wrapper-for-tooltip" className="d-print-none">
-            <a
-              className={
-                `btn btn-link btn-edit-tags text-muted d-flex align-items-center
-                ${isTagsEmpty && 'no-tags'}
-                ${isTagLabelsDisabled && 'disabled'}`
-              }
-              onClick={onClickEditTagsButton}
-            >
-              {isTagsEmpty && <>{ t('Add tags for this page') }</>}
-              <i className={`icon-plus ${isTagsEmpty && 'ms-1'}`} />
-            </a>
-          </div>
-        </NotAvailableForReadOnlyUser>
-      </NotAvailableForGuest>
     </>
 
   );