From 80eeadd6a68b7ad889fa87cddb4c72c335062967 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sat, 3 Aug 2024 11:16:19 +0100
Subject: [PATCH] Fix UI for resource progress

---
 src/components/ResourceProgressStats.astro          | 4 ++--
 src/components/RoadmapHeader.astro                  | 2 +-
 src/components/UserProgress/ProgressShareButton.tsx | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ResourceProgressStats.astro b/src/components/ResourceProgressStats.astro
index a594bac5d..bc9aabceb 100644
--- a/src/components/ResourceProgressStats.astro
+++ b/src/components/ResourceProgressStats.astro
@@ -13,11 +13,11 @@ const { resourceId, resourceType } = Astro.props;
 <div
   data-progress-nums-container
   class:list={[
-    'striped-loader relative flex items-center justify-between rounded-md bg-white px-3 py-2.5',
+    'striped-loader relative flex items-center justify-between rounded-md bg-white px-2 sm:px-2.5 py-2 sm:py-2.5',
   ]}
 >
   <p
-    class='flex text-sm opacity-0 transition-opacity duration-300'
+    class='flex text-xs sm:text-sm opacity-0 transition-opacity duration-300'
     data-progress-nums
   >
     <span
diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro
index 76972b53b..1e433b88b 100644
--- a/src/components/RoadmapHeader.astro
+++ b/src/components/RoadmapHeader.astro
@@ -79,7 +79,7 @@ const hasTnsBanner = !!tnsBannerLink;
 
       <a
         href='/roadmaps'
-        class='hidden rounded-md text-sm font-medium text-gray-500 transition-all hover:-translate-x-1 hover:text-black focus:outline-0 sm:block'
+        class='hidden rounded-md text-sm font-medium text-gray-500 transition-all hover:text-black focus:outline-0 sm:block'
         aria-label='Back to All Roadmaps'
       >
         &larr;&nbsp;<span>&nbsp;All Roadmaps</span>
diff --git a/src/components/UserProgress/ProgressShareButton.tsx b/src/components/UserProgress/ProgressShareButton.tsx
index 7ba8bd031..eb3ac9659 100644
--- a/src/components/UserProgress/ProgressShareButton.tsx
+++ b/src/components/UserProgress/ProgressShareButton.tsx
@@ -52,7 +52,7 @@ export function ProgressShareButton(props: ProgressShareButtonProps) {
   return (
     <button
       className={cn(
-        'flex items-center gap-1 text-sm font-medium disabled:cursor-not-allowed disabled:opacity-70',
+        'flex items-center gap-1 text-xs sm:text-sm font-medium disabled:cursor-not-allowed disabled:opacity-70',
         isCopied ? 'text-green-500' : 'text-gray-500 hover:text-black',
         className
       )}