Skip to content

Commit dd5fc27

Browse files
committed
Fix overflow
1 parent c6da866 commit dd5fc27

File tree

2 files changed

+44
-42
lines changed

2 files changed

+44
-42
lines changed

src/components/NavBarLayout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ export default function NavbarLayout({
182182
<>
183183
<DesktopNavbar />
184184
<MobileNavbar />
185-
<main className="flex-1 px-6 py-8">{children}</main>
185+
<main className="flex-1 px-6 py-8 overflow-scroll">{children}</main>
186186
</>
187187
) : (
188188
<>{children}</>

src/screens/AccountManagementScreen.tsx

+43-41
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export default function AccountManagementScreen() {
6060
};
6161

6262
return (
63-
<div>
63+
<>
6464
<h1 className="text-2xl font-semibold">Account Management</h1>
6565
<div className="flex justify-between items-center w-full py-4">
6666
<div className="relative w-1/3">
@@ -102,47 +102,49 @@ export default function AccountManagementScreen() {
102102
<CgSpinner className="w-16 h-16 animate-spin opacity-50" />
103103
</div>
104104
) : (
105-
<table className="min-w-full mt-4 rounded-t-lg overflow-hidden">
106-
<thead>
107-
<tr className="bg-gray-100 border-b-2">
108-
<th className="px-4 py-2 text-left font-normal">Name</th>
109-
<th className="px-4 py-2 text-left font-normal">Email</th>
110-
<th className="px-4 py-2 text-left font-normal">Role</th>
111-
<th className="px-4 py-2 text-left font-normal">Status</th>
112-
<th className="px-4 py-2 text-left font-normal">Manage</th>
113-
</tr>
114-
</thead>
115-
<tbody>
116-
{filteredUsers.map((user, index) => (
117-
<tr
118-
key={index}
119-
data-odd={index % 2 !== 0}
120-
className="bg-white data-[odd=true]:bg-gray-50"
121-
>
122-
<td className="border-b px-4 py-2 w-1/5">{user.name}</td>
123-
<td className="border-b px-4 py-2 w-1/5">{user.email}</td>
124-
<td className="border-b px-4 py-2 w-1/5">
125-
{formatUserType(user.type)}
126-
</td>
127-
<td className="border-b px-4 py-2 w-1/5">
128-
<span className="px-2 py-1 rounded bg-green-primary whitespace-nowrap">
129-
Account created
130-
</span>
131-
</td>
132-
<td className="border-b px-4 py-2 w-12">
133-
<div className="float-right">
134-
<DotsThree
135-
weight="bold"
136-
className="cursor-pointer"
137-
onClick={() => {}}
138-
/>
139-
</div>
140-
</td>
105+
<div className="overflow-x-scroll">
106+
<table className="mt-4 rounded-t-lg overflow-hidden">
107+
<thead>
108+
<tr className="bg-gray-100 border-b-2">
109+
<th className="px-4 py-2 text-left font-normal">Name</th>
110+
<th className="px-4 py-2 text-left font-normal">Email</th>
111+
<th className="px-4 py-2 text-left font-normal">Role</th>
112+
<th className="px-4 py-2 text-left font-normal">Status</th>
113+
<th className="px-4 py-2 text-left font-normal">Manage</th>
141114
</tr>
142-
))}
143-
</tbody>
144-
</table>
115+
</thead>
116+
<tbody>
117+
{filteredUsers.map((user, index) => (
118+
<tr
119+
key={index}
120+
data-odd={index % 2 !== 0}
121+
className="bg-white data-[odd=true]:bg-gray-50"
122+
>
123+
<td className="border-b px-4 py-2 w-1/5">{user.name}</td>
124+
<td className="border-b px-4 py-2 w-1/5">{user.email}</td>
125+
<td className="border-b px-4 py-2 w-1/5">
126+
{formatUserType(user.type)}
127+
</td>
128+
<td className="border-b px-4 py-2 w-1/5">
129+
<span className="px-2 py-1 rounded bg-green-primary whitespace-nowrap">
130+
Account created
131+
</span>
132+
</td>
133+
<td className="border-b px-4 py-2 w-12">
134+
<div className="float-right">
135+
<DotsThree
136+
weight="bold"
137+
className="cursor-pointer"
138+
onClick={() => {}}
139+
/>
140+
</div>
141+
</td>
142+
</tr>
143+
))}
144+
</tbody>
145+
</table>
146+
</div>
145147
)}
146-
</div>
148+
</>
147149
);
148150
}

0 commit comments

Comments
 (0)