diff --git a/src/components/BoardItem/BoardItem.module.scss b/src/components/BoardItem/BoardItem.module.scss index 1637414..612f4a5 100644 --- a/src/components/BoardItem/BoardItem.module.scss +++ b/src/components/BoardItem/BoardItem.module.scss @@ -7,6 +7,7 @@ cursor: pointer; display: flex; align-items: center; + scroll-snap-align: start; &:hover .iconProject { transform: rotate(1turn); diff --git a/src/components/BoardList/BoardList.module.scss b/src/components/BoardList/BoardList.module.scss index d3dacf0..f1d2563 100644 --- a/src/components/BoardList/BoardList.module.scss +++ b/src/components/BoardList/BoardList.module.scss @@ -8,10 +8,10 @@ width: 100%; margin-top: 40px; margin-bottom: 40px; - overflow-x: auto; - scrollbar-width: thin; + overflow-y: auto; display: flex; flex-direction: column; + scroll-snap-type: y mandatory; @include tablet { max-height: calc(100vh - 655px); @@ -19,4 +19,8 @@ @include desktop { max-height: calc(100vh - 654px); } + + &::-webkit-scrollbar { + width: 0; + } } diff --git a/src/components/Loader/Loader.module.scss b/src/components/Loader/Loader.module.scss index 03e9f46..0149099 100644 --- a/src/components/Loader/Loader.module.scss +++ b/src/components/Loader/Loader.module.scss @@ -7,6 +7,7 @@ position: absolute; left: 50%; top: 50%; + z-index: 2023; .tri { position: absolute; diff --git a/src/components/MainBoard/MainBoard.styled.jsx b/src/components/MainBoard/MainBoard.styled.jsx index f074364..fe81d37 100644 --- a/src/components/MainBoard/MainBoard.styled.jsx +++ b/src/components/MainBoard/MainBoard.styled.jsx @@ -5,7 +5,6 @@ export const Wrapper = styled.div(props => { padding-left: 20px; padding-right: 20px; height: calc(100vh - 61px); - height: calc(100vh - 61px); background-color: ${props.colorbg}; `; const notExpandedStyles = ` @@ -38,7 +37,7 @@ export const Wrapper = styled.div(props => { @media screen and (min-width: 1280px) { width: calc(100vw - 260px); - height: calc(100% - 76px); + height: calc(100% - 68px); padding-left: 24px; padding-right: 24px; background-image: url(${props.imgurl?.desktopUrl_1x}); @@ -102,7 +101,6 @@ export const Wrappers = styled.div` @media screen and (min-width: 1280px) { width: calc(100vw - 260px); - height: calc(100vh - 76px); padding-left: 24px; padding-right: 24px; ${props => diff --git a/src/components/TaskCard/TaskCard.module.scss b/src/components/TaskCard/TaskCard.module.scss index d38a0b2..b6dc58d 100644 --- a/src/components/TaskCard/TaskCard.module.scss +++ b/src/components/TaskCard/TaskCard.module.scss @@ -1,6 +1,7 @@ @import '../../assets/styles/vars'; .cardWrapper { + scroll-snap-align: start; position: relative; padding: 14px 21px; width: 335px; diff --git a/src/components/TaskColumn/TaskColumn.module.scss b/src/components/TaskColumn/TaskColumn.module.scss index ded93c0..c3a73b5 100644 --- a/src/components/TaskColumn/TaskColumn.module.scss +++ b/src/components/TaskColumn/TaskColumn.module.scss @@ -2,8 +2,10 @@ @import '../../assets/styles/mixins'; .taskCardListLight { - margin-bottom: 14px; + margin-bottom: 10px; overflow-y: auto; + overflow-x: hidden; + scroll-snap-type: y mandatory; max-height: calc(100vh - 280px); &::-webkit-scrollbar { @@ -24,7 +26,7 @@ } @include tablet { - max-height: calc(100vh - 290px); + max-height: calc(100vh - 303px); } @include desktop { @@ -34,6 +36,8 @@ .taskCardListDark { margin-bottom: 10px; overflow-y: auto; + overflow-x: hidden; + scroll-snap-type: y mandatory; max-height: calc(100vh - 280px); &::-webkit-scrollbar { @@ -54,7 +58,7 @@ } @include tablet { - max-height: calc(100vh - 290px); + max-height: calc(100vh - 303px); } @include desktop { @@ -64,6 +68,8 @@ .taskCardListColorful { margin-bottom: 10px; overflow-y: auto; + overflow-x: hidden; + scroll-snap-type: y mandatory; max-height: calc(100vh - 280px); &::-webkit-scrollbar { @@ -84,7 +90,7 @@ } @include tablet { - max-height: calc(100vh - 290px); + max-height: calc(100vh - 303px); } @include desktop {