fix long titles

medusajs · Aug 14, 2024 · 46f6667 · 46f6667
1 parent c355f27
commit 46f6667
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 7 deletions.
diff --git a/www/packages/docs-ui/src/components/Sidebar/Item/Category/index.tsx b/www/packages/docs-ui/src/components/Sidebar/Item/Category/index.tsx
@@ -2,7 +2,7 @@
 
 // @refresh reset
 
-import React, { useEffect, useRef, useState } from "react"
+import React, { useEffect, useMemo, useRef, useState } from "react"
 import { SidebarItemCategory as SidebarItemCategoryType } from "types"
 import { Loading, SidebarItem, useSidebar } from "../../../.."
 import clsx from "clsx"
@@ -48,6 +48,11 @@ export const SidebarItemCategory = ({
     item.onOpen?.()
   }
 
+  const isTitleOneWord = useMemo(
+    () => item.title.split(" ").length === 1,
+    [item.title]
+  )
+
   return (
     <div className={clsx("my-docs_0.75 w-full relative", className)}>
       <div className="px-docs_0.75">
@@ -57,7 +62,8 @@ export const SidebarItemCategory = ({
             "flex justify-between items-center gap-docs_0.5",
             "text-medusa-fg-muted",
             "cursor-pointer relative",
-            "z-[2] break-words"
+            "z-[2]",
+            !isTitleOneWord && "break-words"
           )}
           tabIndex={-1}
           onClick={() => {
@@ -67,7 +73,14 @@ export const SidebarItemCategory = ({
             setOpen((prev) => !prev)
           }}
         >
-          <span className="text-compact-x-small-plus">{item.title}</span>
+          <span
+            className={clsx(
+              "text-compact-x-small-plus",
+              isTitleOneWord && "truncate"
+            )}
+          >
+            {item.title}
+          </span>
           {item.additionalElms}
           {!item.additionalElms && (
             <>

diff --git a/www/packages/docs-ui/src/components/Sidebar/Item/Link/index.tsx b/www/packages/docs-ui/src/components/Sidebar/Item/Link/index.tsx
@@ -80,14 +80,20 @@ export const SidebarItemLink = ({
     return !item.isChildSidebar && (item.children?.length || 0) > 0
   }, [item.children])
 
+  const isTitleOneWord = useMemo(
+    () => item.title.split(" ").length === 1,
+    [item.title]
+  )
+
   return (
     <li ref={ref}>
       <span className="block px-docs_0.75">
         <Link
           href={item.isPathHref ? item.path : `#${item.path}`}
           className={clsx(
             "py-docs_0.25 px-docs_0.5",
-            "block w-full rounded-docs_sm break-words",
+            "block w-full rounded-docs_sm",
+            !isTitleOneWord && "break-words",
             active && [
               "bg-medusa-bg-base",
               "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
@@ -112,7 +118,9 @@ export const SidebarItemLink = ({
           shallow={!item.isPathHref}
           {...item.linkProps}
         >
-          <span>{item.title}</span>
+          <span className={clsx(isTitleOneWord && "truncate")}>
+            {item.title}
+          </span>
           {item.additionalElms}
         </Link>
       </span>

diff --git a/www/packages/docs-ui/src/components/Sidebar/Item/SubCategory/index.tsx b/www/packages/docs-ui/src/components/Sidebar/Item/SubCategory/index.tsx
@@ -90,13 +90,19 @@ export const SidebarItemSubCategory = ({
     return item.children?.length || 0 > 0
   }, [item.children])
 
+  const isTitleOneWord = useMemo(
+    () => item.title.split(" ").length === 1,
+    [item.title]
+  )
+
   return (
     <li ref={ref}>
       <span className="block px-docs_0.75">
         <span
           className={clsx(
             "py-docs_0.25 px-docs_0.5",
-            "block w-full break-words",
+            "block w-full",
+            !isTitleOneWord && "break-words",
             active && [
               "rounded-docs_sm",
               "shadow-borders-base dark:shadow-borders-base-dark",
@@ -110,7 +116,9 @@ export const SidebarItemSubCategory = ({
             className
           )}
         >
-          <span>{item.title}</span>
+          <span className={clsx(isTitleOneWord && "truncate")}>
+            {item.title}
+          </span>
           {item.additionalElms}
         </span>
       </span>