From 920cd9c18fc4c41e6229a1b3a1696c46c3a14487 Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Thu, 29 Aug 2024 13:28:22 -0400
Subject: [PATCH 01/10] add background color to handle transparent avatars

---
 src/components/avatar/Avatar.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/avatar/Avatar.tsx b/src/components/avatar/Avatar.tsx
index c8cfa400..0793b0c2 100644
--- a/src/components/avatar/Avatar.tsx
+++ b/src/components/avatar/Avatar.tsx
@@ -31,6 +31,7 @@ export default function Avatar({
         }
         width={width}
         height={height}
+        className="bg-base-200"
       />
     </div>
   );

From f67d6f5fbe97db8c681a8c2ae785c2212025ac96 Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Thu, 29 Aug 2024 13:40:08 -0400
Subject: [PATCH 02/10] add test

---
 src/components/avatar/Avatar.test.tsx | 23 +++++++++++++++++------
 src/components/avatar/Avatar.tsx      |  2 +-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/avatar/Avatar.test.tsx b/src/components/avatar/Avatar.test.tsx
index f2cb515c..c6207316 100644
--- a/src/components/avatar/Avatar.test.tsx
+++ b/src/components/avatar/Avatar.test.tsx
@@ -1,11 +1,11 @@
 import { render, screen } from "@testing-library/react";
 import Avatar from "@/components/avatar/Avatar";
 
+const imageUrl =
+  "https://gravatar.com/avatar/c8cf6521c193fc743c7fadcd8be04e983724764efa65b3c3913b6d22f086a11f?s=200&r=g&d=robohash";
+
 describe("Avatar Component", () => {
   it("renders image correctly", () => {
-    const imageUrl =
-      "https://gravatar.com/avatar/c8cf6521c193fc743c7fadcd8be04e983724764efa65b3c3913b6d22f086a11f?s=200&r=g&d=robohash";
-
     render(<Avatar width={24} height={24} image={imageUrl} />);
 
     const image = screen.getByRole("img", { name: /avatar/i });
@@ -14,9 +14,6 @@ describe("Avatar Component", () => {
   });
 
   it("should have correct image url", () => {
-    const imageUrl =
-      "https://gravatar.com/avatar/c8cf6521c193fc743c7fadcd8be04e983724764efa65b3c3913b6d22f086a11f?s=200&r=g&d=robohash";
-
     render(<Avatar width={24} height={24} image={imageUrl} />);
 
     const image: HTMLImageElement = screen.getByRole("img", {
@@ -25,4 +22,18 @@ describe("Avatar Component", () => {
 
     expect(image.src).toContain(encodeURIComponent(`${imageUrl}&v=1.2`));
   });
+
+  it("handles transparent avatars", () => {
+    render(<Avatar width={24} height={24} image={imageUrl} />);
+
+    const image: HTMLImageElement = screen.getByRole("img", {
+      name: /avatar/i,
+    });
+
+    const hasBgClass = Array.from(image.classList).some((className) =>
+      /^bg-.+/.test(className),
+    );
+
+    expect(hasBgClass).toBe(true);
+  });
 });
diff --git a/src/components/avatar/Avatar.tsx b/src/components/avatar/Avatar.tsx
index 0793b0c2..9987c05e 100644
--- a/src/components/avatar/Avatar.tsx
+++ b/src/components/avatar/Avatar.tsx
@@ -31,7 +31,7 @@ export default function Avatar({
         }
         width={width}
         height={height}
-        className="bg-base-200"
+        className={cn("bg-base-200")}
       />
     </div>
   );

From 891ad1e9c4c753688360329feb9b96b1aeea79f0 Mon Sep 17 00:00:00 2001
From: Jane Moroz <Moroz.jane@yahoo.com>
Date: Wed, 18 Sep 2024 12:24:19 +0300
Subject: [PATCH 03/10] fix: fix padding issues + update widget title font size

---
 .../components/voyage-dashboard/DashboardWidget.tsx    | 10 +++++-----
 .../voyage-dashboard/FeaturesStateContent.tsx          |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/DashboardWidget.tsx b/src/app/(main)/dashboard/components/voyage-dashboard/DashboardWidget.tsx
index b9fc70f8..c5e8b01a 100644
--- a/src/app/(main)/dashboard/components/voyage-dashboard/DashboardWidget.tsx
+++ b/src/app/(main)/dashboard/components/voyage-dashboard/DashboardWidget.tsx
@@ -50,18 +50,18 @@ function DashboardWidget({
       >
         <div className="inline-flex max-w-[100px] items-start text-neutral-focus">
           <p
-            className={`relative inline-block text-[13px] font-semibold ${
+            className={`relative inline-block font-semibold ${
               isWidgetClickable
                 ? "cursor-pointer text-primary"
                 : "text-neutral-focus"
             }`}
           >
             {headerTitle}
-            {isWidgetClickable ? (
-              <div className="absolute right-[-15px] top-[4px]">
-                <ChevronDoubleRightIcon className="ml-1 w-3" />
+            {isWidgetClickable && (
+              <div className="absolute right-0 top-[50%] -translate-y-[45%] translate-x-[110%]">
+                <ChevronDoubleRightIcon className="h-3 w-3" />
               </div>
-            ) : null}
+            )}
           </p>
         </div>
 
diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/FeaturesStateContent.tsx b/src/app/(main)/dashboard/components/voyage-dashboard/FeaturesStateContent.tsx
index d6cb4ec0..e0050724 100644
--- a/src/app/(main)/dashboard/components/voyage-dashboard/FeaturesStateContent.tsx
+++ b/src/app/(main)/dashboard/components/voyage-dashboard/FeaturesStateContent.tsx
@@ -5,14 +5,14 @@ interface FeaturesStateContentProps {
 }
 function FeaturesStateContent({ contentObject }: FeaturesStateContentProps) {
   return (
-    <div className="mt-4 flex h-full flex-col justify-center">
-      <div className="flex max-h-[200px] w-full flex-col overflow-auto pr-3">
+    <div className="mt-4 flex h-full flex-col justify-start">
+      <div className="flex max-h-[200px] w-full flex-col gap-y-3 overflow-auto pr-3">
         {contentObject?.map((item) => (
           <div
             key={item}
-            className="mb-3 flex h-[35px] items-center truncate rounded-lg bg-base-200 px-3 py-2"
+            className="flex items-center rounded-lg bg-base-200 px-3 py-2"
           >
-            <p className="w-40 truncate max-[1469px]:w-[300px] max-[1200px]:w-full">
+            <p className="w-40 font-semibold max-[1469px]:w-[300px] max-[1200px]:w-full">
               {item}
             </p>
           </div>

From 9d040b9d933952190ad5aee3ac238f2d6e498d19 Mon Sep 17 00:00:00 2001
From: Jane Moroz <Moroz.jane@yahoo.com>
Date: Wed, 18 Sep 2024 12:27:28 +0300
Subject: [PATCH 04/10] fix: lint

---
 .../dashboard/components/voyage-dashboard/DashboardWidget.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/DashboardWidget.tsx b/src/app/(main)/dashboard/components/voyage-dashboard/DashboardWidget.tsx
index c5e8b01a..ecdbee52 100644
--- a/src/app/(main)/dashboard/components/voyage-dashboard/DashboardWidget.tsx
+++ b/src/app/(main)/dashboard/components/voyage-dashboard/DashboardWidget.tsx
@@ -58,7 +58,7 @@ function DashboardWidget({
           >
             {headerTitle}
             {isWidgetClickable && (
-              <div className="absolute right-0 top-[50%] -translate-y-[45%] translate-x-[110%]">
+              <div className="absolute right-0 top-1/2 translate-x-[110%] translate-y-[-45%]">
                 <ChevronDoubleRightIcon className="h-3 w-3" />
               </div>
             )}

From dd6d1bf18a059f130689665ba03c6105135a5119 Mon Sep 17 00:00:00 2001
From: Jane Moroz <Moroz.jane@yahoo.com>
Date: Wed, 18 Sep 2024 18:05:18 +0300
Subject: [PATCH 05/10] feat: add tooltip to avatar groups in techStack and
 Ideation votes

---
 .../[teamId]/ideation/components/VoteCard.tsx | 30 ++++++++++++----
 .../tech-stack/components/TechStackCard.tsx   | 36 ++++++++++++++++---
 src/components/Tooltip.tsx                    | 10 +++++-
 src/components/avatar/Avatar.tsx              |  8 ++++-
 4 files changed, 71 insertions(+), 13 deletions(-)

diff --git a/src/app/(main)/my-voyage/[teamId]/ideation/components/VoteCard.tsx b/src/app/(main)/my-voyage/[teamId]/ideation/components/VoteCard.tsx
index 042aa0ff..f30072f5 100644
--- a/src/app/(main)/my-voyage/[teamId]/ideation/components/VoteCard.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/ideation/components/VoteCard.tsx
@@ -17,6 +17,7 @@ import {
 import { onOpenModal } from "@/store/features/modal/modalSlice";
 import AvatarGroup from "@/components/avatar/AvatarGroup";
 import Avatar from "@/components/avatar/Avatar";
+import Tooltip from "@/components/Tooltip";
 
 interface VoteCardProps {
   projectIdeaId: number;
@@ -33,6 +34,7 @@ function VoteCard({ projectIdeaId, users, className }: VoteCardProps) {
   const { isOpen } = useModal();
   const dispatch = useAppDispatch();
   const [voteChanged, setVoteChanged] = useState<boolean>(false);
+  const [tooltipHovered, setTooltipHovered] = useState<string>("");
 
   const {
     runAction: addIdeationVoteAction,
@@ -131,12 +133,28 @@ function VoteCard({ projectIdeaId, users, className }: VoteCardProps) {
         }`}</h2>
         <AvatarGroup>
           {users.map((user) => (
-            <Avatar
-              width={24}
-              height={24}
-              key={user.id}
-              image={user.votedBy.member.avatar}
-            />
+            <Tooltip
+              key={user.votedBy.member.id}
+              content={`${user.votedBy.member.firstName}`}
+              customClassName="bg-base-200 after:border-base-200 text-xs font-medium w-fit"
+              position="bottom"
+              tooltipWidth="small"
+              isDisplay={tooltipHovered === user.votedBy.member.id}
+              hovered={tooltipHovered === user.votedBy.member.id}
+            >
+              <Avatar
+                customClassName="border border-base-content"
+                width={24}
+                height={24}
+                image={user.votedBy.member.avatar}
+                onMouseEnter={() => {
+                  setTooltipHovered(user.votedBy.member.id);
+                }}
+                onMouseLeave={() => {
+                  setTooltipHovered("");
+                }}
+              />
+            </Tooltip>
           ))}
         </AvatarGroup>
         <Button
diff --git a/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackCard.tsx b/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackCard.tsx
index 08023783..3c96b9ca 100644
--- a/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackCard.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackCard.tsx
@@ -25,6 +25,7 @@ import { onOpenModal } from "@/store/features/modal/modalSlice";
 import Spinner from "@/components/Spinner";
 import { getCurrentVoyageTeam } from "@/utils/getCurrentVoyageTeam";
 import { validateTextInput } from "@/utils/form/validateInput";
+import Tooltip from "@/components/Tooltip";
 
 interface TechStackCardProps {
   title: string;
@@ -52,6 +53,8 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
   const [isInput, setIsInput] = useState(false);
   const [editItemId, setEditItemId] = useState(-1);
   const [isDuplicate, setIsDuplicate] = useState(false);
+  const [tooltipHovered, setTooltipHovered] = useState<string>("");
+
   const inputRef = useRef<HTMLFormElement>(null);
   const editRef = useRef<HTMLFormElement>(null);
   const items = data.map((item) => item.name.toLowerCase());
@@ -269,12 +272,35 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
                     <div className="col-span-2 ml-8 bg-base-200">
                       <AvatarGroup>
                         {element.teamTechStackItemVotes.map((vote) => (
-                          <Avatar
+                          <Tooltip
                             key={vote.votedBy.member.id}
-                            image={vote.votedBy.member.avatar}
-                            width={24}
-                            height={24}
-                          />
+                            content={`${vote.votedBy.member.firstName}`}
+                            customClassName="bg-base-100 after:border-100 text-xs font-medium w-fit"
+                            position="bottom"
+                            tooltipWidth="small"
+                            isDisplay={
+                              tooltipHovered ===
+                              element.id + vote.votedBy.member.id
+                            }
+                            hovered={
+                              tooltipHovered ===
+                              element.id + vote.votedBy.member.id
+                            }
+                          >
+                            <Avatar
+                              image={vote.votedBy.member.avatar}
+                              width={24}
+                              height={24}
+                              onMouseEnter={() => {
+                                setTooltipHovered(
+                                  element.id + vote.votedBy.member.id,
+                                );
+                              }}
+                              onMouseLeave={() => {
+                                setTooltipHovered("");
+                              }}
+                            />
+                          </Tooltip>
                         ))}
                       </AvatarGroup>
                     </div>
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 5dc89ed7..9931da77 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -14,6 +14,7 @@ export interface TooltipProps {
   tooltipWidth: TooltipWidth;
   isDisplay: boolean;
   hovered: boolean;
+  customClassName?: string;
 }
 
 export default function Tooltip({
@@ -24,6 +25,7 @@ export default function Tooltip({
   tooltipWidth,
   isDisplay,
   hovered,
+  customClassName,
 }: TooltipProps) {
   let nonSupportTextWidth;
 
@@ -56,9 +58,15 @@ export default function Tooltip({
             "left-full top-1/2 translate-x-3 after:right-full after:border-l-transparent",
           position === "left" &&
             "right-full top-1/2 -translate-x-3 after:left-full after:border-r-transparent",
+          customClassName,
         )}
       >
-        <div className={`${supportText && "mb-2"}`}>{content}</div>
+        <div
+          className={`${supportText && "mb-2"}`}
+          style={{ textWrap: "nowrap" }}
+        >
+          {content}
+        </div>
         {supportText && <div>{supportText}</div>}
       </div>
     </div>
diff --git a/src/components/avatar/Avatar.tsx b/src/components/avatar/Avatar.tsx
index 9987c05e..4adb0b0c 100644
--- a/src/components/avatar/Avatar.tsx
+++ b/src/components/avatar/Avatar.tsx
@@ -7,6 +7,8 @@ interface AvatarProps {
   customClassName?: string;
   width: number;
   height: number;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
 }
 
 export default function Avatar({
@@ -14,13 +16,17 @@ export default function Avatar({
   customClassName,
   width = 24,
   height = 24,
+  onMouseEnter,
+  onMouseLeave,
 }: AvatarProps) {
   return (
     <div
       className={cn(
-        "shrink-1 cursor-pointer overflow-hidden rounded-full border border-neutral px-0",
+        "shrink-1 cursor-pointer overflow-hidden rounded-full px-0",
         customClassName,
       )}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
     >
       <Image
         alt="avatar"

From 8bb7562817c09092fe6e1728e4e396b982464713 Mon Sep 17 00:00:00 2001
From: JaneMoroz <moroz.jane@yahoo.com>
Date: Fri, 20 Sep 2024 22:46:30 +0300
Subject: [PATCH 06/10] fix: update colors

---
 .../[teamId]/ideation/components/VoteCard.tsx        |  4 ++--
 .../[teamId]/tech-stack/components/TechStackCard.tsx | 12 ++++++------
 src/components/Tooltip.tsx                           |  4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/app/(main)/my-voyage/[teamId]/ideation/components/VoteCard.tsx b/src/app/(main)/my-voyage/[teamId]/ideation/components/VoteCard.tsx
index f30072f5..5bcd57c6 100644
--- a/src/app/(main)/my-voyage/[teamId]/ideation/components/VoteCard.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/ideation/components/VoteCard.tsx
@@ -126,7 +126,7 @@ function VoteCard({ projectIdeaId, users, className }: VoteCardProps) {
 
   return (
     <div className={cn("w-[200px] rounded-lg bg-base-100", className)}>
-      <section className="flex flex-col items-start gap-y-4 p-4">
+      <section className="flex flex-col items-start p-4 gap-y-4">
         <h1 className="text-3xl font-semibold text-base-300">{users.length}</h1>
         <h2 className="text-xl font-semibold text-base-300">{`Vote${
           users.length > 1 ? "s" : ""
@@ -136,7 +136,7 @@ function VoteCard({ projectIdeaId, users, className }: VoteCardProps) {
             <Tooltip
               key={user.votedBy.member.id}
               content={`${user.votedBy.member.firstName}`}
-              customClassName="bg-base-200 after:border-base-200 text-xs font-medium w-fit"
+              customClassName="text-xs font-medium w-fit"
               position="bottom"
               tooltipWidth="small"
               isDisplay={tooltipHovered === user.votedBy.member.id}
diff --git a/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackCard.tsx b/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackCard.tsx
index 3c96b9ca..9e113103 100644
--- a/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackCard.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackCard.tsx
@@ -233,7 +233,7 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
         </span>
       </div>
       {/**TODO Refactor this beast into smaller more module pieces. */}
-      <div className="mt-6 h-40 overflow-y-auto p-1">
+      <div className="h-40 p-1 mt-6 overflow-y-auto">
         <ul className="text-base-300">
           {data.map((element) => {
             const voteIsSubmitted = element.teamTechStackItemVotes.find(
@@ -241,13 +241,13 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
             );
             return (
               <li
-                className="relative mb-8 mr-2 grid grid-cols-6 items-center text-base"
+                className="relative grid items-center grid-cols-6 mb-8 mr-2 text-base"
                 key={element.id}
               >
                 {editItemId === element.id ? (
                   <form
                     onSubmit={handleSubmitEdit(() => handleEdit(element.id))}
-                    className="col-span-6 -my-2 h-12"
+                    className="h-12 col-span-6 -my-2"
                     ref={editRef}
                   >
                     <TextInput
@@ -275,7 +275,7 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
                           <Tooltip
                             key={vote.votedBy.member.id}
                             content={`${vote.votedBy.member.firstName}`}
-                            customClassName="bg-base-100 after:border-100 text-xs font-medium w-fit"
+                            customClassName="text-xs font-medium w-fit"
                             position="bottom"
                             tooltipWidth="small"
                             isDisplay={
@@ -308,7 +308,7 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
                     {voteIsSubmitted ? (
                       <div className="relative col-span-2 flex w-[180px] items-center justify-end">
                         {element.teamTechStackItemVotes.length < 2 && (
-                          <div className="h-1/6 w-1/6">
+                          <div className="w-1/6 h-1/6">
                             <EllipsisVerticalIcon
                               className="mr-2 rounded-xl hover:cursor-pointer hover:bg-base-100"
                               onClick={() => setOpenMenuId(element.id)}
@@ -352,7 +352,7 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
         <div className="px-3.5 py-2.5">
           <Button
             variant="outline"
-            className="w-full justify-center border-2"
+            className="justify-center w-full border-2"
             onClick={toggleAddItemInput}
           >
             Add Tech Stack
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 9931da77..d4b8814a 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -42,11 +42,11 @@ export default function Tooltip({
       {children}
       <div
         className={cn(
-          "absolute z-[2] break-all shadow-md transition duration-300 ease-in-out",
+          "absolute z-[2] break-all shadow-lg transition duration-300 ease-in-out",
           supportText ? "text-left" : "text-center",
           (!hovered || !isDisplay) && "hidden",
           supportText ? "w-[320px]" : nonSupportTextWidth,
-          "rounded-lg bg-base-100 px-3 py-2 text-base-300 after:absolute after:border-8 after:border-solid after:border-base-100 after:content-['']",
+          "rounded-lg bg-base-200 px-3 py-2 text-base-300 after:absolute after:border-8 after:border-solid after:border-base-200 after:content-['']",
           position === "top" || position === "bottom"
             ? "-translate-x-1/2 after:left-1/2 after:-translate-x-1/2 after:border-x-transparent"
             : "-translate-y-1/2 after:top-1/2 after:-translate-y-1/2 after:border-y-transparent",

From f5f967fb136f6edae7a11d9a112a4fdd5485afab Mon Sep 17 00:00:00 2001
From: JaneMoroz <moroz.jane@yahoo.com>
Date: Fri, 20 Sep 2024 22:47:50 +0300
Subject: [PATCH 07/10] fix: prettier

---
 .../[teamId]/ideation/components/VoteCard.tsx          |  2 +-
 .../[teamId]/tech-stack/components/TechStackCard.tsx   | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/(main)/my-voyage/[teamId]/ideation/components/VoteCard.tsx b/src/app/(main)/my-voyage/[teamId]/ideation/components/VoteCard.tsx
index 5bcd57c6..2c83f0ef 100644
--- a/src/app/(main)/my-voyage/[teamId]/ideation/components/VoteCard.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/ideation/components/VoteCard.tsx
@@ -126,7 +126,7 @@ function VoteCard({ projectIdeaId, users, className }: VoteCardProps) {
 
   return (
     <div className={cn("w-[200px] rounded-lg bg-base-100", className)}>
-      <section className="flex flex-col items-start p-4 gap-y-4">
+      <section className="flex flex-col items-start gap-y-4 p-4">
         <h1 className="text-3xl font-semibold text-base-300">{users.length}</h1>
         <h2 className="text-xl font-semibold text-base-300">{`Vote${
           users.length > 1 ? "s" : ""
diff --git a/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackCard.tsx b/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackCard.tsx
index 9e113103..6457d6f7 100644
--- a/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackCard.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackCard.tsx
@@ -233,7 +233,7 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
         </span>
       </div>
       {/**TODO Refactor this beast into smaller more module pieces. */}
-      <div className="h-40 p-1 mt-6 overflow-y-auto">
+      <div className="mt-6 h-40 overflow-y-auto p-1">
         <ul className="text-base-300">
           {data.map((element) => {
             const voteIsSubmitted = element.teamTechStackItemVotes.find(
@@ -241,13 +241,13 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
             );
             return (
               <li
-                className="relative grid items-center grid-cols-6 mb-8 mr-2 text-base"
+                className="relative mb-8 mr-2 grid grid-cols-6 items-center text-base"
                 key={element.id}
               >
                 {editItemId === element.id ? (
                   <form
                     onSubmit={handleSubmitEdit(() => handleEdit(element.id))}
-                    className="h-12 col-span-6 -my-2"
+                    className="col-span-6 -my-2 h-12"
                     ref={editRef}
                   >
                     <TextInput
@@ -308,7 +308,7 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
                     {voteIsSubmitted ? (
                       <div className="relative col-span-2 flex w-[180px] items-center justify-end">
                         {element.teamTechStackItemVotes.length < 2 && (
-                          <div className="w-1/6 h-1/6">
+                          <div className="h-1/6 w-1/6">
                             <EllipsisVerticalIcon
                               className="mr-2 rounded-xl hover:cursor-pointer hover:bg-base-100"
                               onClick={() => setOpenMenuId(element.id)}
@@ -352,7 +352,7 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
         <div className="px-3.5 py-2.5">
           <Button
             variant="outline"
-            className="justify-center w-full border-2"
+            className="w-full justify-center border-2"
             onClick={toggleAddItemInput}
           >
             Add Tech Stack

From 914cc22447e442a2e1c880bb59a1acb537b5911f Mon Sep 17 00:00:00 2001
From: JaneMoroz <moroz.jane@yahoo.com>
Date: Fri, 20 Sep 2024 23:24:37 +0300
Subject: [PATCH 08/10] fix: fix width

---
 .../components/voyage-dashboard/FeaturesStateContent.tsx  | 4 +---
 .../[teamId]/sprints/components/forms/MeetingForm.tsx     | 8 ++++----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/FeaturesStateContent.tsx b/src/app/(main)/dashboard/components/voyage-dashboard/FeaturesStateContent.tsx
index e0050724..af8d2d74 100644
--- a/src/app/(main)/dashboard/components/voyage-dashboard/FeaturesStateContent.tsx
+++ b/src/app/(main)/dashboard/components/voyage-dashboard/FeaturesStateContent.tsx
@@ -12,9 +12,7 @@ function FeaturesStateContent({ contentObject }: FeaturesStateContentProps) {
             key={item}
             className="flex items-center rounded-lg bg-base-200 px-3 py-2"
           >
-            <p className="w-40 font-semibold max-[1469px]:w-[300px] max-[1200px]:w-full">
-              {item}
-            </p>
+            <p className="w-full break-words font-semibold">{item}</p>
           </div>
         ))}
       </div>
diff --git a/src/app/(main)/my-voyage/[teamId]/sprints/components/forms/MeetingForm.tsx b/src/app/(main)/my-voyage/[teamId]/sprints/components/forms/MeetingForm.tsx
index b6329a69..4b7e300c 100644
--- a/src/app/(main)/my-voyage/[teamId]/sprints/components/forms/MeetingForm.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/sprints/components/forms/MeetingForm.tsx
@@ -120,10 +120,10 @@ export default function MeetingForm() {
       data.meetingLink === ""
         ? { description: data.description, title: data.title }
         : {
-          description: data.description,
-          title: data.title,
-          meetingLink: data.meetingLink,
-        };
+            description: data.description,
+            title: data.title,
+            meetingLink: data.meetingLink,
+          };
 
     if (editMode) {
       const [res, error] = await editMeetingAction({

From 4655623b09ad680e07fe907b9964b57e81f9743b Mon Sep 17 00:00:00 2001
From: JaneMoroz <moroz.jane@yahoo.com>
Date: Fri, 20 Sep 2024 23:27:42 +0300
Subject: [PATCH 09/10] fix: lint

---
 .../[teamId]/sprints/components/forms/MeetingForm.tsx     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/(main)/my-voyage/[teamId]/sprints/components/forms/MeetingForm.tsx b/src/app/(main)/my-voyage/[teamId]/sprints/components/forms/MeetingForm.tsx
index 4b7e300c..b6329a69 100644
--- a/src/app/(main)/my-voyage/[teamId]/sprints/components/forms/MeetingForm.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/sprints/components/forms/MeetingForm.tsx
@@ -120,10 +120,10 @@ export default function MeetingForm() {
       data.meetingLink === ""
         ? { description: data.description, title: data.title }
         : {
-            description: data.description,
-            title: data.title,
-            meetingLink: data.meetingLink,
-          };
+          description: data.description,
+          title: data.title,
+          meetingLink: data.meetingLink,
+        };
 
     if (editMode) {
       const [res, error] = await editMeetingAction({

From 4b89a5193b46e5debbdfa692f7ca679c0cb7a4da Mon Sep 17 00:00:00 2001
From: Daniel Ko <danko56666@gmail.com>
Date: Sun, 6 Oct 2024 14:55:41 -0400
Subject: [PATCH 10/10] Update CHANGELOG.md

---
 CHANGELOG.md | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1d976ad0..7c61690a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,8 +5,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/).
 
+## [0.1.1] - 2024-10-06
 
-## [1.0.0-alpha.6] - 2024-09-27
+### Added
+- Added tooltips over avatars https://github.com/chingu-x/chingu-dashboard/issues/221
+
+### Fixed
+- Fixed text truncation and spacing issues in features widget on dashboard page https://github.com/chingu-x/chingu-dashboard/issues/256
+
+## [0.1.0-alpha.6] - 2024-09-27
 
 ### Added
 - Added po and sm forms for the weekly checkin for the appropriate teams https://github.com/chingu-x/chingu-dashboard/issues/216
@@ -18,7 +25,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 
 ### Fixed
 
-## [1.0.0-alpha.5] - 2024-09-19
+## [0.1.0-alpha.5] - 2024-09-19
 
 ### Added
 
@@ -26,7 +33,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 ### Changed
 - Made meeting link optional https://github.com/chingu-x/chingu-dashboard/issues/237
 
-## [1.0.0-alpha.4] - 2024-09-10
+## [0.1.0-alpha.4] - 2024-09-10
 
 ### Added
 
@@ -40,7 +47,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 - Fixed issue with meeting notes section becoming scrollable instead of expanding when saved https://github.com/chingu-x/chingu-dashboard/issues/248
 
 
-## [1.0.0-alpha.3] - 2024-09-05
+## [0.1.0-alpha.3] - 2024-09-05
 
 ### Added
 - Added 404 page https://github.com/chingu-x/chingu-dashboard/issues/205
@@ -55,7 +62,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 - Fixed overflow issue with features description in the list https://github.com/chingu-x/chingu-dashboard/issues/222
 - Fixed an issue with selecting team members in checkboxes https://github.com/chingu-x/chingu-dashboard/issues/230
 
-## [1.0.0-alpha.2] - 2024-08-28
+## [0.1.0-alpha.2] - 2024-08-28
 
 ### Added
 - Added version to image in avatar component
@@ -64,7 +71,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 
 ### Fixed
 
-## [1.0.0-alpha.1] - 2024-08-26
+## [0.1.0-alpha.1] - 2024-08-26
 
 ### Added