From f89cfe08583fba4dcc00680b81a4968dc4e3375e Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Thu, 21 Dec 2023 22:14:15 +0000
Subject: [PATCH] Add and integrate controls story

---
 src/components/Task.jsx         |  1 +
 src/components/Task.stories.jsx | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/src/components/Task.jsx b/src/components/Task.jsx
index ea88e84a..a02c9960 100644
--- a/src/components/Task.jsx
+++ b/src/components/Task.jsx
@@ -30,6 +30,7 @@ export default function Task({
           readOnly={true}
           name="title"
           placeholder="Input title"
+          style={{ textOverflow: "ellipsis" }}
         />
       </label>
 
diff --git a/src/components/Task.stories.jsx b/src/components/Task.stories.jsx
index 0e3c3493..99745366 100644
--- a/src/components/Task.stories.jsx
+++ b/src/components/Task.stories.jsx
@@ -33,3 +33,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,
+    },
+  },
+};