clamp next actionable item text when verbose

avidrucker · Nov 21, 2023 · 4d21e1c · 4d21e1c
1 parent 861b1ee
commit 4d21e1c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/App.css b/src/App.css
@@ -69,3 +69,10 @@
     display: inline-block;
   }
 }
+
+/* courtesy of css-tricks */
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;  
+}
diff --git a/src/App.js b/src/App.js
@@ -446,12 +446,12 @@ function App() {
 
         {tasks.length > 0 && renderList(tasks, activeListOffset, true)}
 
-        <div className="ph3 pb3">
+        <div className="ph3 pb3 o-50">
           <p className="ma0 measure-narrow ml-auto mr-auto lh-copy balance">
             {`You have ${tasks.length} item${tasks.length !== 1 ? 's' : ''} in your list.`}
           </p>
 
-          <p className="ma0 measure-narrow ml-auto mr-auto lh-copy balance">
+          <p className="ma0 measure-narrow ml-auto mr-auto lh-copy balance line-clamp-3 overflow-hidden">
             {(benchmarkItem(tasks) !== null) && `The next actionable item is '${benchmarkItem(tasks).text}'.`}
           </p>
         </div>