Fix More Instances of Tailwind Linting (#1435)

## Description

<!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. -->
idk how I keep finding more of these :/

## Related Issue and Pull requests

<!-- Link to any related issues using the format #<issue-number> -->

## Type of Change

<!-- Please delete options that are not relevant -->

- [x] Cleanup/Refactor

## Checklist

<!-- Please ensure the following are completed before submitting the PR -->

- [ ] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Screenshots (if applicable)

<!-- Include any screenshots that might help explain the changes or provide visual context -->

## Test Instructions

<!-- Detail steps and prerequisites for testing the changes in this PR -->

## Additional Comments

<!-- Add any additional context or information that reviewers might need to know regarding this PR -->

Author: camielvs

src/components/shared/ReactFlow/FlowCanvas/ConfirmationDialogs/ReplaceConfirmation.tsx

@@ -41,13 +41,13 @@ export function getReplaceConfirmationDetails(
                   )}
                 />
               </TooltipTrigger>
-              <TooltipContent className="z-[9999]">
+              <TooltipContent className="z-9999">
                 Linked node will be disconnected
               </TooltipContent>
             </Tooltip>
             <div className="flex items-baseline flex-wrap">
-              <span className="font-bold break-words">{input.name}</span>
-              <span className="font-light break-words ml-1">{`(${input.type})`}</span>
+              <span className="font-bold wrap-break-word">{input.name}</span>
+              <span className="font-light wrap-break-word ml-1">{`(${input.type})`}</span>
               <span className="shrink-0">:</span>
               <div className="break-all text-wrap overflow-hidden ml-1">
                 {argument.value}

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCodeViewer.tsx

@@ -15,7 +15,7 @@ const IOCodeViewer = ({ title, value }: IOCodeViewerProps) => {
 
   if (!isValidJson) {
     return (
-      <pre className="w-full font-mono text-xs whitespace-pre-line break-words">
+      <pre className="w-full font-mono text-xs whitespace-pre-line wrap-break-word">
         {value || "No value"}
       </pre>
     );

src/components/shared/TaskDetails/Details.tsx

@@ -149,7 +149,7 @@ const TaskDetails = ({
             <div className="shrink-0 font-medium text-sm text-gray-700 mb-1">
               Task ID
             </div>
-            <div className="text-xs text-gray-600 break-words whitespace-pre-wrap">
+            <div className="text-xs text-gray-600 wrap-break-word whitespace-pre-wrap">
               {taskId}
             </div>
           </div>
@@ -159,7 +159,7 @@ const TaskDetails = ({
             <div className="shrink-0 font-medium text-sm text-gray-700 mb-1">
               Run Status
             </div>
-            <div className="text-xs text-gray-600 break-words whitespace-pre-wrap">
+            <div className="text-xs text-gray-600 wrap-break-word whitespace-pre-wrap">
               {status}
             </div>
           </div>
@@ -177,7 +177,7 @@ const TaskDetails = ({
             <div className="shrink-0 font-medium text-sm text-gray-700 mb-1">
               Author
             </div>
-            <div className="text-xs text-gray-600 break-words whitespace-pre-wrap">
+            <div className="text-xs text-gray-600 wrap-break-word whitespace-pre-wrap">
               {componentSpec.metadata.annotations?.author}
             </div>
           </div>
@@ -202,7 +202,7 @@ const TaskDetails = ({
               </div>
 
               <CollapsibleContent className="mt-1">
-                <div className="text-xs text-gray-600 break-words whitespace-pre-wrap">
+                <div className="text-xs text-gray-600 wrap-break-word whitespace-pre-wrap">
                   {componentSpec.description}
                 </div>
               </CollapsibleContent>

src/components/shared/TaskDetails/IO.tsx

@@ -34,7 +34,7 @@ const TaskIO = ({ componentSpec }: TaskIOProps) => {
                   )}
                 </div>
                 {input.description && (
-                  <div className="text-gray-600 break-words text-xs">
+                  <div className="text-gray-600 wrap-break-word text-xs">
                     {input.description}
                   </div>
                 )}
@@ -55,7 +55,7 @@ const TaskIO = ({ componentSpec }: TaskIOProps) => {
                 </div>
                 {output.type && <Badge>Type: {String(output.type)}</Badge>}
                 {output.description && (
-                  <div className="text-muted-foreground break-words text-xs">
+                  <div className="text-muted-foreground wrap-break-word text-xs">
                     {output.description}
                   </div>
                 )}

src/components/ui/breadcrumb.tsx

@@ -19,7 +19,7 @@ const BreadcrumbList = React.forwardRef<
   <ol
     ref={ref}
     className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      "flex flex-wrap items-center gap-1.5 wrap-break-word text-sm text-muted-foreground sm:gap-2.5",
       className,
     )}
     {...props}