fix: timer task preview size

The substring was not changing length so I swapped it for a css based ellipsis
zidoro · Dec 20, 2022 · 5ed1275 · 5ed1275
1 parent a27ede4
commit 5ed1275
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/app/renderer/src/routes/Timer/PriorityCard.tsx b/app/renderer/src/routes/Timer/PriorityCard.tsx
@@ -72,7 +72,7 @@ const PriorityCard: React.FC = () => {
       return "No priority list has been created yet.";
     } else {
       if (priorityCard?.text) {
-        return priorityCard?.text.truncate(34);
+        return priorityCard?.text;
       }
       return "No task item on your priority list.";
     }
@@ -86,7 +86,7 @@ const PriorityCard: React.FC = () => {
         return "Add at least one item on your priority list.";
       } else {
         if (priorityCard?.description) {
-          return priorityCard?.description.truncate(43);
+          return priorityCard?.description;
         }
         return "";
       }

diff --git a/app/renderer/src/styles/routes/timer/counter.ts b/app/renderer/src/styles/routes/timer/counter.ts
@@ -45,7 +45,6 @@ type CounterContainerProps = {
 
 export const StyledCounterContainer = styled.div<CounterContainerProps>`
   width: 100%;
-  height: 100%;
 
   flex: 1 1;
 

diff --git a/app/renderer/src/styles/routes/timer/timer.ts b/app/renderer/src/styles/routes/timer/timer.ts
@@ -9,7 +9,8 @@ export const StyledTimer = styled.main`
 
   padding-top: 1.2rem;
 
-  display: grid;
+  display: flex;
+  flex-direction: column;
   grid-template-rows: 1fr;
   align-items: end;
 
@@ -37,7 +38,6 @@ export const StyledTimer = styled.main`
 export const StyledPriorityCardContainer = styled.div`
   width: 100%;
   height: 5.6rem;
-
   padding: 0 1.6rem;
 `;
 
@@ -90,14 +90,23 @@ export const StyledPriorityCardWrapper = styled.div`
   background-color: var(--color-bg-secondary);
 `;
 
-export const StyledPriorityCardHeader = styled.header``;
+export const StyledPriorityCardHeader = styled.header`
+  width: 100%;
+`;
 
 export const StyledPriorityCardHeading = styled.h4`
+  padding-right: 1.6rem;
   font-size: 1.5rem;
   font-weight: 500;
   color: var(--color-heading-text);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 `;
 
 export const StyledPriorityCardDescription = styled.p`
   color: var(--color-body-text);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 `;