Unify page layouts, compact headers and shared UI styling

frontend/app/portal/PortalClient.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import PageHeading from '../ui/PageHeading'
+
 import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'
@@ -1463,23 +1465,11 @@ export default function PortalClient({ workspace }: PortalClientProps) {
 
   return (
     <main className={`card portal-page ${workspace === 'issue' ? 'issue-portal-page' : ''}`}>
-      <div className={`user-directory-panel-header ${workspace === 'issue' ? 'issue-portal-hero' : ''}`}>
-        <div>
-          {workspace === 'issue' ? <span className="section-kicker">Guided support</span> : null}
-          <h1>{workspace === 'request' ? 'Request portal' : 'What is going wrong?'}</h1>
-          <p className="lede">
-            {workspace === 'request'
-              ? 'Search and track content requests through the delivery pipeline.'
-              : 'Choose the symptom and Magent will collect the right details, check the media server when relevant, and recommend the next action.'}
-          </p>
-        </div>
-        {workspace === 'issue' ? (
-          <div className="issue-hero-count">
-            <strong>{visibleKindCount}</strong>
-            <span>reported issues</span>
-          </div>
-        ) : null}
-      </div>
+      <PageHeading
+        title={workspace === 'request' ? 'Request portal' : 'Issues'}
+        description={workspace === 'request' ? 'Search and track your content requests.' : 'Tell us what is wrong. We’ll guide you through the fix.'}
+        actions={workspace === 'issue' ? <span className="page-heading-meta">{visibleKindCount} reported {visibleKindCount === 1 ? 'issue' : 'issues'}</span> : undefined}
+      />
 
       {workspace === 'request' ? (
         <section className="portal-workspace-switch">