fix(frontend): Resolve dual scroll and excessive whitespace issues on transactions page.

- Change root layout from h-screen to min-h-screen to prevent height conflicts
- Remove overflow-hidden and overflow-y-auto from main container to eliminate competing scroll contexts
- Streamline TransactionsTable layout by removing unnecessary overflow wrappers
- Add max-w-full constraint to prevent horizontal overflow issues

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Elisiário Couto
2025-09-17 22:11:03 +01:00
parent 2825dba2e9
commit 8ab760815c
2 changed files with 87 additions and 89 deletions

View File

@@ -438,7 +438,7 @@ export default function TransactionsTable() {
} }
return ( return (
<div className="space-y-6"> <div className="space-y-6 max-w-full">
{/* New FilterBar */} {/* New FilterBar */}
<FilterBar <FilterBar
filterState={filterState} filterState={filterState}
@@ -485,10 +485,9 @@ export default function TransactionsTable() {
</Card> </Card>
{/* Responsive Table/Cards */} {/* Responsive Table/Cards */}
<Card className="overflow-hidden"> <Card>
{/* Desktop Table View (hidden on mobile) */} {/* Desktop Table View (hidden on mobile) */}
<div className="hidden md:block"> <div className="hidden md:block">
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-border"> <table className="min-w-full divide-y divide-border">
<thead className="bg-muted/50"> <thead className="bg-muted/50">
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
@@ -572,7 +571,6 @@ export default function TransactionsTable() {
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
{/* Mobile Card View (visible only on mobile) */} {/* Mobile Card View (visible only on mobile) */}
<div className="md:hidden"> <div className="md:hidden">

View File

@@ -23,7 +23,7 @@ function RootLayout() {
}; };
return ( return (
<div className="flex h-screen bg-background"> <div className="flex min-h-screen bg-background">
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} /> <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
{/* Mobile overlay */} {/* Mobile overlay */}
@@ -34,9 +34,9 @@ function RootLayout() {
/> />
)} )}
<div className="flex flex-col flex-1 overflow-hidden"> <div className="flex flex-col flex-1">
<Header setSidebarOpen={setSidebarOpen} /> <Header setSidebarOpen={setSidebarOpen} />
<main className="flex-1 overflow-y-auto p-6"> <main className="flex-1 p-6">
<Outlet /> <Outlet />
</main> </main>
</div> </div>