Web: Files: ConflictResolve: fix styles

packages/client/src/components/dialogs/ConflictResolveDialog/index.tsx

@@ -37,6 +37,7 @@ import {
   ConflictResolveDialogProps,
   TActiveItem,
 } from "./ConflictResolveDialog.types";
+import { Text } from "@docspace/shared/components/text";
 
 const ConflictResolveDialog = (props: ConflictResolveDialogProps) => {
   const {
@@ -217,7 +218,7 @@ const ConflictResolveDialog = (props: ConflictResolveDialogProps) => {
         ns="Common"
         i18nKey="FileActionRequired"
         values={{ fileName: items[0].title }}
-        components={{ 1: <span className="bold" /> }}
+        components={{ 1: <span className="bold truncate" /> }}
       />
     );
 

packages/shared/dialogs/conflict-resolve/ConflictResolve.styled.ts

@@ -39,6 +39,12 @@ const StyledModalDialog = styled(ModalDialog)`
     .bold {
       font-weight: 600;
     }
+
+    .truncate {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
   }
 
   .select-action {
@@ -76,6 +82,10 @@ const StyledModalDialog = styled(ModalDialog)`
       color: #a3a9ae;
     }
   }
+
+  .conflict-resolve_file-name {
+    display: flex;
+  }
 `;
 
 export default StyledModalDialog;

packages/shared/dialogs/conflict-resolve/ConflictResolve.tsx

@@ -115,7 +115,7 @@ const ConflictResolve = (props: ConflictResolveProps) => {
     >
       <ModalDialog.Header>{headerLabel}</ModalDialog.Header>
       <ModalDialog.Body>
-        <Text truncate className="message">
+        <Text truncate className="message conflict-resolve_file-name ">
           {messageText}
         </Text>
         <Text className="select-action">{selectActionText}</Text>