improve some texts + styles

packages/ui/src/makerkit/app-breadcrumbs.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Fragment } from 'react';
+import clsx from 'clsx';
 
 import { usePathname } from 'next/navigation';
 
@@ -52,9 +53,13 @@ export function AppBreadcrumbs(props: {
               />
             );
 
+          const isLast = index === visiblePaths.length - 1;
+
           return (
             <Fragment key={index}>
-              <BreadcrumbItem className={'capitalize lg:text-xs'}>
+              <BreadcrumbItem className={clsx('lg:text-xs', {
+                'font-bold text-black': isLast,
+              })}>
                 <If
                   condition={index < visiblePaths.length - 1}
                   fallback={label}
@@ -64,6 +69,7 @@ export function AppBreadcrumbs(props: {
                       '/' +
                       splitPath.slice(0, splitPath.indexOf(path) + 1).join('/')
                     }
+                    className='text-muted-foreground'
                   >
                     {label}
                   </BreadcrumbLink>
@@ -77,7 +83,7 @@ export function AppBreadcrumbs(props: {
                 </>
               )}
 
-              <If condition={index !== visiblePaths.length - 1}>
+              <If condition={!isLast}>
                 <BreadcrumbSeparator />
               </If>
             </Fragment>

packages/ui/src/makerkit/page.tsx

@@ -106,7 +106,7 @@ export function PageBody(
   }>,
 ) {
   const className = cn(
-    'flex w-full flex-1 flex-col space-y-6 lg:px-4',
+    'flex w-full flex-1 flex-col space-y-6',
     props.className,
   );
 
@@ -158,7 +158,7 @@ export function PageHeader({
   return (
     <div
       className={cn(
-        'flex items-center justify-between py-5 lg:px-4',
+        'flex items-center justify-between py-5',
         className,
       )}
     >