diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
index 52e890ad59..c06171f0ca 100644
--- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
+++ b/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}
>
{titleWithoutExt}
+ {displayFileExtension && (
+ {fileExst}
+ )}
{badgesComponent}
{!isRoom && !isRooms && quickButtons}
- {displayFileExtension && (
-
- {fileExst}
-
- )}
{mainInfo && (
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
index e16871417f..0f633034e5 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
+++ b/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) =>
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js
index c4dd49fe25..fdacbd2ca0 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js
@@ -89,18 +89,10 @@ const FileNameCell = ({
dir="auto"
>
{titleWithoutExt}
+ {displayFileExtension && (
+ {fileExst}
+ )}
-
- {displayFileExtension && (
-
- {fileExst}
-
- )}
>
);
};
diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js b/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js
index f5ff0ca001..7ff82134ee 100644
--- a/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js
+++ b/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 && (
+ {fileExst}
+ )}
- {displayFileExtension && (
-
- {fileExst}
-
- )}
>
);