Update route check and add PageBody wrapper

Updated the `isRouteActive` check in the sidebar component to ensure it doesn't falsely identify nested routes as active. Additionally, introduced a `PageBody` wrapper in the account page component for consistent styling and padding.

apps/web/app/admin/accounts/[id]/page.tsx

@@ -3,6 +3,7 @@ import { cache } from 'react';
 import { AdminAccountPage } from '@kit/admin/components/admin-account-page';
 import { AdminGuard } from '@kit/admin/components/admin-guard';
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { PageBody } from '@kit/ui/page';
 
 interface Params {
   params: {
@@ -21,7 +22,11 @@ export const generateMetadata = async ({ params }: Params) => {
 async function AccountPage({ params }: Params) {
   const account = await loadAccount(params.id);
 
-  return <AdminAccountPage account={account} />;
+  return (
+    <PageBody className={'py-4'}>
+      <AdminAccountPage account={account} />
+    </PageBody>
+  );
 }
 
 export default AdminGuard(AccountPage);

packages/ui/src/makerkit/sidebar.tsx

@@ -159,7 +159,7 @@ export function SidebarItem({
   const { collapsed } = useContext(SidebarContext);
   const currentPath = usePathname() ?? '';
 
-  const active = isRouteActive(path, currentPath, end);
+  const active = isRouteActive(path, currentPath, end ?? false);
   const variant = active ? 'secondary' : 'ghost';
   const size = collapsed ? 'icon' : 'sm';
 
@@ -254,4 +254,4 @@ export function SidebarNavigation({
       })}
     </>
   );
-}
+}