From 121c0f69ffb0c58d001563700d2a16d9309e8ecb Mon Sep 17 00:00:00 2001
From: eze_ig <eze_ig>
Date: Fri, 15 Oct 2021 00:01:12 +0300
Subject: [PATCH] CLASSROOMIO-T-25:changed the width of "graded and pending" to
 fit-content depend on its content

---
 .../Course/components/Lesson/Exercise/ViewMode.svelte | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Course/components/Lesson/Exercise/ViewMode.svelte b/src/components/Course/components/Lesson/Exercise/ViewMode.svelte
index 0b4b9a7c..19da63e0 100644
--- a/src/components/Course/components/Lesson/Exercise/ViewMode.svelte
+++ b/src/components/Course/components/Lesson/Exercise/ViewMode.svelte
@@ -228,14 +228,15 @@
       <h2 class="text-xl mb-2 mt-0">{$questionnaire.title}</h2>
       {#if STATUS.GRADED === $questionnaireMetaData.status}
         <span
-          class="bg-green-700 text-white rounded-full py-2 px-6 text-center"
+          class="status-text bg-green-700 text-white rounded-full py-2 px-6 text-center"
           title="Status: Pending Review"
+
         >
           Graded
         </span>
       {:else}
         <span
-          class="bg-yellow-600 text-white rounded-full py-2 px-6 text-center"
+          class=" status-text2 bg-yellow-600 text-white rounded-full py-2 px-6 text-center"
           title="Status: Pending Review"
         >
           Pending
@@ -273,6 +274,12 @@
 {/if}
 
 <style>
+  .status-text2 {
+    width: fit-content;
+  }
+  .status-text {
+    width: fit-content;
+  }
   :global(.shake) {
     animation: shake 0.85s;
   }