From 46f6667a954dab06d8ca1b3fc0aab9d4c965a13d Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Wed, 14 Aug 2024 18:23:47 +0300
Subject: [PATCH] fix long titles

---
 .../Sidebar/Item/Category/index.tsx           | 19 ++++++++++++++++---
 .../components/Sidebar/Item/Link/index.tsx    | 12 ++++++++++--
 .../Sidebar/Item/SubCategory/index.tsx        | 12 ++++++++++--
 3 files changed, 36 insertions(+), 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
index 0c148a8319818..9538c91214051 100644
--- 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
index 451e5ba22b358..a55d9b29c3e97 100644
--- 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,6 +80,11 @@ 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">
@@ -87,7 +92,8 @@ export const SidebarItemLink = ({
           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
index 0b14067809aaa..8b997bb77de8d 100644
--- 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>