MED-197: add tooltip to default package feature

app/home/(user)/_components/compare-packages-modal.tsx

@@ -3,7 +3,7 @@ import { JSX } from 'react';
 import { StoreProduct } from '@medusajs/types';
 import { QuestionMarkCircledIcon } from '@radix-ui/react-icons';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
-import { Check, X } from 'lucide-react';
+import { X } from 'lucide-react';
 
 import { PackageHeader } from '@kit/shared/components/package-header';
 import { AnalysisPackageWithVariant } from '@kit/shared/components/select-analysis-package';
@@ -26,6 +26,7 @@ import {
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
+import { CheckWithBackground } from './check-with-background';
 import ComparePackagesAddToCartButtons from './compare-packages-add-to-cart-buttons';
 import DefaultPackageFeaturesRows from './default-package-features-rows';
 
@@ -38,14 +39,6 @@ export type AnalysisPackageElement = Pick<
   isIncludedInPremium: boolean;
 };
 
-export const CheckWithBackground = () => {
-  return (
-    <div className="bg-primary w-min rounded-full p-1 text-white">
-      <Check className="size-3 stroke-2" />
-    </div>
-  );
-};
-
 const PackageTableHead = async ({
   product,
 }: {
@@ -97,7 +90,7 @@ const ComparePackagesModal = async ({
       <DialogContent
         className="min-h-screen max-w-fit min-w-screen"
         customClose={
-          <div className="inline-flex place-items-center-safe gap-1 align-middle">
+          <div className="absolute top-6 right-0 flex place-items-center-safe sm:top-0">
             <p className="text-sm font-medium text-black">
               {t('common:close')}
             </p>
@@ -111,8 +104,10 @@ const ComparePackagesModal = async ({
         </VisuallyHidden>
         <div className="m-auto">
           <div className="space-y-6 text-center">
-            <h3>{t('product:healthPackageComparison.label')}</h3>
-            <p className="text-muted-foreground mx-auto w-3/5 text-sm">
+            <h3 className="sm:text-xxl text-lg">
+              {t('product:healthPackageComparison.label')}
+            </h3>
+            <p className="text-muted-foreground text-sm sm:mx-auto sm:w-3/5">
               {t('product:healthPackageComparison.description')}
             </p>
             <div className="max-h-[50vh] overflow-y-auto rounded-md border sm:max-h-[70vh]">
@@ -143,12 +138,14 @@ const ComparePackagesModal = async ({
 
                       return (
                         <TableRow key={id}>
-                          <TableCell className="py-6 sm:w-[30vw]">
+                          <TableCell className="relative py-6 sm:w-[30vw]">
                             {title}{' '}
                             {description && (
                               <InfoTooltip
                                 content={description}
-                                icon={<QuestionMarkCircledIcon />}
+                                icon={
+                                  <QuestionMarkCircledIcon className="absolute top-2 right-0 size-5 sm:static sm:ml-2 sm:size-4" />
+                                }
                               />
                             )}
                           </TableCell>