[WEB-5784] fix: truncation issue in wi properties (#8422)

* fix: update background surface 2 variables in tailwind config

* fix: improve layout and truncation handling in issue link and list items

Author: JayashTripathy

apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx

@@ -160,7 +160,7 @@ export const SubIssuesListItem = observer(function SubIssuesListItem(props: Prop
                 </div>
               </WithDisplayPropertiesHOC>
               <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
-                <span className="w-full truncate text-13 text-primary">{issue.name}</span>
+                <span className="flex-1 w-0 truncate text-13 text-primary">{issue.name}</span>
               </Tooltip>
             </div>
 

apps/web/core/components/issues/issue-detail/links/link-item.tsx

@@ -49,23 +49,24 @@ export const IssueLinkItem = observer(function IssueLinkItem(props: TIssueLinkIt
         key={linkId}
         className="group col-span-12 lg:col-span-6 xl:col-span-4 2xl:col-span-3 3xl:col-span-2 flex items-center justify-between gap-3 h-10 flex-shrink-0 px-3 bg-surface-2 hover:bg-layer-1 border-[0.5px] border-subtle rounded-sm"
       >
-        <div className="flex items-center gap-2.5 truncate flex-grow">
+        <div className="flex items-center gap-2.5 min-w-0 flex-1">
           {faviconUrl ? (
-            <img src={faviconUrl} alt="favicon" className="size-4" />
+            <img src={faviconUrl} alt="favicon" className="size-4 flex-shrink-0" />
           ) : (
-            <Link className="size-4 text-tertiary group-hover:text-primary" />
+            <Link className="size-4 text-tertiary group-hover:text-primary flex-shrink-0" />
           )}
           <Tooltip tooltipContent={linkDetail.url} isMobile={isMobile}>
             <a
               href={linkDetail.url}
               target="_blank"
               rel="noopener noreferrer"
-              className="truncate text-body-xs-regular cursor-pointer flex-grow flex items-center gap-3"
+              className="flex-1 w-0 text-body-xs-regular cursor-pointer flex items-center gap-3"
             >
-              {linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
-
+              <span className="truncate">
+                {linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
+              </span>
               {linkTitle && linkTitle !== "" && (
-                <span className="text-placeholder text-caption-sm-regular">{linkTitle}</span>
+                <span className="text-placeholder text-caption-sm-regular flex-shrink-0">{linkTitle}</span>
               )}
             </a>
           </Tooltip>

apps/web/core/components/issues/relations/issue-list-item.tsx

@@ -126,7 +126,7 @@ export const RelationIssueListItem = observer(function RelationIssueListItem(pro
         {issue && (
           <div className="group relative flex min-h-11 h-full w-full items-center px-1.5 py-1 transition-all hover:bg-surface-2">
             <span className="size-5 flex-shrink-0" />
-            <div className="flex w-full truncate cursor-pointer items-center gap-3">
+            <div className="flex flex-1 min-w-0 cursor-pointer items-center gap-3">
               <div className="flex-shrink-0">
                 {projectDetail && (
                   <IssueIdentifier
@@ -141,7 +141,7 @@ export const RelationIssueListItem = observer(function RelationIssueListItem(pro
               </div>
 
               <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
-                <span className="w-full truncate text-13 text-primary">{issue.name}</span>
+                <span className="flex-1 w-0 truncate text-13 text-primary">{issue.name}</span>
               </Tooltip>
             </div>
             <div

packages/tailwind-config/variables.css

@@ -297,7 +297,7 @@
   /* Background colors */
   --background-color-canvas: var(--color-neutral-300);
   --background-color-surface-1: var(--color-neutral-white);
-  --background-color-surface-2: var(--color-neutral-200);
+  --background-color-surface-2: var(--color-neutral-100);
   --background-color-layer-1: var(--color-neutral-200);
   --background-color-layer-1-hover: var(--color-neutral-300);
   --background-color-layer-1-active: var(--color-neutral-400);
@@ -621,7 +621,7 @@
       /* Background colors */
       --background-color-canvas: var(--color-neutral-black);
       --background-color-surface-1: var(--color-neutral-100);
-      --background-color-surface-2: var(--color-neutral-100);
+      --background-color-surface-2: var(--color-neutral-200);
       --background-color-layer-1: var(--color-neutral-200);
       --background-color-layer-1-hover: var(--color-neutral-300);
       --background-color-layer-1-active: var(--color-neutral-400);