From 1996d9ad1dc341ec2a7e47c55eb1e8d9f818b7f6 Mon Sep 17 00:00:00 2001
From: pkd2512 <PrasantaKumar.Dutta@thomsonreuters.com>
Date: Mon, 26 May 2025 16:13:06 +0100
Subject: [PATCH 1/2] layout edits

---
 src/components/Headpile/Headpile.svelte  |  9 +---
 src/components/Headpile/Headshot.svelte  | 24 +++++-----
 src/components/Headpile/KeyFigure.svelte | 57 +++++++++---------------
 3 files changed, 34 insertions(+), 56 deletions(-)

diff --git a/src/components/Headpile/Headpile.svelte b/src/components/Headpile/Headpile.svelte
index b1f4965d..1c57229b 100644
--- a/src/components/Headpile/Headpile.svelte
+++ b/src/components/Headpile/Headpile.svelte
@@ -63,7 +63,7 @@
 </script>
 
 <Block class={cls} {id} {width}>
-  <div class="figures">
+  <div class="figures fmy-6">
     {#each figures as figure}
       <KeyFigure {...{ ...figure, colour: figure.colour ?? colour }} />
     {/each}
@@ -76,11 +76,6 @@
   div.figures {
     display: flex;
     flex-direction: column;
-    gap: 40px;
-    @include mixins.fpt-4;
-    @media (max-width: 600px) {
-      gap: 0px;
-      padding-block-start: 0;
-    }
+    gap: 2rem;
   }
 </style>
diff --git a/src/components/Headpile/Headshot.svelte b/src/components/Headpile/Headshot.svelte
index e7293a92..dd2affff 100644
--- a/src/components/Headpile/Headshot.svelte
+++ b/src/components/Headpile/Headshot.svelte
@@ -9,22 +9,22 @@
 
 <style lang="scss">
   .headshot-wrapper {
-    width: 100px;
-    height: 120px;
+    width: 7rem;
+    height: 6.75rem;
     position: relative;
-    margin-top: -46px;
-    margin-bottom: -46px;
-    border-radius: 4px;
+    margin-block-start: -1.75rem;
+    margin-block-end: -1.75rem;
+    border-radius: 0.25rem;
     overflow: hidden;
   }
   .background {
     position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100px;
-    height: 70px;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    width: 7rem;
+    height: 4.75rem;
     display: inline-block;
-    border-radius: 4px;
+    border-radius: 0.25rem;
   }
   .headshot {
     display: inline-block;
@@ -34,8 +34,8 @@
     background-position: center bottom;
     background-repeat: no-repeat;
     position: absolute;
-    bottom: 0;
-    left: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
     overflow: hidden;
   }
 </style>
diff --git a/src/components/Headpile/KeyFigure.svelte b/src/components/Headpile/KeyFigure.svelte
index 093e21c2..356c2ff5 100644
--- a/src/components/Headpile/KeyFigure.svelte
+++ b/src/components/Headpile/KeyFigure.svelte
@@ -22,8 +22,12 @@
       <Headshot {img} {colour} />
     </div>
     <div class="text">
-      <div class="title">{name}</div>
-      <div class="role">{role || ''}</div>
+      <div class="title font-bold text-base leading-none">{name}</div>
+      <div
+        class="role font-note text-secondary text-sm font-light leading-tighter fmb-4 mt-1 pt-1"
+      >
+        {role || ''}
+      </div>
       {#if !mobile.current}
         <div class="description desktop">
           <Markdown source={text} />
@@ -46,57 +50,40 @@
     display: flex;
     align-items: flex-start;
     justify-content: start;
-    gap: 20px;
+    gap: 1rem;
     width: 100%;
-    min-height: 100px;
-    @media (max-width: 600px) {
-      align-items: center;
-      margin-bottom: 10px;
-      .text {
-        flex-grow: 1;
-        margin-top: 20px;
-      }
-    }
+    min-height: 5.5rem;
   }
 
   .title {
-    @include mixins.font-bold;
-    @include mixins.text-base;
-    line-height: 1.125;
+    @media (max-width: 450px) {
+      font-size: calc(0.9 * var(--theme-font-size-base, 1rem));
+    }
   }
 
   .role {
-    border-top: 1px solid #dedede;
-    margin-top: 5px;
-    padding-top: 5px;
-    margin-left: -10px;
-    padding-left: 10px;
-    @include mixins.fmb-2;
-    @include mixins.font-note;
-    @include mixins.text-sm;
-    @include mixins.text-secondary;
-    font-weight: 300;
-    line-height: 1.25;
-    @media (max-width: 600px) {
-      margin-left: 0px;
-      padding-left: 0;
-      @include mixins.fmb-4;
+    border-block-start: 0.5px solid var(--tr-muted-grey);
+    margin-inline-start: -0.75rem;
+    padding-inline-start: 0.75rem;
+
+    @media (max-width: 450px) {
+      @include mixins.text-xs;
     }
   }
 
   .description {
-    @include mixins.fmb-3;
     :global(p) {
       @include mixins.font-note;
-      font-size: calc(0.925 * var(--theme-font-size-base, 1rem));
+      font-size: calc(0.9 * var(--theme-font-size-base, 1rem));
       font-weight: 300;
+      @include mixins.fmb-0;
+      text-wrap: pretty;
     }
     &.desktop {
       display: block;
     }
     &.mobile {
       display: none;
-      @include mixins.fmt-2;
     }
     @media (max-width: 600px) {
       &.desktop {
@@ -107,8 +94,4 @@
       }
     }
   }
-
-  .text {
-    margin-bottom: -20px;
-  }
 </style>

From 346e52310ee3af5355db58edc2d34e1235da2517 Mon Sep 17 00:00:00 2001
From: pkd2512 <PrasantaKumar.Dutta@thomsonreuters.com>
Date: Tue, 27 May 2025 13:28:41 +0100
Subject: [PATCH 2/2] fixes scss pattern

---
 src/components/Headpile/Headpile.svelte  |  4 ++--
 src/components/Headpile/KeyFigure.svelte | 19 +++++++++++++++----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/Headpile/Headpile.svelte b/src/components/Headpile/Headpile.svelte
index 1c57229b..a9303f80 100644
--- a/src/components/Headpile/Headpile.svelte
+++ b/src/components/Headpile/Headpile.svelte
@@ -62,8 +62,8 @@
   }: Props = $props();
 </script>
 
-<Block class={cls} {id} {width}>
-  <div class="figures fmy-6">
+<Block class="fmy-6 {cls} {id} {width}">
+  <div class="figures">
     {#each figures as figure}
       <KeyFigure {...{ ...figure, colour: figure.colour ?? colour }} />
     {/each}
diff --git a/src/components/Headpile/KeyFigure.svelte b/src/components/Headpile/KeyFigure.svelte
index 356c2ff5..14e62666 100644
--- a/src/components/Headpile/KeyFigure.svelte
+++ b/src/components/Headpile/KeyFigure.svelte
@@ -22,10 +22,8 @@
       <Headshot {img} {colour} />
     </div>
     <div class="text">
-      <div class="title font-bold text-base leading-none">{name}</div>
-      <div
-        class="role font-note text-secondary text-sm font-light leading-tighter fmb-4 mt-1 pt-1"
-      >
+      <div class="title">{name}</div>
+      <div class="role">
         {role || ''}
       </div>
       {#if !mobile.current}
@@ -56,6 +54,10 @@
   }
 
   .title {
+    @include mixins.font-bold;
+    @include mixins.text-base;
+    @include mixins.leading-none;
+
     @media (max-width: 450px) {
       font-size: calc(0.9 * var(--theme-font-size-base, 1rem));
     }
@@ -65,6 +67,15 @@
     border-block-start: 0.5px solid var(--tr-muted-grey);
     margin-inline-start: -0.75rem;
     padding-inline-start: 0.75rem;
+    margin-block-start: 0.25rem;
+    padding-block-start: 0.25rem;
+
+    @include mixins.font-note;
+    @include mixins.text-secondary;
+    @include mixins.text-sm;
+    @include mixins.font-light;
+    @include mixins.leading-tighter;
+    @include mixins.fmb-4;
 
     @media (max-width: 450px) {
       @include mixins.text-xs;