Fix settings header/body width mismatch and tighten back-arrow gap

Move the header's horizontal padding onto the inner content row so the
constrained column matches the body's max-w column exactly (previously the
header column was 32px wider than the body content under the narrow
max-w-3xl layout). Reduce the back-arrow-to-title gap from gap-4 to gap-1.5.
Migrate EventDashboard's header layout classes from className to
contentClassName to match the new model.

src/components/PageHeader.tsx

@@ -35,11 +35,11 @@ interface PageHeaderProps {
  * to provide a consistent header layout.
  */
 export function PageHeader({ title, icon, titleContent, backTo = '/', onBack, alwaysShowBack, children, className, contentClassName }: PageHeaderProps) {
-  const backButtonClass = cn('p-2 -ml-2 rounded-full hover:bg-secondary transition-colors', !alwaysShowBack && 'sidebar:hidden');
+  const backButtonClass = cn('p-2 -ml-2 rounded-full hover:bg-secondary transition-colors shrink-0', !alwaysShowBack && 'sidebar:hidden');
 
   return (
-    <div className={cn('px-4 py-4 bg-background/85', className)}>
-      <div className={cn('flex items-center gap-4', contentClassName)}>
+    <div className={cn('py-4 bg-background/85', className)}>
+      <div className={cn('flex items-center gap-1.5 px-4', contentClassName)}>
         {onBack ? (
           <button onClick={onBack} className={backButtonClass} aria-label="Go back">
             <ArrowLeft className="size-5" />

src/pages/EventDashboardPage.tsx

@@ -51,13 +51,13 @@ export function EventDashboardPage() {
     </div>
   );
 
-  const headerClassName = 'max-w-5xl mx-auto sm:px-6';
+  const headerContentClassName = 'max-w-5xl mx-auto w-full sm:px-6';
 
   // Error state
   if (error && kpis.totalPosts === 0) {
     return (
       <main className="min-h-screen pb-16 sidebar:pb-0">
-        <PageHeader title="Dashboard" icon={<Activity className="size-5" />} className={headerClassName}>
+        <PageHeader title="Dashboard" icon={<Activity className="size-5" />} contentClassName={headerContentClassName}>
           {headerActions}
         </PageHeader>
         <div className="px-4 sm:px-6 py-6 max-w-5xl mx-auto">
@@ -80,7 +80,7 @@ export function EventDashboardPage() {
 
   return (
     <main className="min-h-screen pb-16 sidebar:pb-0">
-      <PageHeader title="Dashboard" icon={<Activity className="size-5" />} className={headerClassName}>
+      <PageHeader title="Dashboard" icon={<Activity className="size-5" />} contentClassName={headerContentClassName}>
         {headerActions}
       </PageHeader>
 

src/pages/VerifierSettingsPage.tsx

@@ -48,8 +48,7 @@ export function VerifierSettingsPage() {
         <PageHeader
           backTo="/settings"
           alwaysShowBack
-          className="sm:px-6"
-          contentClassName="max-w-2xl mx-auto w-full"
+          contentClassName="max-w-2xl mx-auto w-full sm:px-6"
           titleContent={
             <div className="flex-1 min-w-0">
               <h1 className="text-xl font-bold">{t('verifier.title')}</h1>
@@ -115,8 +114,7 @@ export function VerifierSettingsPage() {
       <PageHeader
         backTo="/settings"
         alwaysShowBack
-        className="sm:px-6"
-        contentClassName="max-w-2xl mx-auto w-full"
+        contentClassName="max-w-2xl mx-auto w-full sm:px-6"
         titleContent={
           <div className="flex-1 min-w-0">
             <h1 className="text-xl font-bold">{t('verifier.title')}</h1>