From f7180a362364200a2fcd997aee11f8490f937a1d Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <me@atri.dad>
Date: Thu, 19 Oct 2023 14:54:56 -0300
Subject: [PATCH] Fix overflow issues on mobile for Status Pages (#391)

* Try this

* chore: style

---------

Co-authored-by: mxkaske <maximilian@kaske.org>
---
 apps/web/src/app/status-page/[domain]/page.tsx | 2 +-
 apps/web/src/components/dashboard/header.tsx   | 4 ++--
 apps/web/src/components/tracker.tsx            | 6 ++++--
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/status-page/[domain]/page.tsx b/apps/web/src/app/status-page/[domain]/page.tsx
index 20b179adc..3569ea1a3 100644
--- a/apps/web/src/app/status-page/[domain]/page.tsx
+++ b/apps/web/src/app/status-page/[domain]/page.tsx
@@ -39,7 +39,7 @@ export default async function Page({ params }: Props) {
   );
 
   return (
-    <div className="grid gap-6">
+    <div className="mx-auto flex w-full flex-col gap-6">
       <Header
         title={page.title}
         description={page.description}
diff --git a/apps/web/src/components/dashboard/header.tsx b/apps/web/src/components/dashboard/header.tsx
index 5d608622c..7635c4726 100644
--- a/apps/web/src/components/dashboard/header.tsx
+++ b/apps/web/src/components/dashboard/header.tsx
@@ -20,9 +20,9 @@ function Header({ title, description, className, actions }: HeaderProps) {
       )}
     >
       <div className="flex w-full flex-col gap-1">
-        <h1 className="font-cal truncate text-3xl">{title}</h1>
+        <h1 className="font-cal text-3xl">{title}</h1>
         {description ? (
-          <p className="text-muted-foreground truncate">{description}</p>
+          <p className="text-muted-foreground">{description}</p>
         ) : null}
       </div>
       {actions ? (
diff --git a/apps/web/src/components/tracker.tsx b/apps/web/src/components/tracker.tsx
index 8b7cea353..84b62d878 100644
--- a/apps/web/src/components/tracker.tsx
+++ b/apps/web/src/components/tracker.tsx
@@ -65,12 +65,14 @@ export function Tracker({
     <div className="flex flex-col">
       <div className="mb-2 flex justify-between text-sm">
         <div className="flex items-center gap-2">
-          <p className="text-foreground font-semibold">{name}</p>
+          <p className="text-foreground line-clamp-1 font-semibold">{name}</p>
           {description ? (
             <MoreInfo {...{ url, id, context, description }} />
           ) : null}
         </div>
-        <p className="text-muted-foreground font-light">{uptime}% uptime</p>
+        <p className="text-muted-foreground shrink-0 font-light">
+          {uptime}% uptime
+        </p>
       </div>
       <div className="relative h-full w-full">
         <div className="flex gap-0.5">
-- 
2.54.0