diff --git a/apps/edr-freight-web/backoffice/src/components/page/PageHeader.tsx b/apps/edr-freight-web/backoffice/src/components/page/PageHeader.tsx
index 86beb22fb..2194930ec 100644
--- a/apps/edr-freight-web/backoffice/src/components/page/PageHeader.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/page/PageHeader.tsx
@@ -58,9 +58,15 @@ export function PageHeader({
{meta}
{subtitle ? (
-
- {subtitle}
-
+ typeof subtitle === "string" ? (
+
+ {subtitle}
+
+ ) : (
+ // A component subtitle handles its own layout — truncating it
+ // to one line would defeat e.g. an expandable description.
+
{subtitle}
+ )
) : null}
diff --git a/apps/edr-freight-web/backoffice/src/components/reports/ReportDescription.tsx b/apps/edr-freight-web/backoffice/src/components/reports/ReportDescription.tsx
new file mode 100644
index 000000000..69707dac8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/reports/ReportDescription.tsx
@@ -0,0 +1,27 @@
+import { Spoiler, Text } from "@mantine/core";
+
+interface ReportDescriptionProps {
+ text: string;
+}
+
+/**
+ * Report descriptions run to a paragraph. Clamps to roughly two lines and adds
+ * a Show more toggle — Spoiler measures the content, so the toggle only appears
+ * when the text actually overflows.
+ */
+export function ReportDescription({ text }: ReportDescriptionProps) {
+ return (
+
+
+ {text}
+
+
+ );
+}
+
+export default ReportDescription;
diff --git a/apps/edr-freight-web/backoffice/src/components/reports/ReportSection.tsx b/apps/edr-freight-web/backoffice/src/components/reports/ReportSection.tsx
index e686bc9d0..09da81439 100644
--- a/apps/edr-freight-web/backoffice/src/components/reports/ReportSection.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/reports/ReportSection.tsx
@@ -1,8 +1,9 @@
-import { Stack, Text, Title } from "@mantine/core";
+import { Stack, Title } from "@mantine/core";
import { useQuery } from "@tanstack/react-query";
import { api } from "@/services/api";
+import { ReportDescription } from "./ReportDescription";
import { ReportView } from "./ReportView";
interface ReportSectionProps {
@@ -29,9 +30,7 @@ export function ReportSection({ reportKey, idKeyValue, defaultView }: ReportSect
{def.title}
-
- {def.description}
-
+
diff --git a/apps/edr-freight-web/backoffice/src/components/reports/ReportView.tsx b/apps/edr-freight-web/backoffice/src/components/reports/ReportView.tsx
index 2634e882c..2c78a9b6c 100644
--- a/apps/edr-freight-web/backoffice/src/components/reports/ReportView.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/reports/ReportView.tsx
@@ -13,6 +13,7 @@ import type { ReportFilterDef, ReportRunParams } from "@/types/reports";
import { DataTable, DataTableFooter, usePagination, type ColumnDef } from "@edr/ui-common";
import { ReportChart } from "./ReportChart";
+import { ReportDescription } from "./ReportDescription";
import { ReportExportButton } from "./ReportExportButton";
import { formatKpiValue, formatReportCell } from "./report-format";
@@ -229,7 +230,7 @@ export function ReportView({ reportKey, idKeyValue, pageHeader, defaultView }: R
{pageHeader ? (
}
action={
{exportButton}