Merge pull request #63 from 001elijah/bugfix-title-length

Bugfix title length
001elijah · Jun 29, 2023 · 38d2d03 · 38d2d03
2 parents 335b05a + 966d457
commit 38d2d03
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 3 deletions.
diff --git a/src/components/BoardItem/BoardItem.module.scss b/src/components/BoardItem/BoardItem.module.scss
@@ -54,6 +54,9 @@
   color: #ffffff80;
 
   width: 135px;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 

diff --git a/src/components/HeaderDashBoard/HeaderDashBoard.module.scss b/src/components/HeaderDashBoard/HeaderDashBoard.module.scss
@@ -20,6 +20,12 @@
   line-height: 27px;
   letter-spacing: -0.02em;
 
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
   &.dark {
     color: $white-color;
   }

diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss
@@ -12,6 +12,12 @@
   margin-bottom: 24px;
   // margin-top: 24px;
 
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
   &.dark {
     color: $white-text-color;
   }

diff --git a/src/components/ModalChangeColumn/ModalChangeColumn.jsx b/src/components/ModalChangeColumn/ModalChangeColumn.jsx
@@ -28,7 +28,7 @@ export const ModalChangeColumn = ({ closeModal, columnId, cardId }) => {
               }}
               type="button"
             >
-              {title}
+             <span className={s.title}> {title}</span>
               <svg
                 className={clsx(s.icon, s[theme], id === columnId && s.current)}
               >

diff --git a/src/components/ModalChangeColumn/ModalChangeColumn.module.scss b/src/components/ModalChangeColumn/ModalChangeColumn.module.scss
@@ -1,7 +1,7 @@
 @import '../../assets/styles/vars';
 
 .modalWrapper {
-  max-width: max-content;
+  max-width: 350px;
   min-height: 86px;
   padding: 18px;
   border-radius: 8px;
@@ -57,10 +57,21 @@
   }
 }
 
+.title {
+  text-align: left;
+
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .icon {
   width: 16px;
   height: 16px;
   margin-left: 8px;
+  flex-shrink: 0;
   stroke: $black-text-color;
 
   &.current {

diff --git a/src/components/ModalFilter/Modal.module.scss b/src/components/ModalFilter/Modal.module.scss
@@ -172,7 +172,10 @@
 }
 .InputField {
   &[id='without']::before {
-    background-color: #ffffff4d;
+    background-color: $priority-without-color;
+  }
+  &[id='without'].dark::before {
+    background-color: $priority-without-dark-theme-color;
   }
   &[id='low']::before {
     background-color: $priority-low-color;

diff --git a/src/components/TaskCard/TaskCard.module.scss b/src/components/TaskCard/TaskCard.module.scss
@@ -44,6 +44,9 @@
   line-height: 1.5;
   color: $black-text-color;
 
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 

diff --git a/src/components/TasksColumnHeader/TasksColumnHeader.module.scss b/src/components/TasksColumnHeader/TasksColumnHeader.module.scss
@@ -17,11 +17,18 @@
 }
 
 .title {
+  margin-right: 10px;
   font-weight: 500;
   font-size: 14px;
   line-height: 1.5;
   color: $black-text-color;
 
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
   &.dark {
     color: $white-color;
   }