Improve timer view styling

src/css/popup.scss

@@ -27,6 +27,7 @@ html {
         font-weight: normal;
         line-height: 1.5;
         margin-top: 1rem;
+        margin-bottom: 3rem;
       }
 
       .text-red {
@@ -108,14 +109,20 @@ html {
           margin-top: 3rem;
 
           h2 {
+            margin-top: 2rem;
             max-height: 90px;
             overflow: hidden;
           }
 
           p {
-            margin-top: 0;
+            margin-top: 1rem;
             margin-bottom: 1rem;
-            max-height: 16px;
+            line-height: 1.2rem;
+          }
+
+          span.moco-bx-single-line {
+            display: inline-block;
+            max-height: 19px;
             overflow: hidden;
           }
 

src/js/components/App/TimerView.js

@@ -11,11 +11,13 @@ export default function TimerView({ timedActivity, onStopTimer }) {
 
   return (
     <div className="moco-bx-timer-view">
-      <p className="text-secondary" style={{ marginBottom: "0.5rem" }}>
-        {timedActivity.customer_name}
+      <p>
+        <span className="moco-bx-single-line text-secondary">{timedActivity.customer_name}</span>
+        <br />
+        <span className="moco-bx-single-line">{timedActivity.assignment_name}</span>
+        <br />
+        <span className="moco-bx-single-line">{timedActivity.task_name}</span>
       </p>
-      <p>{timedActivity.assignment_name}</p>
-      <p>{timedActivity.task_name}</p>
       <h2>{timedActivity.description}</h2>
       <Timer
         className="timer text-red"