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 />
+      <PageHeader
-      <PageBody className="gap-4">
+        title={<Trans i18nKey="analysis-results:pageTitle" />}
-        <div className="mt-8 flex flex-col justify-between gap-4 sm:flex-row sm:items-center sm:gap-0">
+        description={hasOrderedAnalysisElements ? (
-          <div>
+          isPartialStatus
-            <h4>
+            ? <Trans i18nKey="analysis-results:descriptionPartial" />
-              <Trans i18nKey="analysis-results:pageTitle" />
+            : <Trans i18nKey="analysis-results:description" />
-            </h4>
+        ) : (
-            <p className="text-muted-foreground text-sm">
+          <Trans i18nKey="analysis-results:descriptionEmpty" />
-              {orderedAnalysisElements.length > 0 ? (
+        )}
-                <Trans i18nKey="analysis-results:description" />
+      >
-              ) : (
+        <div>
-                <Trans i18nKey="analysis-results:descriptionEmpty" />
-              )}
-            </p>
-          </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>
-          <h5>
+          <h6>
-            <Trans
+            <Trans i18nKey={`orders:status.${analysisResponse.order.status}`} />
-              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} />

packages/ui/src/makerkit/page.tsx

@@ -158,11 +158,11 @@ export function PageHeader({
   return (
     <div
       className={cn(
-        'flex items-center justify-between py-5',
+        'flex py-5 flex-col sm:flex-row items-start sm:items-center sm:justify-between',
         className,
       )}
     >
-      <div className={'flex flex-col gap-y-2'}>
+      <div className={'flex flex-col gap-y-4 sm:gap-y-2'}>
         <If condition={title}>
           <PageTitle>{title}</PageTitle>
         </If>

public/locales/en/analysis-results.json

@@ -1,6 +1,7 @@
 {
   "pageTitle": "My analysis results",
-  "description": "All analysis results will appear here within 1-3 business days after they have been done.",
+  "description": "",
+  "descriptionPartial": "All analysis results will appear here within 1-3 business days after they have been done.",
   "descriptionEmpty": "If you've already done your analysis, your results will appear here soon.",
   "orderNewAnalysis": "Order new analyses",
   "waitingForResults": "Waiting for results",

public/locales/et/analysis-results.json

@@ -1,6 +1,7 @@
 {
   "pageTitle": "Minu analüüside vastused",
-  "description": "Kõikide analüüside tulemused ilmuvad 1-3 tööpäeva jooksul peale nende andmist.",
+  "description": "",
+  "descriptionPartial": "Kõikide analüüside tulemused ilmuvad 1-3 tööpäeva jooksul peale nende andmist.",
   "descriptionEmpty": "Kui oled juba käinud analüüse andmas, siis varsti jõuavad siia sinu analüüside vastused.",
   "orderNewAnalysis": "Telli uued analüüsid",
   "waitingForResults": "Tulemuse ootel",

public/locales/ru/analysis-results.json

@@ -1,6 +1,7 @@
 {
   "pageTitle": "Мои результаты анализов",
-  "description": "Все результаты анализов появляются в течение 1-3 рабочих дней после их сдачи.",
+  "description": "",
+  "descriptionPartial": "Все результаты анализов появляются в течение 1-3 рабочих дней после их сдачи.",
   "descriptionEmpty": "Если вы уже сдали анализы, то вскоре здесь появятся ваши результаты.",
   "orderNewAnalysis": "Заказать новые анализы",
   "waitingForResults": "Ожидание результатов",

styles/globals.css

@@ -75,11 +75,11 @@
   }
 
   h5 {
-    @apply text-base;   
+    @apply text-lg;
   }
 
   h6 {
-    @apply text-lg;
+    @apply text-base;
   }
 
   .lucide {