Improve expenses mobile layout and payment flow

This commit is contained in:
Jose Selesan
2026-06-01 08:03:48 -03:00
parent 988d58d761
commit 2fd23cedc6
8 changed files with 249 additions and 96 deletions

View File

@@ -15,9 +15,9 @@ function ExpensesPageInner() {
return (
<div className="space-y-4">
<h1 className="text-2xl font-semibold">Gastos</h1>
<h1 className="text-2xl font-semibold text-balance">Gastos</h1>
<div className="flex gap-1 border-b">
<div className="flex gap-1 overflow-x-auto border-b">
{tabs.map((tab) => (
<button
key={tab.id}
@@ -25,8 +25,8 @@ function ExpensesPageInner() {
onClick={() => setActiveTab(tab.id)}
className={
activeTab === tab.id
? "-mb-px border-b-2 border-primary px-3 pb-2 text-sm font-medium text-foreground"
: "px-3 pb-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
? "-mb-px shrink-0 border-b-2 border-primary px-3 pb-2 text-sm font-medium text-foreground"
: "shrink-0 px-3 pb-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
}
>
{tab.label}