refactor: adjust aggregate-rating responsive layout

jobstash · Apr 5, 2024 · c4a96cc · c4a96cc
1 parent d996eb4
commit c4a96cc
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/src/orgs/components/org-reviews/aggregate-ratings-card.tsx b/src/orgs/components/org-reviews/aggregate-ratings-card.tsx
@@ -30,22 +30,24 @@ export const AggregateRatingsCard = ({
 
       {showInfos && <>{infoTexts}</>}
 
-      <div className="grid-cold-1 2xl:grid-cols-3 grid gap-3 sm:grid-cols-2">
+      <div className="2xl:grid-cols-3 grid grid-cols-1 gap-6 sm:grid-cols-2 md:gap-4">
         {ratings.map(([label, rating]) => (
           <div
             key={label}
-            className="flex shrink-0 flex-wrap items-center justify-start gap-2"
+            className="flex shrink-0 flex-col flex-wrap items-start justify-start gap-2 md:flex-row md:items-center"
           >
-            <Text
-              className="text-base font-bold text-white"
-              text={rating.toFixed(1)}
-            />
-            <Rating
-              readOnly
-              value={rating}
-              style={{ maxWidth: 120 }}
-              itemStyles={RATING_ITEM_STYLES}
-            />
+            <div className="flex items-center gap-2">
+              <Text
+                className="text-base font-bold text-white"
+                text={rating.toFixed(1)}
+              />
+              <Rating
+                readOnly
+                value={rating}
+                style={{ maxWidth: 120 }}
+                itemStyles={RATING_ITEM_STYLES}
+              />
+            </div>
 
             <Text
               className="shrink-0 text-base text-white"

diff --git a/src/orgs/core/constants.ts b/src/orgs/core/constants.ts
@@ -40,7 +40,7 @@ export const ORG_RATING_LABELS = {
   careerGrowth: 'Career Growth' as const,
   diversityInclusion: 'Diversity & Inclusion' as const,
   management: 'Management' as const,
-  product: 'Product' as const,
+  product: 'Overall Product' as const,
   compensation: 'Compensation' as const,
   onboarding: 'Onboarding' as const,
   workLifeBalance: 'Work Life Balance' as const,