Fix UI for resource progress

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

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>

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
       )}