Add quotation marks to profile headline and capitalize suffix in profile details

web/components/profile-about.tsx

@@ -16,6 +16,7 @@ import {formatHeight, MeasurementSystem} from 'common/measurement-utils'
 import {Profile} from 'common/profiles/profile'
 import {Socials} from 'common/socials'
 import {UserActivity} from 'common/user'
+import {capitalize} from 'lodash'
 import {Home} from 'lucide-react'
 import React, {ReactNode} from 'react'
 import {BiSolidDrink} from 'react-icons/bi'
@@ -65,13 +66,13 @@ export function AboutRow(props: {
       t: t,
     })
   }
-  if (suffix) {
-    formattedText += formattedText ? ` (${suffix})` : suffix
-  }
   return (
     <Row className="items-start gap-2" data-testid={testId}>
       <div className="text-ink-600 w-5 mt-0.5">{icon}</div>
-      <div>{formattedText}</div>
+      <Col>
+        <div>{formattedText}</div>
+        {suffix && <div className={''}>"{capitalize(suffix)}"</div>}
+      </Col>
     </Row>
   )
 }

web/components/profile/profile-header.tsx

@@ -246,7 +246,7 @@ export default function ProfileHeader(props: {
       />
       {profile.headline && (
         <div className="italic max-w-3xl px-4 py-3" data-testid="profile-headline">
-          {profile.headline}
+          "{profile.headline}"
         </div>
       )}
       <Row className={'px-4 gap-2 flex-wrap py-2'} data-testid="profile-keywords">