[EASI-4534] System Profile: System home updates

package.json

@@ -212,5 +212,6 @@
       }
     },
     "globalSetup": "<rootDir>/jest-global-setup.js"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/features/Systems/SystemProfile/components/SystemData/__snapshots__/index.test.tsx.snap

@@ -230,7 +230,8 @@ exports[`System Data sub page for System Profile > matches snapshot 1`] = `
       </div>
     </div>
     <h3
-      class="margin-top-0 margin-bottom-1"
+      class="margin-top-0 margin-bottom-1 scroll-margin-top-6"
+      id="data-categories"
     >
       Data content categories
     </h3>
@@ -330,7 +331,7 @@ exports[`System Data sub page for System Profile > matches snapshot 1`] = `
               class="display-flex margin-bottom-3"
             >
               <span
-                class="easi-tag text-base-darker bg-base-lighter  display-flex flex-align-center"
+                class="easi-tag text-base-darker bg-base-lighter display-flex flex-align-center width-fit-content"
                 data-testid="tag"
               >
                 <svg
@@ -477,7 +478,7 @@ exports[`System Data sub page for System Profile > matches snapshot 1`] = `
               class="display-flex margin-bottom-3"
             >
               <span
-                class="easi-tag text-base-darker bg-base-lighter  display-flex flex-align-center"
+                class="easi-tag text-base-darker bg-base-lighter display-flex flex-align-center width-fit-content"
                 data-testid="tag"
               >
                 <svg

src/features/Systems/SystemProfile/components/SystemData/index.tsx

@@ -29,15 +29,15 @@ import { showSystemVal } from 'utils/showVal';
 // The majority of values rendered the components here are one-offs
 // sometimes due to changing source data
 
-function ExchangeDirectionTag({
+export function ExchangeDirectionTag({
   data
 }: {
   data: Exchange['exchangeDirection'];
 }) {
   const { t } = useTranslation('systemProfile');
 
   return (
-    <Tag className="text-base-darker bg-base-lighter  display-flex flex-align-center">
+    <Tag className="text-base-darker bg-base-lighter display-flex flex-align-center width-fit-content">
       {data === ExchangeDirection.RECEIVER && (
         <>
           <Icon.FileDownload className="margin-right-1" />
@@ -361,7 +361,10 @@ const SystemData = ({ system }: SystemProfileSubviewProps) => {
           </Grid>
         </Grid>
 
-        <h3 className="margin-top-0 margin-bottom-1">
+        <h3
+          className="margin-top-0 margin-bottom-1 scroll-margin-top-6"
+          id="data-categories"
+        >
           {t('singleSystem.systemData.dataCategories')}
         </h3>
         {system.cedarSoftwareProducts?.apiDataArea