From 3ce40dfa2f9418377782fef3a5e727b7b4fbc6b8 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 17 Apr 2025 17:08:13 +0530
Subject: [PATCH] [WIKI-316] fix: list item overflow #6942

---
 web/core/components/core/list/list-item.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/web/core/components/core/list/list-item.tsx b/web/core/components/core/list/list-item.tsx
index 07bfc0992..9a29f61c0 100644
--- a/web/core/components/core/list/list-item.tsx
+++ b/web/core/components/core/list/list-item.tsx
@@ -24,6 +24,8 @@ interface IListItemProps {
   isSidebarOpen?: boolean;
   quickActionElement?: JSX.Element;
   preventDefaultNProgress?: boolean;
+  leftElementClassName?: string;
+  rightElementClassName?: string;
 }
 
 export const ListItem: FC<IListItemProps> = (props) => {
@@ -44,6 +46,8 @@ export const ListItem: FC<IListItemProps> = (props) => {
     quickActionElement,
     itemClassName = "",
     preventDefaultNProgress = false,
+    leftElementClassName = "",
+    rightElementClassName = "",
   } = props;
 
   // router
@@ -64,7 +68,7 @@ export const ListItem: FC<IListItemProps> = (props) => {
           className
         )}
       >
-        <div className={cn("relative flex w-full items-center justify-between gap-3 overflow-hidden", itemClassName)}>
+        <div className={cn("relative flex w-full items-center justify-between gap-3 truncate ", itemClassName)}>
           <ControlLink
             id={id}
             className="relative flex w-full items-center gap-3 overflow-hidden"
@@ -74,20 +78,22 @@ export const ListItem: FC<IListItemProps> = (props) => {
             disabled={disableLink}
             data-prevent-nprogress={preventDefaultNProgress}
           >
-            <div className="flex items-center gap-4 truncate">
+            <div className={cn("flex items-center gap-4 truncate", leftElementClassName)}>
               {prependTitleElement && <span className="flex items-center flex-shrink-0">{prependTitleElement}</span>}
               <Tooltip tooltipContent={title} position="top" isMobile={isMobile}>
                 <span className="truncate text-sm">{title}</span>
               </Tooltip>
             </div>
-            {appendTitleElement && <span className="flex items-center flex-shrink-0">{appendTitleElement}</span>}
+            {appendTitleElement && (
+              <span className={cn("flex items-center flex-shrink-0", rightElementClassName)}>{appendTitleElement}</span>
+            )}
           </ControlLink>
           {quickActionElement && quickActionElement}
         </div>
         {actionableItems && (
           <div
             className={cn(
-              "relative flex items-center justify-start gap-4 flex-wrap w-full",
+              "relative flex items-center justify-start gap-4 flex-wrap w-full flex-shrink-0",
               {
                 "xl:flex-nowrap xl:w-auto xl:flex-shrink-0": isSidebarOpen,
                 "lg:flex-nowrap lg:w-auto lg:flex-shrink-0": !isSidebarOpen,