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 <[email protected]>
lexicongovernance · May 27, 2024 · f232da7 · f232da7
1 parent 028a991
commit f232da7
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 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
@@ -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
@@ -11,14 +11,16 @@ 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;
   }
 `;
 
 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
@@ -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
@@ -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;
   };