fix: correct conditional header content styles

components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css

@@ -4,14 +4,19 @@
 }
 
 .header {
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-areas: "title link";
+  grid-template-columns: 1fr max-content;
 }
 
 .title {
+  grid-area: title;
   font-weight: 600;
 }
 
+.link {
+  grid-area: link;
+}
 .subtitle {
   margin: 0;
   font-size: 2rem;

components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx

@@ -18,9 +18,11 @@ export default async function CurrentBenefitsBlock({
   return (
     <section className={styles.container}>
       <header className={styles.header}>
-        <Title as="h3" level="h2" className={styles.title} uppercase>
-          {title}
-        </Title>
+        {title && (
+          <Title as="h3" level="h2" className={styles.title} uppercase>
+            {title}
+          </Title>
+        )}
         {link && (
           <Link className={styles.link} href={link.href}>
             {link.text}

components/MyPages/Blocks/Benefits/NextLevel/index.tsx

@@ -7,6 +7,7 @@ import Button from "@/components/TempDesignSystem/Button"
 import Title from "@/components/Title"
 
 import styles from "./next.module.css"
+
 import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function NextLevelBenefitsBlock({
@@ -19,14 +20,16 @@ export default async function NextLevelBenefitsBlock({
   return (
     <section className={styles.container}>
       <header className={styles.header}>
-        <Title as="h3" level="h2" uppercase className={styles.title}>
-          {title}
-          {link && (
-            <Link className={styles.link} href={link.href}>
-              {link.text}
-            </Link>
-          )}
-        </Title>
+        {title && (
+          <Title as="h3" level="h2" uppercase className={styles.title}>
+            {title}
+          </Title>
+        )}
+        {link && (
+          <Link className={styles.link} href={link.href}>
+            {link.text}
+          </Link>
+        )}
       </header>
       {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
       <div className={styles.cardContainer}>

components/MyPages/Blocks/Benefits/NextLevel/next.module.css

@@ -4,8 +4,18 @@
 }
 
 .header {
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-areas: "title link";
+  grid-template-columns: 1fr max-content;
+}
+
+.title {
+  grid-area: title;
+  font-weight: 600;
+}
+
+.link {
+  grid-area: link;
 }
 
 .cardContainer {

components/MyPages/Blocks/Stays/Header/header.module.css

@@ -1,6 +1,16 @@
 .header {
   display: grid;
-  gap: 0.5rem;
+  grid-template-areas: "title link";
+  grid-template-columns: 1fr max-content;
+}
+
+.title {
+  grid-area: title;
+  font-weight: 600;
+}
+
+.link {
+  grid-area: link;
 }
 
 .subtitle {

components/MyPages/Blocks/Stays/Header/index.tsx

@@ -10,15 +10,17 @@ export default function Header({ title, subtitle, link }: HeaderProps) {
   return (
     <>
       <header className={styles.header}>
-        <Title
-          as="h3"
-          level="h2"
-          className={styles.title}
-          weight="semiBold"
-          uppercase
-        >
-          {title}
-        </Title>
+        {title && (
+          <Title
+            as="h3"
+            level="h2"
+            className={styles.title}
+            weight="semiBold"
+            uppercase
+          >
+            {title}
+          </Title>
+        )}
         {link && (
           <Link className={styles.link} href={link.href}>
             {link.text}