period mobile

AngelProtocolFinance · Sep 19, 2024 · 2acb74b · 2acb74b
1 parent c5c5276
commit 2acb74b
Showing 1 changed file with 9 additions and 7 deletions.
diff --git 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}