Add and integrate controls story

Author: jonniebigodes

src/components/Task.stories.js

@@ -46,3 +46,14 @@ export const Archived = {
     },
   },
 };
+
+const longTitleString = `This task's name is absurdly large. In fact, I think if I keep going I might end up with content overflow. What will happen? The star that represents a pinned task could have text overlapping. The text could cut-off abruptly when it reaches the star. I hope not!`;
+
+export const LongTitle = {
+  args: {
+    task: {
+      ...Default.args.task,
+      title: longTitleString,
+    },
+  },
+};

src/components/Task.vue

@@ -18,6 +18,7 @@
         :id="'title-' + task.id"
         name="title"
         placeholder="Input title"
+        style="text-overflow: ellipsis"
       />
     </label>
     <button