From 9862c95acc541b8cb4520d73ca3aea908c934573 Mon Sep 17 00:00:00 2001
From: Yaokun Zhu <yiukuenchu@gmail.com>
Date: Tue, 8 Oct 2024 18:14:39 +1030
Subject: [PATCH] fix: prevent header text appear as two lines (#203)

* fix: prevent header text appear as two lines

* chore: re-apply prettier
---
 src/components/Header/index.tsx | 4 ++--
 tailwind.config.ts              | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 5b96a22e..6d17e30f 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -36,8 +36,8 @@ export default async function Header() {
 
     return (
         <>
-            <HeaderClient data={headerData} className="hidden md:block" />
-            <HeaderMobileClient data={headerData} className="md:hidden" />
+            <HeaderClient data={headerData} className="hidden lg-xl:block" />
+            <HeaderMobileClient data={headerData} className="lg-xl:hidden" />
         </>
     );
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index a106c19f..d195f12c 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -24,6 +24,7 @@ const config: Config = {
         // so a custom breakpoint was created to overwrite it
         // and now a CSS pattern can be applied with this breakpoint.
         'md-lg': '1169px',
+        'lg-xl': '1300px',
       },
     },
   },