period mobile

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}