fix(graphql): minor fixes

https://github.com/martis-git/learn-frontend/issues/279

Author: azinit

examples/graphql/src/app/index.scss

@@ -1,5 +1,5 @@
 // FIXME: specify imported modules (need only some utils-classes)
-@import '~bootstrap/dist/css/bootstrap.css';
+// FIXME: remove later @import '~bootstrap/scss/_utilities.scss';
 
 // vars
 .app {
@@ -48,6 +48,15 @@ body,
   .text-muted {
     color: gray;
   }
+  .text-center {
+    text-align: center;
+  }
+  .position-relative {
+    position: relative;
+  }
+  .pt-1 {
+    padding-top: 10px;
+  }
   .loading--overlay {
     padding-top: 10px;
     width: 100%;

examples/graphql/src/shared/components/task-item/index.tsx

@@ -12,8 +12,14 @@ const TaskItem = (props: Props) => {
 
     return (
         <Card className={cn("task-item", { completed })}>
-            <a className="task-item__title" href={`/${id}`}>{title}</a>
-            <span className="task-item__author" >
+            <a
+                className="task-item__title"
+                href={`/${id}`}
+                title={`Author: ${user.username}\nTitle: ${title}\nCompleted: ${completed}`}
+            >
+                {title}
+            </a>
+            <span className="task-item__author">
                 <UserOutlined />
                 {user?.username}
             </span>