fix positioning and max-width of content in compensation (#1053)

* fix positioning and max-width of content in compensation * fix lint
varianter · Dec 13, 2024 · 5be2b70 · 5be2b70
1 parent 4e8d9bb
commit 5be2b70
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/src/components/compensations/CompensationSelector.tsx b/src/components/compensations/CompensationSelector.tsx
@@ -9,6 +9,7 @@ import { CompanyLocation } from "studio/lib/interfaces/companyDetails";
 import { CompensationsPage } from "studio/lib/interfaces/compensations";
 import { LocaleDocument } from "studio/lib/interfaces/locale";
 
+import styles from "./compensations.module.css";
 import BenefitsByLocation from "./components/benefitsByLocation/BenefitsByLocation";
 import YearlyBonuses from "./components/yearlyBonuses/YearlyBonuses";
 
@@ -42,7 +43,7 @@ export default function CompensationSelector({
   )?.yearlyBonuses;
 
   return (
-    <>
+    <div className={styles.compensationWrapper}>
       {yearlyBonusesForLocation && (
         <YearlyBonuses bonuses={yearlyBonusesForLocation} locale={locale} />
       )}
@@ -55,6 +56,6 @@ export default function CompensationSelector({
       />
 
       <BenefitsByLocation benefits={benefitsFilteredByLocation} />
-    </>
+    </div>
   );
 }
diff --git a/src/components/compensations/Compensations.tsx b/src/components/compensations/Compensations.tsx
@@ -22,7 +22,9 @@ export default async function Compensations({
 }: CompensationsProps) {
   return (
     <div className={styles.wrapper}>
-      <Text type="h1">{compensations.basicTitle}</Text>
+      <Text className={styles.text} type="h1">
+        {compensations.basicTitle}
+      </Text>
 
       <CompensationCalculator
         section={compensations.compensationCalculator}

diff --git a/src/components/compensations/compensations.module.css b/src/components/compensations/compensations.module.css
@@ -3,4 +3,16 @@
   flex-direction: column;
   padding: 10rem 5rem;
   gap: 5rem;
+  justify-content: center;
+  width: 100%;
+}
+
+.text {
+  max-width: var(--max-content-width-large);
+  align-self: center;
+}
+
+.compensationWrapper {
+  max-width: var(--max-content-width-large);
+  align-self: center;
 }