apply fb

apps/app/src/components/PageSideContents/PageSideContents.tsx

@@ -32,11 +32,10 @@ const PageTags = dynamic(() => import('../PageTags').then(mod => mod.PageTags),
 type TagsProps = {
   pageId: string,
   revisionId: string,
-  tagLabelsMaxWidth?: number
 }
 
 const Tags = (props: TagsProps): JSX.Element => {
-  const { pageId, revisionId, tagLabelsMaxWidth } = props;
+  const { pageId, revisionId } = props;
 
   const { data: tagsInfoData } = useSWRxTagsInfo(pageId, { suspense: true });
 
@@ -64,7 +63,6 @@ const Tags = (props: TagsProps): JSX.Element => {
         tags={tagsInfoData.tags}
         isTagLabelsDisabled={isTagLabelsDisabled}
         onClickEditTagsButton={onClickEditTagsButton}
-        tagLabelsMaxWidth={tagLabelsMaxWidth}
       />
     </div>
   );
@@ -89,13 +87,12 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
   const isTopPagePath = isTopPage(pagePath);
   const isUsersHomepagePath = isUsersHomepage(pagePath);
   const isTrash = isTrashPage(pagePath);
-  const grwSideContentsContainerElm = document.querySelector('.grw-side-contents-container');
 
   return (
     <>
       {/* Tags */}
       <Suspense fallback={<PageTagsSkeleton />}>
-        <Tags pageId={page._id} revisionId={getIdForRef(page.revision)} tagLabelsMaxWidth={grwSideContentsContainerElm?.clientWidth} />
+        <Tags pageId={page._id} revisionId={getIdForRef(page.revision)} />
       </Suspense>
 
       <div className={`${styles['grw-page-accessories-controls']} d-flex flex-column gap-2`}>

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

@@ -16,7 +16,6 @@ type Props = {
   isTagLabelsDisabled: boolean,
   tagsUpdateInvoked?: (tags: string[]) => Promise<void> | void,
   onClickEditTagsButton: () => void,
-  tagLabelsMaxWidth?: number
 }
 
 export const PageTagsSkeleton = (): JSX.Element => {
@@ -25,7 +24,7 @@ export const PageTagsSkeleton = (): JSX.Element => {
 
 export const PageTags:FC<Props> = (props: Props) => {
   const {
-    tags, isTagLabelsDisabled, onClickEditTagsButton, tagLabelsMaxWidth,
+    tags, isTagLabelsDisabled, onClickEditTagsButton,
   } = props;
   const [isHovered, setIsHovered] = useState(false);
   const { t } = useTranslation();
@@ -73,7 +72,7 @@ export const PageTags:FC<Props> = (props: Props) => {
           </button>
         </div>
         <div>
-          <RenderTagLabels tags={tags} maxWidth={tagLabelsMaxWidth} />
+          <RenderTagLabels tags={tags} />
         </div>
       </div>
     </div>

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

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React from 'react';
 
 import SimpleBar from 'simplebar-react';
 
@@ -6,34 +6,22 @@ import { useKeywordManager } from '~/client/services/search-operation';
 
 type RenderTagLabelsProps = {
   tags: string[],
-  maxWidth?: number
 }
 
 const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
-  const { tags, maxWidth = 250 } = props;
+  const { tags } = props;
 
   const { pushState } = useKeywordManager();
 
-  const [maxHeight, setMaxHeight] = useState<number | string>('100px');
-  const aRef = useRef<HTMLAnchorElement>(null);
-
-  useEffect(() => {
-    if (aRef.current) {
-      const aHeight = aRef.current.offsetHeight;
-      setMaxHeight(`calc((${aHeight}px + 0.25rem) * 3)`);
-    }
-  }, [tags]);
 
   return (
-    <SimpleBar className="pe-1" style={{ maxHeight, width: maxWidth }}>
+    <SimpleBar className="grw-tag-simple-bar pe-1">
       {tags.map(tag => (
         <a
           key={tag}
           type="button"
           className="grw-tag badge me-1 mb-1 text-truncate"
           onClick={() => pushState(`tag:${tag}`)}
-          style={{ maxWidth: `calc(${maxWidth}px - 0.25rem)` }}
-          ref={aRef}
         >
           {tag}
         </a>

apps/app/src/components/PageTags/TagLabels.module.scss

@@ -9,6 +9,14 @@ $grw-tag-label-font-size: 12px;
     border-radius: bs.$border-radius;
   }
 
+  .grw-tag-simple-bar {
+    width: 15.5rem;
+    max-height: 5rem;
+    .grw-tag{
+      max-width: 15rem;
+    }
+  }
+
   // apply larger font when smaller than lg
   @include bs.media-breakpoint-down(lg) {
     .material-symbols-outlined {