[NTP] Fix formatting for fingerprinting details header (#35176)

components/brave_shields/resources/panel_new/components/details_header.tsx

@@ -38,9 +38,9 @@ export function DetailsHeader(props: Props) {
         <div className='text'>
           <h4>{props.title}</h4>
           <div className='host overflow-ellipsis-start'>{host}</div>
+          {props.children}
         </div>
       </div>
-      {props.children}
     </div>
   )
 }

components/brave_shields/resources/panel_new/components/fingerprinting_details.style.ts

@@ -3,7 +3,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-import { color, font } from '@brave/leo/tokens/css/variables'
+import { font } from '@brave/leo/tokens/css/variables'
 import { scoped } from '$web-common/scoped_css'
 
 export const style = scoped.css`
@@ -32,11 +32,11 @@ export const style = scoped.css`
 
 style.passthrough.css`
   p.header-text {
+    margin-top: 16px;
     font: ${font.small.regular};
 
     button {
       text-decoration: underline;
-      color: ${color.text.interactive};
     }
   }
 `

components/brave_shields/resources/panel_new/components/fingerprinting_details.tsx

@@ -73,7 +73,7 @@ export function FingerprintingDetails(props: Props) {
         onBack={props.onBack}
       >
         <p className='header-text'>
-          {getString('BRAVE_SHIELDS_FINGERPRINTING_LIST_DESCRIPTION')}
+          {getString('BRAVE_SHIELDS_FINGERPRINTING_LIST_DESCRIPTION')}{' '}
           <button onClick={() => api.openTab(learnMoreUrl)}>
             {getString('BRAVE_SHIELDS_LEARN_MORE_LINK_TEXT')}
           </button>