tag labels text truncate

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

@@ -32,10 +32,11 @@ 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 } = props;
+  const { pageId, revisionId, tagLabelsMaxWidth } = props;
 
   const { data: tagsInfoData } = useSWRxTagsInfo(pageId, { suspense: true });
 
@@ -63,6 +64,7 @@ const Tags = (props: TagsProps): JSX.Element => {
         tags={tagsInfoData.tags}
         isTagLabelsDisabled={isTagLabelsDisabled}
         onClickEditTagsButton={onClickEditTagsButton}
+        tagLabelsMaxWidth={tagLabelsMaxWidth}
       />
     </div>
   );
@@ -87,13 +89,13 @@ 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)} />
+        <Tags pageId={page._id} revisionId={getIdForRef(page.revision)} tagLabelsMaxWidth={grwSideContentsContainerElm?.clientWidth} />
       </Suspense>
 
       <div className={`${styles['grw-page-accessories-controls']} d-flex flex-column gap-2`}>

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

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

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

@@ -4,10 +4,11 @@ import { useKeywordManager } from '~/client/services/search-operation';
 
 type RenderTagLabelsProps = {
   tags: string[],
+  maxWidth?: number
 }
 
 const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
-  const { tags } = props;
+  const { tags, maxWidth } = props;
 
   const { pushState } = useKeywordManager();
 
@@ -18,8 +19,9 @@ const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
           <a
             key={tag}
             type="button"
-            className="grw-tag badge me-1 mb-1"
+            className="grw-tag badge me-1 mb-1 text-truncate"
             onClick={() => pushState(`tag:${tag}`)}
+            style={{ maxWidth }}
           >
             {tag}
           </a>