From 2acb74ba1d00951aa907a841997bbd9fcfe6e8f8 Mon Sep 17 00:00:00 2001
From: ap-justin <89639563+ap-justin@users.noreply.github.com>
Date: Thu, 19 Sep 2024 20:08:43 +0800
Subject: [PATCH] period mobile

---
 src/pages/Admin/Charity/Dashboard/Loaded.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/pages/Admin/Charity/Dashboard/Loaded.tsx b/src/pages/Admin/Charity/Dashboard/Loaded.tsx
index 7ad043af38..c344cb49ab 100644
--- a/src/pages/Admin/Charity/Dashboard/Loaded.tsx
+++ b/src/pages/Admin/Charity/Dashboard/Loaded.tsx
@@ -89,13 +89,15 @@ export function Loaded({ classes = "", ...props }: Props) {
       <div className="w-full mt-16 h-1.5 bg-gray-l5 rounded-full shadow-inner" />
 
       {/** div scopes when the sticky header ends */}
-      <div>
-        <h3 className="py-4 font-medium flex items-center sticky top-[4rem] bg-white z-10">
-          <span className="text-sm uppercase font-normal">Period</span>
-          <span className="ml-2 uppercase text-sm">
-            {period.from} - {period.to}
-          </span>
-          <p className="text-sm text-navy-l3 ml-auto">
+      <div className="@container/period">
+        <h3 className="py-4 font-medium flex flex-col @lg/period:flex-row @lg/period:justify-between gap-y-2  sticky top-[4rem] bg-white z-10">
+          <div className="flex items-center">
+            <span className="text-sm uppercase font-normal">Period</span>
+            <span className="ml-2 uppercase text-sm">
+              {period.from} - {period.to}
+            </span>
+          </div>
+          <p className="text-sm text-navy-l3">
             <span>Ends in </span>
             <span className="p-1 px-2 bg-navy-d4 text-gray-l4 text-xs rounded ml-1">
               in {period.distance}