diff --git a/packages/asc-web-components/table-container/StyledTableContainer.js b/packages/asc-web-components/table-container/StyledTableContainer.js index 1cc6d8270a..ed9b03b13b 100644 --- a/packages/asc-web-components/table-container/StyledTableContainer.js +++ b/packages/asc-web-components/table-container/StyledTableContainer.js @@ -48,6 +48,7 @@ const StyledTableContainer = styled.div` #eceef1 calc(100% - 24px), #ffffff calc(100% - 24px) ); + border-top: 0; } .content-container { diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js index 2916ce8169..f68e69d140 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js @@ -18,7 +18,7 @@ import TypeCell from "./sub-components/TypeCell"; import globalColors from "@appserver/components/utils/globalColors"; import styled, { css } from "styled-components"; import Base from "@appserver/components/themes/base"; - +import { isSafari } from "react-device-detect"; const sideColor = globalColors.gray; const { acceptBackground, background } = Base.dragAndDrop; @@ -54,6 +54,7 @@ const contextMenuWrapperDraggingHoverStyle = css` const StyledTableRow = styled(TableRow)` .table-container_cell { + ${isSafari && `border-image-slice: 0 !important`}; background: ${(props) => (props.checked || props.isActive) && "#F3F4F4 !important"}; cursor: ${(props) => @@ -77,6 +78,9 @@ const StyledTableRow = styled(TableRow)` border-image-slice: 1; border-image-source: linear-gradient(to right, #ffffff 24px, #eceef1 24px); + border-top: 0; + border-right: 0; + ${(props) => props.checked && rowCheckboxCheckedStyle}; ${(props) => props.dragging && rowCheckboxDraggingStyle}; } @@ -89,6 +93,9 @@ const StyledTableRow = styled(TableRow)` border-image-slice: 1; border-image-source: linear-gradient(to left, #ffffff 24px, #eceef1 24px); + border-top: 0; + border-left: 0; + ${(props) => props.checked && contextMenuWrapperCheckedStyle}; ${(props) => props.dragging && contextMenuWrapperDraggingStyle}; }