From c4de3f605c2c6ffa505ad098c72292e706359c0e Mon Sep 17 00:00:00 2001
From: Sebastien Castiel <sebastien@castiel.me>
Date: Wed, 17 Jan 2024 10:22:49 -0500
Subject: [PATCH] Improve UI of expense list

---
 src/app/groups/[groupId]/expenses/expense-list.tsx | 12 ++++++++----
 src/app/groups/[groupId]/expenses/page.tsx         |  2 +-
 src/app/layout.tsx                                 |  2 +-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/app/groups/[groupId]/expenses/expense-list.tsx b/src/app/groups/[groupId]/expenses/expense-list.tsx
index 1a36179..73c8c6e 100644
--- a/src/app/groups/[groupId]/expenses/expense-list.tsx
+++ b/src/app/groups/[groupId]/expenses/expense-list.tsx
@@ -92,15 +92,19 @@ export function ExpenseList({
       const groupExpenses = groupedExpensesByDate[expenseGroup]
       if (!groupExpenses) return null
       return (
-        <Fragment key={expenseGroup}>
-          <div className={'border-t text-md pl-3 py-2 font-semibold'}>
+        <div key={expenseGroup}>
+          <div
+            className={
+              'text-muted-foreground text-xs pl-4 sm:pl-6 py-1 font-semibold sticky top-16 bg-white dark:bg-[#1b1917]'
+            }
+          >
             {expenseGroup}
           </div>
           {groupExpenses.map((expense: any) => (
             <div
               key={expense.id}
               className={cn(
-                'border-t flex justify-between px-4 sm:pr-2 sm:pl-6 py-4 text-sm cursor-pointer hover:bg-accent gap-1 items-stretch',
+                'flex justify-between sm:mx-6 px-4 sm:rounded-lg sm:pr-2 sm:pl-4 py-4 text-sm cursor-pointer hover:bg-accent gap-1 items-stretch',
                 expense.isReimbursement && 'italic',
               )}
               onClick={() => {
@@ -159,7 +163,7 @@ export function ExpenseList({
               </Button>
             </div>
           ))}
-        </Fragment>
+        </div>
       )
     })
   ) : (
diff --git a/src/app/groups/[groupId]/expenses/page.tsx b/src/app/groups/[groupId]/expenses/page.tsx
index 3ef84e3..56b5cd9 100644
--- a/src/app/groups/[groupId]/expenses/page.tsx
+++ b/src/app/groups/[groupId]/expenses/page.tsx
@@ -55,7 +55,7 @@ export default async function GroupExpensesPage({
           </CardHeader>
         </div>
 
-        <CardContent className="p-0">
+        <CardContent className="p-0 pt-2 pb-4 sm:pb-6 flex flex-col gap-4 relative">
           <Suspense
             fallback={[0, 1, 2].map((i) => (
               <div
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2223a84..56fed4f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -77,7 +77,7 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <ProgressBar />
-          <header className="fixed top-0 left-0 right-0 h-16 flex justify-between bg-white dark:bg-gray-950 bg-opacity-50 dark:bg-opacity-50 p-2 border-b backdrop-blur-sm">
+          <header className="fixed top-0 left-0 right-0 h-16 flex justify-between bg-white dark:bg-gray-950 bg-opacity-50 dark:bg-opacity-50 p-2 border-b backdrop-blur-sm z-50">
             <Link
               className="flex items-center gap-2 hover:scale-105 transition-transform"
               href="/"