Web: Client: Section: Body. fix display file extension

packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js

@@ -64,10 +64,6 @@ const SimpleFilesRowContent = styled(RowContent)`
     }
   }
 
-  .rowMainContainer {
-    margin-inline-end: ${(props) => props.displayFileExtension && "0px"};
-  }
-
   .row_update-text {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -95,25 +91,24 @@ const SimpleFilesRowContent = styled(RowContent)`
 
   .row-content-link {
     padding-block: 12px 0;
-    padding-inline: ${(props) => !props.displayFileExtension && "0px 12px"};
+    padding-inline: 0 12px;
     margin-top: ${(props) =>
       props.theme.interfaceDirection === "rtl" ? "-14px" : "-12px"};
   }
 
+  .item-file-exst {
+    color: ${(props) => props.theme.filesSection.tableView.fileExstColor};
+  }
+
   @media ${tablet} {
     .row-main-container-wrapper {
       display: flex;
-      align-items: center;
+      justify-content: space-between;
       max-width: inherit;
     }
 
-    .mainIcons {
-      margin-bottom: ${(props) => props.displayFileExtension && "4px"};
-    }
-
     .badges {
       flex-direction: row-reverse;
-      padding-inline: ${(props) => props.displayFileExtension && "0px 12px"};
     }
 
     .tablet-badge {
@@ -152,10 +147,6 @@ const SimpleFilesRowContent = styled(RowContent)`
       margin: 0;
     }
 
-    .mainIcons {
-      margin-bottom: ${(props) => props.displayFileExtension && "0px"};
-    }
-
     .can-convert {
       margin: 0 1px;
     }
@@ -270,7 +261,6 @@ const FilesRowContent = ({
         isMobile={!isTablet()}
         isFile={fileExst || contentLength}
         sideColor={theme.filesSection.rowView.sideColor}
-        displayFileExtension={displayFileExtension}
       >
         <Link
           className="row-content-link"
@@ -285,20 +275,13 @@ const FilesRowContent = ({
           dir="auto"
         >
           {titleWithoutExt}
+          {displayFileExtension && (
+            <span className="item-file-exst">{fileExst}</span>
+          )}
         </Link>
         <div className="badges">
           {badgesComponent}
           {!isRoom && !isRooms && quickButtons}
-          {displayFileExtension && (
-            <Text
-              className="item-file-exst"
-              fontWeight="600"
-              fontSize="15px"
-              color={theme.filesSection.tableView.fileExstColor}
-            >
-              {fileExst}
-            </Text>
-          )}
         </div>
 
         {mainInfo && (

packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js

@@ -202,13 +202,11 @@ const StyledTableRow = styled(TableRow)`
 
   .item-file-name {
     padding-block: 14px;
-    padding-inline: ${(props) =>
-      props.displayFileExtension ? "0px" : "0 8px"};
+    padding-inline: 0 8px;
   }
 
   .item-file-exst {
-    padding-inline: 0 8px;
-    margin-bottom: 1px;
+    color: ${(props) => props.theme.filesSection.tableView.fileExstColor};
   }
 
   ${(props) =>

packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js

@@ -89,18 +89,10 @@ const FileNameCell = ({
         dir="auto"
       >
         {titleWithoutExt}
+        {displayFileExtension && (
+          <span className="item-file-exst">{fileExst}</span>
+        )}
       </Link>
-
-      {displayFileExtension && (
-        <Text
-          className="item-file-exst"
-          fontWeight="600"
-          fontSize="13px"
-          color={theme.filesSection.tableView.fileExstColor}
-        >
-          {fileExst}
-        </Text>
-      )}
     </>
   );
 };

packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js

@@ -86,15 +86,16 @@ const SimpleFilesTileContent = styled(TileContent)`
   .item-file-name {
     max-height: 100%;
     line-height: 20px;
-    max-width: 100px;
+
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
-    display: block;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
   }
 
   .item-file-exst {
-    margin-bottom: 1px;
+    color: ${(props) => props.theme.filesSection.tableView.fileExstColor};
   }
 
   ${({ isRooms }) =>
@@ -148,17 +149,10 @@ const FilesTileContent = ({
           isTextOverflow
         >
           {titleWithoutExt}
+          {displayFileExtension && (
+            <span className="item-file-exst">{fileExst}</span>
+          )}
         </Link>
-        {displayFileExtension && (
-          <Text
-            className="item-file-exst"
-            fontWeight="600"
-            fontSize="13px"
-            color={theme.filesSection.tableView.fileExstColor}
-          >
-            {fileExst}
-          </Text>
-        )}
       </SimpleFilesTileContent>
     </>
   );