From f232da700d44f562263a6995991af23cb768648b Mon Sep 17 00:00:00 2001
From: Camilo Vega <59750365+camilovegag@users.noreply.github.com>
Date: Mon, 27 May 2024 16:50:32 -0500
Subject: [PATCH] Minor fixes (#573)

* Fix long usernames at comments table

* sort by lead if votes are equal

* sort by id if votes are equal

* add sort fallback by id

---------

Co-authored-by: Diego Alzate <diego35.da@gmail.com>
---
 .../CommentsColumns.styled.tsx                |  2 +-
 .../comment-table/CommentsTable.styled.tsx    |  4 +++-
 .../tables/comment-table/CommentsTable.tsx    |  4 ++--
 packages/berlin/src/pages/Cycle.tsx           | 22 +++++++++++++++++++
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/berlin/src/components/columns/comments-columns/CommentsColumns.styled.tsx b/packages/berlin/src/components/columns/comments-columns/CommentsColumns.styled.tsx
index fe08b092..8d3fb671 100644
--- a/packages/berlin/src/components/columns/comments-columns/CommentsColumns.styled.tsx
+++ b/packages/berlin/src/components/columns/comments-columns/CommentsColumns.styled.tsx
@@ -8,7 +8,7 @@ export const Card = styled(Grid)`
   grid-template-columns: minmax(200px, 600px) minmax(100px, 150px) 56px;
 
   @media (min-width: 600px) {
-    grid-template-columns: minmax(200px, 600px) minmax(100px, 150px) minmax(100px, 150px) 56px;
+    grid-template-columns: minmax(200px, 600px) minmax(100px, 200px) minmax(80px, 100px) 56px;
   }
 `;
 
diff --git a/packages/berlin/src/components/tables/comment-table/CommentsTable.styled.tsx b/packages/berlin/src/components/tables/comment-table/CommentsTable.styled.tsx
index a2a4493f..a1749a50 100644
--- a/packages/berlin/src/components/tables/comment-table/CommentsTable.styled.tsx
+++ b/packages/berlin/src/components/tables/comment-table/CommentsTable.styled.tsx
@@ -11,7 +11,7 @@ export const Card = styled(Grid)`
   grid-template-columns: minmax(200px, 600px) minmax(100px, 150px) 56px;
 
   @media (min-width: 600px) {
-    grid-template-columns: minmax(200px, 600px) minmax(100px, 150px) minmax(100px, 150px) 56px;
+    grid-template-columns: minmax(200px, 600px) minmax(100px, 200px) minmax(80px, 100px) 56px;
   }
 `;
 
@@ -19,6 +19,8 @@ export const Comment = styled(Body)``;
 
 export const Author = styled(Body)`
   font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 export const FormattedDate = styled(Body)`
diff --git a/packages/berlin/src/components/tables/comment-table/CommentsTable.tsx b/packages/berlin/src/components/tables/comment-table/CommentsTable.tsx
index 34edcac3..725460d9 100644
--- a/packages/berlin/src/components/tables/comment-table/CommentsTable.tsx
+++ b/packages/berlin/src/components/tables/comment-table/CommentsTable.tsx
@@ -99,11 +99,11 @@ function CommentsTable({ comment }: CommentsTableProps) {
   };
 
   return (
-    <Card $columns={4}>
+    <Card>
       <FlexRow>
         <Comment>{comment.value}</Comment>
       </FlexRow>
-      <Author>@{comment.user?.username}</Author>
+      <Author title={`@${comment.user?.username}`}>@{comment.user?.username}</Author>
       <FormattedDate>{formattedDate}</FormattedDate>
       <FlexRow
         $gap="0.5rem"
diff --git a/packages/berlin/src/pages/Cycle.tsx b/packages/berlin/src/pages/Cycle.tsx
index 76cab748..2fe0557b 100644
--- a/packages/berlin/src/pages/Cycle.tsx
+++ b/packages/berlin/src/pages/Cycle.tsx
@@ -211,15 +211,32 @@ function Cycle() {
 
   const currentCycle = cycle?.forumQuestions[0];
 
+  const sortId = (a: QuestionOption, b: QuestionOption, order: Order) => {
+    const idA = a.id.toUpperCase();
+    const idB = b.id.toUpperCase();
+
+    return order === 'desc' ? idB.localeCompare(idA) : idA.localeCompare(idB);
+  };
+
   const sortByLead = (a: QuestionOption, b: QuestionOption, order: Order) => {
     const leadA = (a.user.lastName || a.user.username).toUpperCase();
     const leadB = (b.user.lastName || b.user.username).toUpperCase();
+
+    if (leadA === leadB) {
+      return sortId(a, b, order);
+    }
+
     return order === 'desc' ? leadB.localeCompare(leadA) : leadA.localeCompare(leadB);
   };
 
   const sortByAffiliation = (a: QuestionOption, b: QuestionOption, order: Order) => {
     const affiliationA = a.user.group?.name.toUpperCase();
     const affiliationB = b.user.group?.name.toUpperCase() ?? '';
+
+    if (affiliationA === affiliationB) {
+      return sortId(a, b, order);
+    }
+
     return order === 'desc'
       ? affiliationB.localeCompare(affiliationA)
       : affiliationA.localeCompare(affiliationB);
@@ -233,6 +250,11 @@ function Cycle() {
   ) => {
     const votesA = localUserVotes?.find((vote) => vote.optionId === a.id)?.numOfVotes || 0;
     const votesB = localUserVotes?.find((vote) => vote.optionId === b.id)?.numOfVotes || 0;
+
+    if (votesA === votesB) {
+      return sortId(a, b, order);
+    }
+
     return order === 'desc' ? votesB - votesA : votesA - votesB;
   };