feat(MED-168): improve styles

app/home/(user)/(dashboard)/analysis-results/[id]/page.tsx

@@ -54,46 +54,44 @@ export default async function AnalysisResultsPage({
   }
 
   const orderedAnalysisElements = analysisResponse.orderedAnalysisElements;
+  const hasOrderedAnalysisElements = orderedAnalysisElements.length > 0;
+  const isPartialStatus = analysisResponse.order.status === 'PARTIAL_ANALYSIS_RESPONSE';
 
   return (
     <>
-      <PageHeader />
-      <PageBody className="gap-4">
-        <div className="mt-8 flex flex-col justify-between gap-4 sm:flex-row sm:items-center sm:gap-0">
-          <div>
-            <h4>
-              <Trans i18nKey="analysis-results:pageTitle" />
-            </h4>
-            <p className="text-muted-foreground text-sm">
-              {orderedAnalysisElements.length > 0 ? (
-                <Trans i18nKey="analysis-results:description" />
-              ) : (
-                <Trans i18nKey="analysis-results:descriptionEmpty" />
-              )}
-            </p>
-          </div>
+      <PageHeader
+        title={<Trans i18nKey="analysis-results:pageTitle" />}
+        description={hasOrderedAnalysisElements ? (
+          isPartialStatus
+            ? <Trans i18nKey="analysis-results:descriptionPartial" />
+            : <Trans i18nKey="analysis-results:description" />
+        ) : (
+          <Trans i18nKey="analysis-results:descriptionEmpty" />
+        )}
+      >
+        <div>
           <Button asChild>
             <Link href={pathsConfig.app.orderAnalysisPackage}>
               <Trans i18nKey="analysis-results:orderNewAnalysis" />
             </Link>
           </Button>
         </div>
+      </PageHeader>
+      <PageBody className="gap-4 pt-4">
         <div className="flex flex-col gap-4">
-          <h4>
+          <h5 className="break-all">
             <Trans
               i18nKey="analysis-results:orderTitle"
               values={{ orderNumber: analysisResponse.order.medusaOrderId }}
             />
-          </h4>
-          <h5>
-            <Trans
-              i18nKey={`orders:status.${analysisResponse.order.status}`}
-            />
+          </h5>
+          <h6>
+            <Trans i18nKey={`orders:status.${analysisResponse.order.status}`} />
             <ButtonTooltip
               content={`${analysisResponse.order.createdAt ? new Date(analysisResponse?.order?.createdAt).toLocaleString() : ''}`}
               className="ml-6"
             />
-          </h5>
+          </h6>
         </div>
         {analysisResponse?.summary?.value && (
           <div>

app/home/(user)/(dashboard)/analysis-results/_components/analysis-level-bar.tsx

@@ -47,7 +47,7 @@ const Level = ({
       )}
 
       {color === 'success' && typeof normRangeText === 'string' && (
-        <p className={cn("absolute bottom-[-18px] left-3/8 text-xs text-muted-foreground font-bold", {
+        <p className={cn("absolute bottom-[-18px] left-3/8 text-xs text-muted-foreground font-bold whitespace-nowrap", {
           'opacity-60': isActive,
         })}>
           {normRangeText}
@@ -179,7 +179,13 @@ const AnalysisLevelBar = ({
   }, [isValueBelowLower, isValueAboveUpper, isValueInNormalRange, arrowLocation, normRangeText, isNormal, isWarning, isCritical]);
 
   return (
-    <div className="mt-4 flex h-3 w-[60%] sm:w-[35%] max-w-[360px] gap-1 sm:mt-0">
+    <div className={cn(
+      "flex h-3 gap-1",
+      "mt-4 sm:mt-0",
+      "w-[60%] sm:w-[35%]",
+      "min-w-[50vw] sm:min-w-auto",
+      "max-w-[360px]",
+    )}>
       <Level {...first} />
       <Level {...second} />
       <Level {...third} />