From 58dd3f2f41c49302bc17342b441cf094e063c769 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 3 Sep 2023 12:17:30 +0100
Subject: [PATCH] Fix flickering numbers

---
 src/components/Questions/QuestionCard.tsx      | 6 +++---
 src/components/Questions/QuestionsProgress.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Questions/QuestionCard.tsx b/src/components/Questions/QuestionCard.tsx
index 8bc7af826..253178c93 100644
--- a/src/components/Questions/QuestionCard.tsx
+++ b/src/components/Questions/QuestionCard.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import type { QuestionType } from '../../lib/question-group';
 import { markdownToHtml } from '../../lib/markdown';
 import Prism from 'prismjs';
@@ -58,12 +58,12 @@ export function QuestionCard(props: QuestionCardProps) {
             const totalTopics = question.topics?.length || 0;
 
             return (
-              <>
+              <Fragment key={topic}>
                 <span className="capitalize">{topic}</span>
                 {counter !== totalTopics - 1 && (
                   <span className="mx-2">&middot;</span>
                 )}
-              </>
+              </Fragment>
             );
           })}
         </div>
diff --git a/src/components/Questions/QuestionsProgress.tsx b/src/components/Questions/QuestionsProgress.tsx
index b201cdb1c..4cdb35145 100644
--- a/src/components/Questions/QuestionsProgress.tsx
+++ b/src/components/Questions/QuestionsProgress.tsx
@@ -46,7 +46,7 @@ export function QuestionsProgress(props: QuestionsProgressProps) {
           <CheckCircle className="mr-1 h-4" />
           <span>Knew</span>
           <span className="ml-2 rounded-md bg-gray-200/80 px-1.5 font-medium text-black">
-            {knowCount} Questions
+            <span className='tabular-nums'>{knowCount}</span> Questions
           </span>
         </span>
 
@@ -54,7 +54,7 @@ export function QuestionsProgress(props: QuestionsProgressProps) {
           <Sparkles className="mr-1 h-4" />
           <span>Learnt</span>
           <span className="ml-2 rounded-md bg-gray-200/80 px-1.5 font-medium text-black">
-            {didNotKnowCount} Questions
+            <span className='tabular-nums'>{didNotKnowCount}</span> Questions
           </span>
         </span>
 
@@ -62,7 +62,7 @@ export function QuestionsProgress(props: QuestionsProgressProps) {
           <SkipForward className="mr-1 h-4" />
           <span>Skipped</span>
           <span className="ml-2 rounded-md bg-gray-200/80 px-1.5 font-medium text-black">
-            {skippedCount} Questions
+            <span className='tabular-nums'>{skippedCount}</span> Questions
           </span>
         </span>