From 552bcc196617766c3e05564727c0f389dd86211f Mon Sep 17 00:00:00 2001
From: j8seangel <jseangel@gmail.com>
Date: Wed, 18 Sep 2024 18:24:13 +0200
Subject: [PATCH] polish insight styles

---
 .../VesselGroupReportInsight.module.css       | 103 ----------------
 .../VesselGroupReportInsightCoverage.tsx      |   2 +-
 .../VesselGroupReportInsightFishing.tsx       |  24 ++--
 .../VesselGroupReportInsightFlagChange.tsx    |  53 ++++----
 .../insights/VesselGroupReportInsightGaps.tsx | 114 +++++++++---------
 .../insights/VesselGroupReportInsightIUU.tsx  |  35 +++---
 .../insights/VesselGroupReportInsightMOU.tsx  |  89 +++++++-------
 .../VesselGroupReportInsightVesselEvents.tsx  |   2 +-
 .../VesselGroupReportInsights.module.css      |  24 ++++
 .../vessel-group-report.slice.ts              |   2 +-
 .../src/collapsable/Collapsable.tsx           |   2 +-
 11 files changed, 196 insertions(+), 254 deletions(-)
 delete mode 100644 apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsight.module.css

diff --git a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsight.module.css b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsight.module.css
deleted file mode 100644
index 03fd61411e..0000000000
--- a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsight.module.css
+++ /dev/null
@@ -1,103 +0,0 @@
-.placeholder {
-  padding-block: var(--space-XL);
-}
-
-.disclaimer {
-  display: flex;
-  align-items: top;
-  margin: var(--space-L) var(--space-M);
-  font: var(--font-S);
-  color: var(--color-secondary-blue);
-}
-
-.disclaimer svg {
-  margin-top: 0.2rem;
-}
-
-.container {
-  padding-inline: var(--space-M);
-}
-
-.title {
-  padding-top: var(--space-M);
-}
-
-.insightContainer {
-  padding-block: var(--space-M);
-  border-bottom: var(--border);
-}
-
-.insightContainer:last-child {
-  border-bottom: none;
-  padding-bottom: var(--space-L);
-}
-
-.insightTitle {
-  display: flex;
-  align-items: center;
-}
-
-.coverageBar {
-  margin-top: var(--space-M);
-  position: relative;
-  width: 20rem;
-  height: 0.5rem;
-  border-radius: 0.5rem;
-  background-image: linear-gradient(90deg, rgba(22, 63, 137, 0.2) 0%, rgba(22, 63, 137, 0.8) 100%);
-}
-
-.coverageIndicator {
-  position: absolute;
-  width: 10rem;
-  transform: translate(-50%, -1.9rem);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.coverageDot {
-  width: 1.2rem;
-  height: 1.2rem;
-  border-radius: 0.6rem;
-  background: var(--color-primary-blue);
-  border: 1px solid var(--color-white);
-}
-
-.coverageLabel {
-  text-align: center;
-  line-height: 1;
-}
-
-.secondary {
-  color: var(--color-secondary-blue);
-}
-
-.eventDetailsList li {
-  padding-left: 0;
-  margin-left: var(--space-M);
-}
-
-.eventDetailsList li:not(:last-child) {
-  border-bottom: var(--border);
-}
-
-.seeMoreBtn {
-  top: 0.4rem;
-  margin-left: var(--space-XS);
-}
-
-.insightContainer .collapsable {
-  justify-content: flex-start;
-}
-
-.insightContainer .collapsable::before {
-  display: none;
-  content: '';
-}
-
-.insightContainer .collapsableLabel {
-  padding-left: 0;
-  font: var(--font-M);
-  color: var(--color-primary-blue);
-  text-transform: none;
-}
diff --git a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightCoverage.tsx b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightCoverage.tsx
index 985df1657d..92dcc62d80 100644
--- a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightCoverage.tsx
+++ b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightCoverage.tsx
@@ -5,7 +5,7 @@ import { ParsedAPIError } from '@globalfishingwatch/api-client'
 import InsightError from 'features/vessel/insights/InsightErrorMessage'
 import DataTerminology from 'features/vessel/identity/DataTerminology'
 import { selectFetchVesselGroupReportCoverageParams } from '../vessel-group-report.selectors'
-import styles from './VesselGroupReportInsight.module.css'
+import styles from './VesselGroupReportInsights.module.css'
 import VesselGroupReportInsightCoverageGraph from './VesselGroupReportInsightCoverageGraph'
 
 const VesselGroupReportInsightCoveragePlaceholder = () => {
diff --git a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightFishing.tsx b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightFishing.tsx
index 28f7952c39..7a8543a399 100644
--- a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightFishing.tsx
+++ b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightFishing.tsx
@@ -1,14 +1,16 @@
 import { useTranslation } from 'react-i18next'
 import { useGetVesselGroupInsightQuery } from 'queries/vessel-insight-api'
-import { Fragment, useState } from 'react'
+import { useState } from 'react'
+import cx from 'classnames'
 import { useSelector } from 'react-redux'
 import { ParsedAPIError } from '@globalfishingwatch/api-client'
 import { Collapsable } from '@globalfishingwatch/ui-components'
 import InsightError from 'features/vessel/insights/InsightErrorMessage'
 import DataTerminology from 'features/vessel/identity/DataTerminology'
+import { formatInfoField } from 'utils/info'
 import { selectVesselGroupReportData } from '../vessel-group-report.slice'
 import { selectFetchVesselGroupReportFishingParams } from '../vessel-group-report.selectors'
-import styles from './VesselGroupReportInsight.module.css'
+import styles from './VesselGroupReportInsights.module.css'
 import VesselGroupReportInsightPlaceholder from './VesselGroupReportInsightsPlaceholders'
 import VesselGroupReportInsightVesselEvents from './VesselGroupReportInsightVesselEvents'
 import {
@@ -53,18 +55,18 @@ const VesselGroupReportInsightFishing = () => {
 
   const getVesselGroupReportInsighFishingVessels = (vessels: VesselGroupReportInsightVessel[]) => {
     return (
-      <ul>
+      <ul className={cx(styles.nested, styles.row)}>
         {vessels.map((vessel) => {
           const vesselId = vessel.identity.id
           const isExpandedVessel = expandedVesselIds.includes(vesselId)
           return (
-            <li>
+            <li className={styles.row}>
               <Collapsable
                 id={vesselId}
                 open={isExpandedVessel}
                 className={styles.collapsable}
                 labelClassName={styles.collapsableLabel}
-                label={vessel.identity.nShipname}
+                label={formatInfoField(vessel.identity.shipname, 'name')}
                 onToggle={(isOpen, id) => {
                   setExpandedVesselIds((expandedIds) => {
                     return isOpen && id
@@ -105,14 +107,14 @@ const VesselGroupReportInsightFishing = () => {
       ) : error ? (
         <InsightError error={error as ParsedAPIError} />
       ) : (
-        <Fragment>
+        <div className={styles.nested}>
           {!vesselsWithNoTakeMpas || vesselsWithNoTakeMpas?.length === 0 ? (
-            <label>
+            <p className={cx(styles.secondary, styles.row)}>
               {t(
                 'vessel.insights.fishingEventsInNoTakeMpasEmpty',
                 'No fishing events detected in no-take MPAs'
               )}
-            </label>
+            </p>
           ) : (
             <Collapsable
               id="no-take-vessels"
@@ -135,12 +137,12 @@ const VesselGroupReportInsightFishing = () => {
           )}
           {!vesselsInRfmoWithoutKnownAuthorization ||
           !vesselsInRfmoWithoutKnownAuthorization?.length ? (
-            <label>
+            <p className={cx(styles.secondary, styles.row)}>
               {t(
                 'vessel.insights.fishingEventsInRfmoWithoutKnownAuthorizationEmpty',
                 'No fishing events detected outside known RFMO authorized areas'
               )}
-            </label>
+            </p>
           ) : (
             <Collapsable
               id="without-known-authorization-vessels"
@@ -162,7 +164,7 @@ const VesselGroupReportInsightFishing = () => {
               {getVesselGroupReportInsighFishingVessels(vesselsInRfmoWithoutKnownAuthorization)}
             </Collapsable>
           )}
-        </Fragment>
+        </div>
       )}
     </div>
   )
diff --git a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightFlagChange.tsx b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightFlagChange.tsx
index ec01aef1c3..864cfb118f 100644
--- a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightFlagChange.tsx
+++ b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightFlagChange.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { useGetVesselGroupInsightQuery } from 'queries/vessel-insight-api'
 import { useState } from 'react'
+import cx from 'classnames'
 import { useSelector } from 'react-redux'
 import { ParsedAPIError } from '@globalfishingwatch/api-client'
 import { Collapsable } from '@globalfishingwatch/ui-components'
@@ -11,7 +12,7 @@ import VesselIdentityFieldLogin from 'features/vessel/identity/VesselIdentityFie
 import { selectIsGuestUser } from 'features/user/selectors/user.selectors'
 import { selectVesselGroupReportData } from '../vessel-group-report.slice'
 import { selectFetchVesselGroupReportFlagChangeParams } from '../vessel-group-report.selectors'
-import styles from './VesselGroupReportInsight.module.css'
+import styles from './VesselGroupReportInsights.module.css'
 import VesselGroupReportInsightPlaceholder from './VesselGroupReportInsightsPlaceholders'
 import { selectVesselGroupReportFlagChangesVessels } from './vessel-group-report-insights.selectors'
 
@@ -46,36 +47,38 @@ const VesselGroupReportInsightFlagChange = () => {
       ) : error ? (
         <InsightError error={error as ParsedAPIError} />
       ) : !vesselsWithFlagChanges || vesselsWithFlagChanges.length === 0 ? (
-        <span className={styles.secondary}>
+        <span className={cx(styles.secondary, styles.nested, styles.row)}>
           {t(
             'vesselGroupReport.insights.flagChangesEmpty',
             'There are no vessels with flag changes'
           )}
         </span>
       ) : (
-        <Collapsable
-          id="no-take-vessels"
-          open={isExpanded}
-          className={styles.collapsable}
-          labelClassName={styles.collapsableLabel}
-          label={t('vesselGroupReport.insights.flagChangesCount', {
-            defaultValue: '{{vessels}} vessels had flag changes',
-            vessels: vesselsWithFlagChanges.length,
-          })}
-          onToggle={(isOpen) => isOpen !== isExpanded && setIsExpanded(!isExpanded)}
-        >
-          <ul>
-            {vesselsWithFlagChanges.map((vessel) => (
-              <li key={vessel.identity.id} className={styles.vessel}>
-                {formatInfoField(vessel.identity.shipname, 'name')} (
-                {vessel.flagsChanges?.valuesInThePeriod.map((v) =>
-                  formatInfoField(v.value, 'flag')
-                )}
-                )
-              </li>
-            ))}
-          </ul>
-        </Collapsable>
+        <div className={styles.nested}>
+          <Collapsable
+            id="no-take-vessels"
+            open={isExpanded}
+            className={styles.collapsable}
+            labelClassName={cx(styles.collapsableLabel, styles.row)}
+            label={t('vesselGroupReport.insights.flagChangesCount', {
+              defaultValue: '{{vessels}} vessels had flag changes',
+              vessels: vesselsWithFlagChanges.length,
+            })}
+            onToggle={(isOpen) => isOpen !== isExpanded && setIsExpanded(!isExpanded)}
+          >
+            <ul className={styles.nested}>
+              {vesselsWithFlagChanges.map((vessel) => (
+                <li key={vessel.identity.id} className={cx(styles.vessel, styles.row)}>
+                  {formatInfoField(vessel.identity.shipname, 'name')} (
+                  {vessel.flagsChanges?.valuesInThePeriod.map((v) =>
+                    formatInfoField(v.value, 'flag')
+                  )}
+                  )
+                </li>
+              ))}
+            </ul>
+          </Collapsable>
+        </div>
       )}
     </div>
   )
diff --git a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightGaps.tsx b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightGaps.tsx
index d273bb46cf..b0b79e15a4 100644
--- a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightGaps.tsx
+++ b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightGaps.tsx
@@ -1,14 +1,16 @@
 import { useTranslation } from 'react-i18next'
 import { useGetVesselGroupInsightQuery } from 'queries/vessel-insight-api'
 import { useState } from 'react'
+import cx from 'classnames'
 import { useSelector } from 'react-redux'
 import { ParsedAPIError } from '@globalfishingwatch/api-client'
 import { Collapsable } from '@globalfishingwatch/ui-components'
 import InsightError from 'features/vessel/insights/InsightErrorMessage'
 import DataTerminology from 'features/vessel/identity/DataTerminology'
+import { formatInfoField } from 'utils/info'
 import { selectVesselGroupReportData } from '../vessel-group-report.slice'
 import { selectFetchVesselGroupReportGapParams } from '../vessel-group-report.selectors'
-import styles from './VesselGroupReportInsight.module.css'
+import styles from './VesselGroupReportInsights.module.css'
 import VesselGroupReportInsightPlaceholder from './VesselGroupReportInsightsPlaceholders'
 import VesselGroupReportInsightVesselEvents from './VesselGroupReportInsightVesselEvents'
 import { selectVesselGroupReportGapVessels } from './vessel-group-report-insights.selectors'
@@ -36,64 +38,68 @@ const VesselGroupReportInsightGap = () => {
           terminologyKey="insightsGaps"
         />
       </div>
-      {isLoading ? (
+      {isLoading || !vesselGroup ? (
         <VesselGroupReportInsightPlaceholder />
       ) : error ? (
         <InsightError error={error as ParsedAPIError} />
       ) : !vesselsWithGaps || vesselsWithGaps?.length === 0 ? (
-        <label>{t('vessel.insights.gapsEventsEmpty', 'No AIS Off events detected')}</label>
+        <p className={cx(styles.nested, styles.secondary, styles.row)}>
+          {t('vessel.insights.gapsEventsEmpty', 'No AIS Off events detected')}
+        </p>
       ) : (
-        <Collapsable
-          id="gap-events"
-          open={isExpanded}
-          className={styles.collapsable}
-          labelClassName={styles.collapsableLabel}
-          label={t('vesselGroups.insights.gaps', {
-            defaultValue: '{{count}} AIS Off Event from {{vessels}} vessels detected',
-            count: vesselsWithGaps?.reduce(
-              (acc, vessel) => acc + vessel.periodSelectedCounters.eventsGapOff,
-              0
-            ),
-            vessels: vesselsWithGaps.length,
-          })}
-          onToggle={(isOpen) => isOpen !== isExpanded && setIsExpanded(!isExpanded)}
-        >
-          {vesselsWithGaps && vesselsWithGaps?.length > 0 && (
-            <ul>
-              {vesselsWithGaps.map((vessel) => {
-                const vesselId = vessel.identity.id
-                const isExpandedVessel = expandedVesselIds.includes(vesselId)
-                return (
-                  <li>
-                    <Collapsable
-                      id={vesselId}
-                      open={isExpandedVessel}
-                      className={styles.collapsable}
-                      labelClassName={styles.collapsableLabel}
-                      label={vessel.identity.nShipname}
-                      onToggle={(isOpen, id) => {
-                        setExpandedVesselIds((expandedIds) => {
-                          return isOpen && id
-                            ? [...expandedIds, id]
-                            : expandedIds.filter((vesselId) => vesselId !== id)
-                        })
-                      }}
-                    >
-                      {isExpandedVessel && vessel.datasets[0] && (
-                        <VesselGroupReportInsightVesselEvents
-                          vesselId={vesselId}
-                          datasetId={vessel.datasets[0]}
-                          start={fetchVesselGroupParams.start}
-                          end={fetchVesselGroupParams.end}
-                        />
-                      )}
-                    </Collapsable>
-                  </li>
-                )
-              })}
-            </ul>
-          )}
-        </Collapsable>
+        <div className={cx(styles.nested, styles.row)}>
+          <Collapsable
+            id="gap-events"
+            open={isExpanded}
+            className={styles.collapsable}
+            labelClassName={styles.collapsableLabel}
+            label={t('vesselGroups.insights.gaps', {
+              defaultValue: '{{count}} AIS Off Event from {{vessels}} vessels detected',
+              count: vesselsWithGaps?.reduce(
+                (acc, vessel) => acc + vessel.periodSelectedCounters.eventsGapOff,
+                0
+              ),
+              vessels: vesselsWithGaps.length,
+            })}
+            onToggle={(isOpen) => isOpen !== isExpanded && setIsExpanded(!isExpanded)}
+          >
+            {vesselsWithGaps && vesselsWithGaps?.length > 0 && (
+              <ul className={styles.nested}>
+                {vesselsWithGaps.map((vessel) => {
+                  const vesselId = vessel.identity.id
+                  const isExpandedVessel = expandedVesselIds.includes(vesselId)
+                  return (
+                    <li className={styles.row}>
+                      <Collapsable
+                        id={vesselId}
+                        open={isExpandedVessel}
+                        className={styles.collapsable}
+                        labelClassName={styles.collapsableLabel}
+                        label={formatInfoField(vessel.identity.shipname, 'name')}
+                        onToggle={(isOpen, id) => {
+                          setExpandedVesselIds((expandedIds) => {
+                            return isOpen && id
+                              ? [...expandedIds, id]
+                              : expandedIds.filter((vesselId) => vesselId !== id)
+                          })
+                        }}
+                      >
+                        {isExpandedVessel && vessel.datasets[0] && (
+                          <VesselGroupReportInsightVesselEvents
+                            vesselId={vesselId}
+                            datasetId={vessel.datasets[0]}
+                            start={fetchVesselGroupParams.start}
+                            end={fetchVesselGroupParams.end}
+                          />
+                        )}
+                      </Collapsable>
+                    </li>
+                  )
+                })}
+              </ul>
+            )}
+          </Collapsable>
+        </div>
       )}
     </div>
   )
diff --git a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightIUU.tsx b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightIUU.tsx
index c915ed33fd..5acbb65382 100644
--- a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightIUU.tsx
+++ b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightIUU.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { useGetVesselGroupInsightQuery } from 'queries/vessel-insight-api'
 import { useSelector } from 'react-redux'
+import cx from 'classnames'
 import { useState } from 'react'
 import { ParsedAPIError } from '@globalfishingwatch/api-client'
 import { Collapsable } from '@globalfishingwatch/ui-components'
@@ -8,7 +9,7 @@ import InsightError from 'features/vessel/insights/InsightErrorMessage'
 import DataTerminology from 'features/vessel/identity/DataTerminology'
 import { selectVesselGroupReportData } from '../vessel-group-report.slice'
 import { selectFetchVesselGroupReportIUUParams } from '../vessel-group-report.selectors'
-import styles from './VesselGroupReportInsight.module.css'
+import styles from './VesselGroupReportInsights.module.css'
 import VesselGroupReportInsightPlaceholder from './VesselGroupReportInsightsPlaceholders'
 import { selectVesselGroupReportIUUVessels } from './vessel-group-report-insights.selectors'
 import VesselGroupReportInsightVesselTable from './VesselGroupReportInsightVesselsTable'
@@ -40,26 +41,30 @@ const VesselGroupReportInsightIUU = () => {
       ) : error ? (
         <InsightError error={error as ParsedAPIError} />
       ) : !vesselsWithIIU || vesselsWithIIU.length === 0 ? (
-        <span className={styles.secondary}>
+        <span className={cx(styles.secondary, styles.nested, styles.row)}>
           {t(
             'vesselGroupReport.insights.IUUBlackListsEmpty',
             'No vessels are present on a RFMO IUU vessel list'
           )}
         </span>
       ) : (
-        <Collapsable
-          id="no-take-vessels"
-          open={isExpanded}
-          className={styles.collapsable}
-          labelClassName={styles.collapsableLabel}
-          label={t('vesselGroupReport.insights.IUUBlackListsCount', {
-            defaultValue: '{{vessels}} vessels are present on a RFMO IUU vessel list',
-            vessels: vesselsWithIIU.length,
-          })}
-          onToggle={(isOpen) => isOpen !== isExpanded && setIsExpanded(!isExpanded)}
-        >
-          <VesselGroupReportInsightVesselTable vessels={vesselsWithIIU} />
-        </Collapsable>
+        <div className={styles.nested}>
+          <Collapsable
+            id="no-take-vessels"
+            open={isExpanded}
+            className={styles.collapsable}
+            labelClassName={cx(styles.collapsableLabel, styles.row)}
+            label={t('vesselGroupReport.insights.IUUBlackListsCount', {
+              defaultValue: '{{vessels}} vessels are present on a RFMO IUU vessel list',
+              vessels: vesselsWithIIU.length,
+            })}
+            onToggle={(isOpen) => isOpen !== isExpanded && setIsExpanded(!isExpanded)}
+          >
+            <div className={styles.nested}>
+              <VesselGroupReportInsightVesselTable vessels={vesselsWithIIU} />
+            </div>
+          </Collapsable>
+        </div>
       )}
     </div>
   )
diff --git a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightMOU.tsx b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightMOU.tsx
index c22192c018..4708c5d570 100644
--- a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightMOU.tsx
+++ b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightMOU.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { useGetVesselGroupInsightQuery } from 'queries/vessel-insight-api'
-import { Fragment, useState } from 'react'
+import { useState } from 'react'
+import cx from 'classnames'
 import { useSelector } from 'react-redux'
 import { groupBy } from 'es-toolkit'
 import { ParsedAPIError } from '@globalfishingwatch/api-client'
@@ -12,7 +13,7 @@ import VesselIdentityFieldLogin from 'features/vessel/identity/VesselIdentityFie
 import { formatInfoField } from 'utils/info'
 import { selectVesselGroupReportData } from '../vessel-group-report.slice'
 import { selectFetchVesselGroupReportMOUParams } from '../vessel-group-report.selectors'
-import styles from './VesselGroupReportInsight.module.css'
+import styles from './VesselGroupReportInsights.module.css'
 import VesselGroupReportInsightPlaceholder from './VesselGroupReportInsightsPlaceholders'
 import {
   MOUInsightCountry,
@@ -40,17 +41,17 @@ const VesselsInMOUByCategory = ({
     <Collapsable
       open={expanded}
       className={styles.collapsable}
-      labelClassName={styles.collapsableLabel}
+      labelClassName={cx(styles.collapsableLabel, styles.row)}
       label={label}
       onToggle={onToggle}
     >
       {Object.keys(insightsByVessel)?.length > 0 && (
-        <ul>
+        <ul className={styles.nested}>
           {Object.values(insightsByVessel).map((insights) => {
             const name = formatInfoField(insights[0].vessel.shipname, 'name')
             const flags = Array.from(new Set(insights.map((i) => i.insight.reference)))
             return (
-              <li>
+              <li className={styles.row}>
                 {name} ({flags.map((f) => formatInfoField(f, 'flag')).join(',')})
               </li>
             )
@@ -100,17 +101,19 @@ const VesselGroupReportInsightMOU = () => {
       }
       const uniqVessels = Array.from(new Set(vesselInsights.map((v) => v.vessel.id)))
       return (
-        <VesselsInMOUByCategory
-          key={list}
-          insights={vesselInsights}
-          expanded={insightsExpanded.includes(`${country}-${list}`)}
-          onToggle={(isOpen) => onToggle(isOpen, list)}
-          label={t(`vesselGroupReport.insights.MOUListsCount`, {
-            vessels: uniqVessels.length,
-            list: t(`insights.lists.${list}`, list),
-            defaultValue: `{{vessels}} vessels operated under a flag present on the {{list}} list`,
-          })}
-        />
+        <div className={styles.nested}>
+          <VesselsInMOUByCategory
+            key={list}
+            insights={vesselInsights}
+            expanded={insightsExpanded.includes(`${country}-${list}`)}
+            onToggle={(isOpen) => onToggle(isOpen, list)}
+            label={t(`vesselGroupReport.insights.MOUListsCount`, {
+              vessels: uniqVessels.length,
+              list: t(`insights.lists.${list}`, list),
+              defaultValue: `{{vessels}} vessels operated under a flag present on the {{list}} list`,
+            })}
+          />
+        </div>
       )
     })
   }
@@ -133,32 +136,34 @@ const VesselGroupReportInsightMOU = () => {
       ) : error ? (
         <InsightError error={error as ParsedAPIError} />
       ) : (
-        <Fragment>
-          <label>{t('insights.countries.paris', 'Paris')}</label>
-          {hasVesselsInParisMOU ? (
-            getVesselsInMOU(MOUVesselsGrouped.paris, 'paris')
-          ) : (
-            <p>
-              {t('vesselGroupReport.insights.MOUListsEmpty', {
-                defaultValue:
-                  'No vessels flying under a flag present on the {{country}} MOU black or grey lists',
-                country: t('insights.countries.paris', 'Paris'),
-              })}
-            </p>
-          )}
-          <label>{t('insights.countries.tokyo', 'Tokyo')}</label>
-          {hasVesselsInTokyoMOU ? (
-            getVesselsInMOU(MOUVesselsGrouped.tokyo, 'tokyo')
-          ) : (
-            <p>
-              {t('vesselGroupReport.insights.MOUListsEmpty', {
-                defaultValue:
-                  'No vessels flying under a flag present on the {{country}} MOU black or grey lists',
-                country: t('insights.countries.tokyo', 'Tokyo'),
-              })}
-            </p>
-          )}
-        </Fragment>
+        <div className={styles.insightContent}>
+          <div className={styles.nested}>
+            <label className={styles.row}>{t('insights.countries.paris', 'Paris')}</label>
+            {hasVesselsInParisMOU ? (
+              getVesselsInMOU(MOUVesselsGrouped.paris, 'paris')
+            ) : (
+              <p className={cx(styles.secondary, styles.nested, styles.row)}>
+                {t('vesselGroupReport.insights.MOUListsEmpty', {
+                  defaultValue:
+                    'No vessels flying under a flag present on the {{country}} MOU black or grey lists',
+                  country: t('insights.countries.paris', 'Paris'),
+                })}
+              </p>
+            )}
+            <label className={styles.row}>{t('insights.countries.tokyo', 'Tokyo')}</label>
+            {hasVesselsInTokyoMOU ? (
+              getVesselsInMOU(MOUVesselsGrouped.tokyo, 'tokyo')
+            ) : (
+              <p className={cx(styles.secondary, styles.nested, styles.row)}>
+                {t('vesselGroupReport.insights.MOUListsEmpty', {
+                  defaultValue:
+                    'No vessels flying under a flag present on the {{country}} MOU black or grey lists',
+                  country: t('insights.countries.tokyo', 'Tokyo'),
+                })}
+              </p>
+            )}
+          </div>
+        </div>
       )}
     </div>
   )
diff --git a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightVesselEvents.tsx b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightVesselEvents.tsx
index 67849cde3d..c2b8cb0509 100644
--- a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightVesselEvents.tsx
+++ b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightVesselEvents.tsx
@@ -1,7 +1,7 @@
 import { useGetVesselEventsQuery } from 'queries/vessel-events-api'
 import { Spinner } from '@globalfishingwatch/ui-components'
 import VesselEvent from 'features/vessel/activity/event/Event'
-import styles from './VesselGroupReportInsight.module.css'
+import styles from './VesselGroupReportInsights.module.css'
 
 const VesselGroupReportInsightVesselEvents = ({
   ids,
diff --git a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsights.module.css b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsights.module.css
index 200a13b51d..295bea7b3b 100644
--- a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsights.module.css
+++ b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsights.module.css
@@ -10,6 +10,14 @@
   color: var(--color-secondary-blue);
 }
 
+.nested {
+  margin-left: var(--space-M);
+}
+
+.row {
+  margin-block: var(--space-XS);
+}
+
 .disclaimer svg {
   margin-top: 0.2rem;
 }
@@ -86,6 +94,22 @@
   margin-left: var(--space-XS);
 }
 
+.insightContainer .collapsable {
+  justify-content: flex-start;
+}
+
+.insightContainer .collapsable::before {
+  display: none;
+  content: '';
+}
+
+.insightContainer .collapsableLabel {
+  padding-left: 0;
+  font: var(--font-M);
+  color: var(--color-primary-blue);
+  text-transform: none;
+}
+
 .loadingPlaceholder {
   height: 1.2rem;
   border-radius: 0.8rem;
diff --git a/apps/fishing-map/features/vessel-group-report/vessel-group-report.slice.ts b/apps/fishing-map/features/vessel-group-report/vessel-group-report.slice.ts
index d6a000d686..d9003e292e 100644
--- a/apps/fishing-map/features/vessel-group-report/vessel-group-report.slice.ts
+++ b/apps/fishing-map/features/vessel-group-report/vessel-group-report.slice.ts
@@ -31,7 +31,7 @@ export const fetchVesselGroupReportThunk = createAsyncThunk(
     try {
       const vesselGroup = await GFWAPI.fetch<VesselGroup>(`/vessel-groups/${vesselGroupId}`)
       const vesselGroupVessels = await GFWAPI.fetch<APIPagination<IdentityVessel>>(
-        `/vessels?${stringify({ 'vessel-groups': [vesselGroupId], cache: false })}`,
+        `/vessels?${stringify({ 'vessel-groups': [vesselGroupId] })}`,
         { cache: 'reload' }
       )
       return {
diff --git a/libs/ui-components/src/collapsable/Collapsable.tsx b/libs/ui-components/src/collapsable/Collapsable.tsx
index 435d16849b..c024558a6c 100644
--- a/libs/ui-components/src/collapsable/Collapsable.tsx
+++ b/libs/ui-components/src/collapsable/Collapsable.tsx
@@ -27,7 +27,7 @@ export function Collapsable(props: CollapsableProps) {
     <details id={id} open={open} className={styles.details} onToggle={handleToggle}>
       <summary className={cx(styles.summary, className)}>
         <span className={cx(styles.label, labelClassName)}>{label}</span>
-        <Icon className={styles.icon} icon="arrow-down" />
+        <Icon className={cx(styles.icon, 'print-hidden')} icon="arrow-down" />
       </summary>
       {children}
     </details>