fix: Repos with long names get cut off (#1769)

Signed-off-by: Aryan Singh <[email protected]>
Co-authored-by: OGBONNA SUNDAY <[email protected]>

components/molecules/TableRepositoryName/table-repository-name.tsx

@@ -1,7 +1,6 @@
 import { StaticImageData } from "next/image";
 import Avatar from "components/atoms/Avatar/avatar";
-import { truncateString } from "lib/utils/truncate-string";
-
+import Tooltip from "components/atoms/Tooltip/tooltip";
 interface TableRepositoryNameProps {
   avatarURL?: string | StaticImageData;
   fullName: string;
@@ -26,12 +25,15 @@ const TableRepositoryName = ({ avatarURL, fullName }: TableRepositoryNameProps):
       </a>
 
       {/* Text */}
+
       <div className="flex flex-col justify-center">
-        <div title={name} className="  text-base text-light-slate-12 tracking-tight">
-          <a href={`https://www.github.com/${handle}/${name}`} target="_blank" rel="noreferrer">
-            {name && name.length > 10 ? truncateString(name, 12) : name}
-          </a>
-        </div>
+        <Tooltip content={name}>
+          <div className="  text-base text-light-slate-12 tracking-tight max-w-[5.5rem] sm:max-w-[9.3rem] md:max-w-[7rem] whitespace-nowrap overflow-hidden overflow-ellipsis">
+            <a href={`https://www.github.com/${handle}/${name}`} target="_blank" rel="noreferrer">
+              {name}
+            </a>
+          </div>
+        </Tooltip>
         <div className="  text-sm text-light-slate-11 truncate max-w-[85px] md:max-w-[110px]">
           <a href={`https://www.github.com/${handle}`} target="_blank" rel="noreferrer">
             {handle ? `@${handle}` : "handle1234"}