fix: add word wrapping for card titles (#637)

* 🐛 Adds text wrapping for long words in the title This fixes issue #657 * 🎨 Adds hidden overflow styling for task items * fix: added word wrapping for cards --------- Co-authored-by: Sekwah <[email protected]>
zidoro · Mar 27, 2024 · a63a21e · a63a21e
1 parent 95dae58
commit a63a21e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/app/renderer/src/routes/Tasks/TaskList.tsx b/app/renderer/src/routes/Tasks/TaskList.tsx
@@ -63,6 +63,7 @@ const TaskList: React.FC<Props> = ({
             {...dragProvided.draggableProps}
             {...dragProvided.dragHandleProps}
             ref={dragProvided.innerRef}
+            style={{ overflow: "hidden" }}
           >
             <Droppable droppableId={listId}>
               {(dropProvided) => (

diff --git a/app/renderer/src/styles/routes/tasks/card.ts b/app/renderer/src/styles/routes/tasks/card.ts
@@ -4,9 +4,12 @@ import { StyledButton, StyledButtonPrimary } from "styles";
 export const StyledCardText = styled.p<{ done?: boolean }>`
   min-height: 2.4rem;
   margin-right: 5px;
+  white-space: pre-wrap;
+  word-break: break-word;
 
   display: flex;
   align-items: center;
+  overflow: hidden;
 
   ${(p) =>
     p.done &&
@@ -56,14 +59,10 @@ export const StyledCardActionWrapper = styled.div`
 
 export const StyledCardEditButton = styled(StyledButton)`
   ${ButtonCardStyles};
-  color: transparent;
-  background-color: transparent;
 `;
 
 export const StyledCardDeleteButton = styled(StyledButton)`
   ${ButtonCardStyles};
-  color: transparent;
-  background-color: transparent;
 
   &:hover {
     color: var(--color-pink) !important;
@@ -98,9 +97,7 @@ export const StyledCard = styled.div<CardProps>`
   border-bottom-color: var(--color-border-input-secondary);
   background-color: var(--color-bg-task-card);
 
-:w  transition:
-    box-shadow 320ms ease-out,
-    background-color 320ms ease-out,
+  transition: box-shadow 320ms ease-out, background-color 320ms ease-out,
     border-color 320ms ease-out;
 
   ${(p) =>

diff --git a/app/renderer/src/styles/routes/tasks/tasks.ts b/app/renderer/src/styles/routes/tasks/tasks.ts
@@ -99,6 +99,9 @@ export const StyledTaskHeading = styled.h3`
   font-weight: 500;
   text-transform: uppercase;
   color: var(--color-heading-text);
+
+  overflow: hidden;
+  overflow-wrap: break-word;
 `;
 
 export const StyledTaskHeadeInput = styled(StyledInput)`