Page Header: do not add markup if the prop is not passed in

packages/ui/src/makerkit/page.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { cn } from '../lib/utils';
+import { If } from './if';
 
 export type PageLayoutStyle = 'sidebar' | 'header' | 'custom';
 
@@ -108,7 +109,7 @@ export function PageBody(
     className?: string;
   }>,
 ) {
-  const className = cn('w-full flex flex-col flex-1 lg:px-4', props.className);
+  const className = cn('flex w-full flex-1 flex-col lg:px-4', props.className);
 
   return <div className={className}>{props.children}</div>;
 }
@@ -161,8 +162,13 @@ export function PageHeader({
       )}
     >
       <div className={'flex flex-col'}>
-        <PageDescription>{description}</PageDescription>
-        <PageTitle>{title}</PageTitle>
+        <If condition={description}>
+          <PageDescription>{description}</PageDescription>
+        </If>
+
+        <If condition={title}>
+          <PageTitle>{title}</PageTitle>
+        </If>
       </div>
 
       {children}