@jmruthers/pace-core 0.5.125 → 0.5.127

package/src/components/DataTable/components/UnifiedTableBody.tsx

@@ -212,7 +212,8 @@ function SelectEditField<TData extends DataRecord>({
           };
           
           const hasMatch = (columnDef.fieldOptions || []).some(checkMatch);
-          const shouldShow = !hasMatch && isCreatable && !!columnDef.onCreateNew;
+          // Always show create option when there's a search term (user might want to create even if matches exist)
+          const shouldShow = isCreatable && !!columnDef.onCreateNew;
           
           // Debug logging for creatable select
           if (import.meta.env.MODE === 'development' && isCreatable) {
@@ -223,7 +224,8 @@ function SelectEditField<TData extends DataRecord>({
               isCreatable,
               hasOnCreateNew: !!columnDef.onCreateNew,
               shouldShow,
-              fieldOptionsCount: columnDef.fieldOptions?.length || 0
+              fieldOptionsCount: columnDef.fieldOptions?.length || 0,
+              note: 'Create option shows when search term exists, regardless of matches'
             });
           }
           
@@ -259,7 +261,8 @@ function SelectEditField<TData extends DataRecord>({
           };
           
           const hasMatch = (columnDef.fieldOptions || []).some(checkMatch);
-          const shouldShow = !hasMatch && isCreatable && !!columnDef.onCreateNew;
+          // Always show create option when there's a search term (user might want to create even if matches exist)
+          const shouldShow = isCreatable && !!columnDef.onCreateNew;
           setShowCreateOption(shouldShow);
         } else {
           setShowCreateOption(false);

package/src/components/Dialog/Dialog.tsx

@@ -617,24 +617,11 @@ const DialogBody = ({
       return null;
     }
 
-    console.log('🔍 Dialog HTML Debug:', {
-      originalHtml: htmlContent,
-      allowHtml,
-      strictSanitization,
-      logWarnings
-    });
-
     const result = renderSafeHtml(htmlContent, {
       strict: strictSanitization,
       logWarnings
     });
 
-    console.log('🔍 Dialog HTML Result:', {
-      sanitizedHtml: result.html,
-      isValid: result.isValid,
-      warnings: result.warnings
-    });
-
     return result.html;
   }, [htmlContent, allowHtml, strictSanitization, logWarnings]);
 

package/src/components/FileDisplay/FileDisplay.tsx

@@ -502,7 +502,51 @@ function FileDisplayPublic({
   const publicPageContext = useContext(PublicPageContext);
   const supabase = publicPageContext?.supabase ?? null;
 
+  // Step 4: Log Supabase client context
+  console.log('[FileDisplayPublic] Supabase Client Context:', {
+    hasPublicPageContext: !!publicPageContext,
+    hasSupabaseClient: !!supabase,
+    supabaseUrl: publicPageContext?.environment?.supabaseUrl || 'not available',
+    hasAnonKey: !!publicPageContext?.environment?.supabaseKey,
+    hasAuth: !!supabase?.auth,
+    organisation_id,
+    table_name,
+    record_id,
+    category,
+    context: 'public_page_anonymous_user',
+    note: 'Public pages use anonymous Supabase client (no user session)'
+  });
+
   if (!supabase) {
+    // If fallback is enabled, show fallback UI instead of error
+    if (showFallback) {
+      return (
+        <FileDisplayContent
+          isLoading={false}
+          error={null}
+          fileUrl={null}
+          fileReference={null}
+          fileReferences={[]}
+          fileUrls={new Map()}
+          fileCount={0}
+          category={category}
+          displayOnly={displayOnly}
+          showDelete={false}
+          className={className}
+          children={children}
+          onDelete={undefined}
+          organisation_id={organisation_id}
+          loadingComponent={loadingComponent}
+          errorComponent={errorComponent}
+          showFallback={showFallback}
+          generateFallbackText={generateFallbackText}
+          fallbackText={fallbackText}
+          fallbackSize={fallbackSize}
+        />
+      );
+    }
+    
+    // Only show error if fallback is not enabled
     return (
       <div className={`text-sec-500 text-center p-4 ${className}`}>
         Supabase client not available in public context
@@ -527,6 +571,38 @@ function FileDisplayPublic({
     { supabase }
   );
 
+  // Log errors for debugging public file display issues
+  if (error) {
+    console.error('[FileDisplayPublic] Error fetching file:', {
+      table_name,
+      record_id,
+      organisation_id,
+      category,
+      error: error.message,
+      errorStack: error.stack
+    });
+  }
+
+  // Log when file is successfully loaded
+  if (fileUrl && !isLoading && !error) {
+    console.log('[FileDisplayPublic] File loaded successfully:', {
+      table_name,
+      record_id,
+      category,
+      fileUrl: fileUrl.substring(0, 50) + '...' // Truncate URL for logging
+    });
+  }
+
+  // Log when no file is found (but not an error - might be expected)
+  if (!isLoading && !error && !fileUrl && !fileReference) {
+    console.log('[FileDisplayPublic] No file found (will show fallback if enabled):', {
+      table_name,
+      record_id,
+      category,
+      showFallback
+    });
+  }
+
   // Public context doesn't support delete operations
   const handleDelete = async () => {
     // Delete operations are not available in public context for security reasons

package/src/components/Header/Header.tsx

@@ -137,6 +137,11 @@ export interface HeaderProps {
  * A flexible header component that supports various configurations including custom logos,
  * navigation menus, user authentication, event selection, and custom actions.
  * 
+ * **Logo Display:** When used via PaceAppLayout, the logo URL is automatically constructed
+ * from the appName prop as `/${appName.toLowerCase()}_logo_wide.svg`. The appName should
+ * come from an APP_NAME constant declared in your App.tsx file to ensure consistency across
+ * authenticated and public pages.
+ * 
  * Features:
  * - Customizable logo (URL or custom component)
  * - Clickable logo that automatically routes to dashboard (configurable via logoHref)

package/src/components/PaceAppLayout/PaceAppLayout.tsx

@@ -202,6 +202,11 @@ export interface PaceAppLayoutProps {
  * Outlet to render child routes. It provides integrated authentication, navigation,
  * and user management functionality.
  * 
+ * **Important:** The appName prop should use an APP_NAME constant declared in your App.tsx
+ * file. This ensures consistency with public pages (via PublicPageProvider) which should
+ * also receive the same APP_NAME constant. The logo URL is automatically constructed as
+ * `/${appName.toLowerCase()}_logo_wide.svg` from the public folder.
+ * 
  * Features:
  * - React Router v6 integration with nested routing
  * - Unified authentication integration
@@ -219,17 +224,20 @@ export interface PaceAppLayoutProps {
  * ```tsx
  * import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
  * import { UnifiedAuthProvider } from '@jmruthers/pace-core/providers';
- * import { PaceAppLayout, PaceLoginPage } from '@jmruthers/pace-core';
+ * import { PaceAppLayout, PaceLoginPage, PublicPageApp } from '@jmruthers/pace-core';
+ * 
+ * const APP_NAME = 'CORE';
  * 
  * function App() {
  *   return (
- *     <UnifiedAuthProvider supabaseClient={supabase} appName="My App">
+ *     <UnifiedAuthProvider supabaseClient={supabase} appName={APP_NAME}>
  *       <Router>
  *         <Routes>
- *           <Route path="/login" element={<PaceLoginPage appName="My App" />} />
+ *           <Route path="/login" element={<PaceLoginPage appName={APP_NAME} />} />
+ *           <Route path="/events/*" element={<PublicPageApp appName={APP_NAME} />} />
  *           <Route path="/" element={
  *             <PaceAppLayout 
- *               appName="My Application"
+ *               appName={APP_NAME}
  *               enforcePermissions={true}
  *               defaultPermission="read"
  *             />
@@ -448,18 +456,6 @@ export function PaceAppLayout({
     }
 
     // NEW: Phase 1 - Enhanced Security Features
-    // Log page access attempt for audit
-    if (auditLog) {
-      console.log(`[PaceAppLayout] Page access attempt:`, {
-        pageName: currentPageId,
-        operation: currentRoutePermission,
-        userId: user?.id,
-        allowed: can,
-        strictMode,
-        timestamp: new Date().toISOString()
-      });
-    }
-    
     // Handle strict mode violations
     if (strictMode && !can) {
       console.error(`[PaceAppLayout] STRICT MODE VIOLATION: User attempted to access protected page without permission`, {
@@ -568,16 +564,6 @@ export function PaceAppLayout({
           // Check permission map (super admin check already handled in getPermissionMap)
           const hasAccess = permissionMap['*'] === true || permissionMap[fullPermission] === true;
           
-          if (auditLog) {
-            console.log(`[PaceAppLayout] Navigation filtering:`, {
-              item: item.label,
-              href: item.href,
-              pageId,
-              permission: fullPermission,
-              hasAccess,
-            });
-          }
-          
           return { item, hasAccess };
         });
 
@@ -692,19 +678,6 @@ export function PaceAppLayout({
         navigate(fallbackRoute, { replace: true });
         return;
       }
-      
-      // Log route access attempt for audit
-      if (auditLog) {
-        console.log(`[PaceAppLayout] Route access attempt:`, {
-          route: currentPath,
-          userId: user?.id,
-          allowed: hasAccess,
-          permissions: currentRoute.permissions,
-          roles: currentRoute.roles,
-          accessLevel: currentRoute.accessLevel,
-          timestamp: new Date().toISOString()
-        });
-      }
     };
     
     checkRouteAccess();

package/src/components/PublicLayout/PublicPageFooter.tsx

@@ -90,7 +90,7 @@ export function PublicPageFooter({
   const copyrightText = copyright || `© Copyright 2022–${year} all rights reserved, ${companyName}.`;
 
   return (
-    <footer className={cn('mt-8 py-6 flex justify-center border-t border-border bg-main-100', className)}>
+    <footer className={cn('mt-8 py-6 flex justify-center', className)}>
       <section className='px-4 w-[min(var(--app-width),100%)] mx-auto text-center'>
         {logo && (
           <img src={logo} alt="Logo" className="h-8 w-auto" />

package/src/components/PublicLayout/PublicPageHeader.tsx

@@ -17,40 +17,24 @@
  *
  * @example
  * ```tsx
- * import { PublicPageHeader, FileDisplay } from '@jmruthers/pace-core';
- *
+ * import { PublicPageHeader, PublicPageProvider } from '@jmruthers/pace-core';
+ * 
+ * const APP_NAME = 'CORE';
+ * 
  * function PublicEventPage() {
  *   return (
- *     <PublicPageHeader 
- *       event={event}
- *       title="Event Details"
- *       description="Public information about this event"
- *       showEventLogo={true}
- *     />
+ *     <PublicPageProvider appName={APP_NAME}>
+ *       <PublicPageHeader 
+ *         event={event}
+ *         title="Event Details"
+ *         description="Public information about this event"
+ *         showEventLogo={true}
+ *       />
+ *     </PublicPageProvider>
  *   );
  * }
  * ```
  * 
- * @example
- * ```tsx
- * // Using custom logo URL
- * <PublicPageHeader 
- *   event={event}
- *   logoUrl="/custom-logo.svg"
- *   logoAlt="My Custom Logo"
- *   logoHref="/"
- * />
- * ```
- * 
- * @example
- * ```tsx
- * // Using custom logo component
- * <PublicPageHeader 
- *   event={event}
- *   customAppLogo={<CustomLogoComponent />}
- *   logoHref="/dashboard"
- * />
- * ```
  *
  * @accessibility
  * - WCAG 2.1 AA compliant
@@ -67,7 +51,6 @@
  */
 
 import React, { ReactNode } from 'react';
-import { Link } from 'react-router-dom';
 import type { Event } from '../../types/unified';
 import { FileDisplay } from '../FileDisplay/FileDisplay';
 import { FileCategory } from '../../types/file-reference';
@@ -91,16 +74,8 @@ export interface PublicPageHeaderProps {
   className?: string;
   /** Custom content to display in the header */
   children?: ReactNode;
-  /** Custom app logo component (overrides logoUrl and auto-generated path) */
-  customAppLogo?: ReactNode;
   /** Custom event logo component */
   customEventLogo?: ReactNode;
-  /** URL to the app logo image (overrides auto-generated path, but customAppLogo takes precedence) */
-  logoUrl?: string;
-  /** Alt text for the app logo (defaults to appName from useAppConfig) */
-  logoAlt?: string;
-  /** URL to navigate to when app logo is clicked */
-  logoHref?: string;
 }
 
 /**
@@ -109,14 +84,18 @@ export interface PublicPageHeaderProps {
  * This component displays the app logo, event logo, and event information
  * in a clean, accessible layout suitable for public pages.
  * 
- * Logo handling follows a priority order:
- * 1. customAppLogo prop (if provided) - highest priority
- * 2. logoUrl prop (if provided) - direct URL override
- * 3. Auto-generated path from appName via useAppConfig() - convention-based
- * 4. Default SVG fallback - lowest priority
+ * The app logo is automatically generated from the appName using the pattern:
+ * `/{appName.toLowerCase()}_logo_wide.svg` from the public folder.
  * 
- * The logo can be made clickable by providing the logoHref prop, which will
- * wrap the logo in a Link component for navigation.
+ * **Important:** The appName is obtained from PublicPageProvider context, which should
+ * receive the APP_NAME constant from your App.tsx file. This ensures consistency with
+ * authenticated pages that use the same APP_NAME constant.
+ * 
+ * **Event Logo Requirements:**
+ * - Event logo files must be marked as `is_public = true` in the `file_references` table
+ * - The RPC function `data_file_reference_by_category_list` must be accessible to the anonymous/public role
+ * - Storage bucket must allow public read access for logo files
+ * - If no public logo is available, a fallback UI with event initials will be displayed
  * 
  * @param props - Header configuration and content
  * @returns React element with public page header
@@ -130,83 +109,26 @@ export function PublicPageHeader({
   showAppLogo = true,
   className = '',
   children,
-  customAppLogo,
-  customEventLogo,
-  logoUrl,
-  logoAlt,
-  logoHref
+  customEventLogo
 }: PublicPageHeaderProps) {
   const { appName } = useAppConfig();
 
   return (
     <header className={cn(
-      " px-4 w-[min(var(--app-width),100%)] mx-auto bg-background border-b border-sec-200 grid grid-cols-[auto_1fr_auto]  place-items-center gap-2",
+
+      "w-full px-[max(0rem,calc((100vw-var(--app-width))/2-0.5rem))] grid grid-cols-[auto_1fr_auto]  place-items-center gap-2",
       className
     )}>
       
         {/* Top row with logos */}
 
           {/* App Logo */}
-          {showAppLogo && (
-            <>
-              {customAppLogo ? (
-                logoHref ? (
-                  <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity">
-                    {customAppLogo}
-                  </Link>
-                ) : (
-                  customAppLogo
-                )
-              ) : logoUrl ? (
-                logoHref ? (
-                  <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity">
-                    <img
-                      className="max-w-36 object-contain row-span-2"
-                      src={logoUrl}
-                      alt={logoAlt || appName}
-                    />
-                  </Link>
-                ) : (
-                  <img
-                    className="max-w-36 object-contain row-span-2"
-                    src={logoUrl}
-                    alt={logoAlt || appName}
-                  />
-                )
-              ) : appName ? (
-                logoHref ? (
-                  <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity">
-                    <img
-                      className="max-w-36 object-contain row-span-2"
-                      src={`/${appName.toLowerCase()}_logo_wide.svg`}
-                      alt={logoAlt || appName}
-                    />
-                  </Link>
-                ) : (
-                  <img
-                    className="max-w-36 object-contain row-span-2"
-                    src={`/${appName.toLowerCase()}_logo_wide.svg`}
-                    alt={logoAlt || appName}
-                  />
-                )
-              ) : (
-                logoHref ? (
-                  <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity">
-                    <img
-                      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-family='Arial' font-size='14' font-weight='bold'%3EL%3C/text%3E%3C/svg%3E"
-                      alt={logoAlt || 'Logo'}
-                      className="max-w-36 object-contain row-span-2"
-                    />
-                  </Link>
-                ) : (
-                  <img
-                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-family='Arial' font-size='14' font-weight='bold'%3EL%3C/text%3E%3C/svg%3E"
-                    alt={logoAlt || 'Logo'}
-                    className="max-w-36 object-contain row-span-2"
-                  />
-                )
-              )}
-            </>
+          {showAppLogo && appName && (
+            <img
+              className="ml-4 max-w-36 object-contain row-span-2"
+              src={`/${appName.toLowerCase()}_logo_wide.svg`}
+              alt={appName}
+            />
           )}
 
 
@@ -222,24 +144,43 @@ export function PublicPageHeader({
           {showEventLogo && event && (
             <>
               {customEventLogo || (
-                <FileDisplay
-                  table_name="event"
-                  record_id={event.event_id}
-                  organisation_id={event.organisation_id}
-                  category={FileCategory.EVENT_LOGOS}
-                  displayOnly={true}
-                  showFallback={true}
-                  fallbackSize="md"
-                  className="max-w-36 row-span-2"
-                  generateFallbackText={(fileName) => {
-                    if (!event.event_name) return 'EV';
-                    return event.event_name
-                      .split(/[\s\-_]+/)
-                      .map(word => word.charAt(0).toUpperCase())
-                      .join('')
-                      .substring(0, 3);
-                  }}
-                />
+                <>
+                  {/* Log organisation_id derivation chain for debugging */}
+                  {(() => {
+                    console.log('[PublicPageHeader] Organisation ID Derivation Chain:', {
+                      eventCode: eventCode,
+                      eventId: event.event_id,
+                      eventName: event.event_name,
+                      organisationId: event.organisation_id,
+                      organisationIdType: typeof event.organisation_id,
+                      organisationIdValid: !!event.organisation_id && event.organisation_id !== '',
+                      derivation: 'URL → eventCode → usePublicEvent → event.organisation_id → FileDisplay',
+                      note: 'Organisation ID is derived from event data fetched using event code from URL'
+                    });
+                    return null;
+                  })()}
+                  <FileDisplay
+                    table_name="event"
+                    record_id={event.event_id}
+                    organisation_id={event.organisation_id}
+                    category={FileCategory.EVENT_LOGOS}
+                    displayOnly={true}
+                    showFallback={true}
+                    fallbackSize="md"
+                    className="mr-4 max-w-36 row-span-2"
+                    generateFallbackText={(fileName) => {
+                      if (!event.event_name) return 'EV';
+                      return event.event_name
+                        .split(/[\s\-_]+/)
+                        .map(word => word.charAt(0).toUpperCase())
+                        .join('')
+                        .substring(0, 3);
+                    }}
+                    // Note: FileDisplay automatically detects public page context
+                    // and uses FileDisplayPublic component which queries only public files (is_public = true)
+                    // If no public logo is found, fallback UI with event initials will be displayed
+                  />
+                </>
               )}
             </>
           )}

package/src/components/PublicLayout/PublicPageLayout.tsx

@@ -159,13 +159,13 @@ export function PublicPageLayout({
     }
     return (
       <main className="flex flex-col items-center justify-center px-4 w-[min(var(--app-width),100%)] mx-auto py-8">
-        <div className="text-center">
+
           <h1>Event Not Found</h1>
           <p>
             The event code "{eventCode}" is invalid or the event is not available for public viewing.
           </p>
           <Button onClick={handleRefetch}>Try Again</Button>
-        </div>
+
       </main>
     );
   }
@@ -174,13 +174,13 @@ export function PublicPageLayout({
   if (!event && showValidationErrors) {
     return (
       <main className="flex flex-col items-center justify-center px-4 w-[min(var(--app-width),100%)] mx-auto py-8">
-        <div className="text-center">
+
           <h1>Event Not Available</h1>
           <p>
             This event is not available for public viewing.
           </p>
           {handleRefetch && <Button onClick={handleRefetch}>Try Again</Button>}
-        </div>
+
       </main>
     );
   }

package/src/components/PublicLayout/PublicPageProvider.tsx

@@ -20,9 +20,11 @@
  * ```tsx
  * import { PublicPageProvider } from '@jmruthers/pace-core';
  * 
+ * const APP_NAME = 'CORE';
+ * 
  * function PublicApp() {
  *   return (
- *     <PublicPageProvider>
+ *     <PublicPageProvider appName={APP_NAME}>
  *       <Routes>
  *         <Route path="/events/:eventCode/recipe-grid-report" element={<PublicRecipePage />} />
  *       </Routes>
@@ -40,6 +42,7 @@ import { PublicErrorBoundary } from './PublicErrorBoundary';
 interface PublicPageContextType {
   isPublicPage: true;
   supabase: ReturnType<typeof createClient<Database>> | null;
+  appName: string | null;
   environment: {
     supabaseUrl: string | null;
     supabaseKey: string | null;
@@ -50,6 +53,8 @@ export const PublicPageContext = createContext<PublicPageContextType | undefined
 
 export interface PublicPageProviderProps {
   children: ReactNode;
+  /** Application name for logo display and branding. Should match the APP_NAME constant used in App.tsx */
+  appName?: string;
 }
 
 /**
@@ -60,8 +65,9 @@ export interface PublicPageProviderProps {
  * - Provides environment variables for public data access
  * - Includes error boundary for graceful error handling
  * - Is completely separate from the main app context
+ * - Provides appName for consistent logo display
  */
-export function PublicPageProvider({ children }: PublicPageProviderProps) {
+export function PublicPageProvider({ children, appName }: PublicPageProviderProps) {
   // Get environment variables for public data access
   // Handle both Vite (import.meta.env) and Node.js (process.env) environments
   const getEnvVar = (key: string): string | undefined => {
@@ -90,12 +96,15 @@ export function PublicPageProvider({ children }: PublicPageProviderProps) {
       console.warn('[PublicPageProvider] Missing Supabase environment variables. Please ensure VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY are set in your environment.');
       return null;
     }
-    return createClient<Database>(supabaseUrl, supabaseKey);
+    const client = createClient<Database>(supabaseUrl, supabaseKey);
+    console.log('[PublicPageProvider] Supabase client created successfully for public pages');
+    return client;
   }, [supabaseUrl, supabaseKey]);
 
   const contextValue: PublicPageContextType = {
     isPublicPage: true,
     supabase,
+    appName: appName || null,
     environment: {
       supabaseUrl,
       supabaseKey

package/src/components/PublicLayout/__tests__/PublicPageFooter.test.tsx

@@ -188,7 +188,7 @@ describe('[component] PublicPageFooter', () => {
       const { container } = render(<PublicPageFooter event={mockEvent} />);
 
       const footer = container.firstChild as HTMLElement;
-      expect(footer).toHaveClass('mt-8', 'py-6', 'flex', 'justify-center', 'border-t', 'border-border', 'bg-main-100');
+      expect(footer).toHaveClass('mt-8', 'py-6', 'flex', 'justify-center');
     });
 
     it('has proper section structure', () => {

package/src/components/PublicLayout/__tests__/PublicPageHeader.test.tsx

@@ -155,21 +155,6 @@ describe('[component] PublicPageHeader', () => {
       expect(screen.queryByAltText('Test App')).not.toBeInTheDocument();
     });
 
-    it('shows custom app logo when provided', () => {
-      const customAppLogo = <div data-testid="custom-app-logo">Custom App Logo</div>;
-      
-      render(
-        <PublicPageHeader 
-          event={mockEvent} 
-          eventCode="EVENT123" 
-          customAppLogo={customAppLogo}
-        />
-      );
-
-      expect(screen.getByTestId('custom-app-logo')).toBeInTheDocument();
-      expect(screen.queryByAltText('Test App')).not.toBeInTheDocument();
-    });
-
     it('shows event logo by default', () => {
       render(
         <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
@@ -283,7 +268,7 @@ describe('[component] PublicPageHeader', () => {
       );
 
       const header = container.firstChild as HTMLElement;
-      expect(header).toHaveClass('bg-background', 'border-b', 'border-sec-200');
+      expect(header).toHaveClass('w-full', 'grid', 'grid-cols-[auto_1fr_auto]', 'place-items-center', 'gap-2');
     });
 
     it('has proper container structure', () => {
@@ -291,9 +276,9 @@ describe('[component] PublicPageHeader', () => {
         <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
       );
 
-      // The header itself has the container classes, not a nested div
+      // The header itself has the container classes with responsive padding
       const header = container.firstChild as HTMLElement;
-      expect(header).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto');
+      expect(header).toHaveClass('w-full', 'px-[max(0rem,calc((100vw-var(--app-width))/2-0.5rem))]');
     });
 
     it('has proper logo row structure', () => {