From 14d1f0bd1dce344ca049e5ec9196a8baf109b3e4 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Mon, 12 Aug 2024 16:31:36 +0200
Subject: [PATCH] fix: Multi-lines transactions statements

---
 .../webapp/src/components/Details/index.tsx    | 18 +++++++++++++-----
 .../MakeJournal/MakeJournalFormFooterLeft.tsx  |  2 ++
 .../Drawers/BillDrawer/BillDetailFooter.tsx    |  4 +++-
 .../CashflowTransactionDrawerFooter.tsx        |  5 ++++-
 .../CreditNoteDetailFooter.tsx                 |  8 ++++++--
 .../EstimateDetailFooter.tsx                   |  9 ++++++---
 .../InvoiceDetailFooter.tsx                    |  7 +++++--
 .../PaymentMadeDetailFooter.tsx                |  5 ++++-
 .../PaymentReceiveDetailFooter.tsx             |  7 +++++--
 .../ReceiptDetailFooter.tsx                    |  7 +++++--
 .../VendorCreditDetailFooter.tsx               |  6 +++++-
 .../ExpenseForm/ExpenseFormFooterLeft.tsx      |  2 ++
 .../Bills/BillForm/BillFormFooterLeft.tsx      |  2 ++
 .../VendorCreditNoteFormFooterLeft.tsx         |  2 ++
 .../PaymentForm/PaymentMadeFormFooterLeft.tsx  |  3 ++-
 .../CreditNoteFormFooterLeft.tsx               |  4 ++++
 .../EstimateForm/EstimateFormFooterLeft.tsx    |  8 +++++++-
 .../InvoiceForm/InvoiceFormFooterLeft.tsx      |  4 ++++
 .../PaymentReceiveFormFootetLeft.tsx           |  3 ++-
 .../ReceiptForm/ReceiptFormFooterLeft.tsx      |  4 ++++
 .../WarehouseTransferFormFooterLeft.tsx        |  2 ++
 .../webapp/src/style/components/Details.scss   |  7 +++++++
 22 files changed, 96 insertions(+), 23 deletions(-)

diff --git a/packages/webapp/src/components/Details/index.tsx b/packages/webapp/src/components/Details/index.tsx
index 9879fc7c0..fe35b9efb 100644
--- a/packages/webapp/src/components/Details/index.tsx
+++ b/packages/webapp/src/components/Details/index.tsx
@@ -1,6 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'classnames';
 
 import '@/style/components/Details.scss';
 
@@ -24,7 +24,7 @@ export function DetailsMenu({
 }) {
   return (
     <div
-      className={classNames(
+      className={clsx(
         'details-menu',
         {
           'details-menu--vertical': direction === DIRECTION.VERTICAL,
@@ -44,16 +44,24 @@ export function DetailsMenu({
 /**
  * Detail item.
  */
-export function DetailItem({ label, children, name, align, className }) {
+export function DetailItem({
+  label,
+  children,
+  name,
+  align,
+  multiline,
+  className,
+}) {
   const { minLabelSize } = useDetailsMenuContext();
 
   return (
     <div
-      className={classNames(
+      className={clsx(
         'detail-item',
         {
           [`detail-item--${name}`]: name,
           [`align-${align}`]: align,
+          [`detail-item--multilines`]: multiline,
         },
         className,
       )}
@@ -66,7 +74,7 @@ export function DetailItem({ label, children, name, align, className }) {
       >
         {label}
       </div>
-      <div>{children}</div>
+      <div className={clsx('detail-item__content')}>{children}</div>
     </div>
   );
 }
diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterLeft.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterLeft.tsx
index 8912f1de8..22d4cba38 100644
--- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterLeft.tsx
@@ -15,6 +15,8 @@ export function MakeJournalFormFooterLeft() {
         <FEditableText
           name={'description'}
           placeholder={intl.get('make_jorunal.decscrption.placeholder')}
+          multiline
+          fastField
         />
       </DescriptionFormGroup>
     </React.Fragment>
diff --git a/packages/webapp/src/containers/Drawers/BillDrawer/BillDetailFooter.tsx b/packages/webapp/src/containers/Drawers/BillDrawer/BillDetailFooter.tsx
index 0948821f3..526a4112c 100644
--- a/packages/webapp/src/containers/Drawers/BillDrawer/BillDetailFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/BillDrawer/BillDetailFooter.tsx
@@ -20,7 +20,9 @@ export default function BillDetailFooter() {
     <CommercialDocFooter>
       <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
         <If condition={bill.note}>
-          <DetailItem label={<T id={'note'} />}>{bill.note}</DetailItem>
+          <DetailItem label={<T id={'note'} />} multiline>
+            {bill.note}
+          </DetailItem>
         </If>
       </DetailsMenu>
     </CommercialDocFooter>
diff --git a/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerFooter.tsx b/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerFooter.tsx
index b3a7ea58f..d8584bb4a 100644
--- a/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerFooter.tsx
@@ -9,7 +9,10 @@ export function CashflowTransactionDrawerFooter() {
   return (
     <CommercialDocFooter>
       <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
-        <DetailItem label={<T id={'cash_flow.drawer.label.statement'} />}>
+        <DetailItem
+          label={<T id={'cash_flow.drawer.label.statement'} />}
+          multiline
+        >
           {cashflowTransaction.description}
         </DetailItem>
       </DetailsMenu>
diff --git a/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailFooter.tsx b/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailFooter.tsx
index 91b0c7627..ba9e2be92 100644
--- a/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailFooter.tsx
@@ -21,11 +21,15 @@ export default function CreditNoteDetailFooter() {
     <CommercialDocFooter>
       <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
         <If condition={creditNote.terms_conditions}>
-          <DetailItem label={<T id={'note'} />} children={creditNote.note} />
+          <DetailItem
+            label={<T id={'note'} />}
+            children={creditNote.note}
+            multiline
+          />
         </If>
 
         <If condition={creditNote.terms_conditions}>
-          <DetailItem label={<T id={'terms_conditions'} />}>
+          <DetailItem label={<T id={'terms_conditions'} />} multiline>
             {creditNote.terms_conditions}
           </DetailItem>
         </If>
diff --git a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.tsx b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.tsx
index 50223e70e..bafc4cbcf 100644
--- a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.tsx
@@ -16,17 +16,20 @@ import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
  */
 export default function EstimateDetailFooter() {
   const { estimate } = useEstimateDetailDrawerContext();
-  
+
   return (
     <CommercialDocFooter>
       <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
         <If condition={estimate.terms_conditions}>
-          <DetailItem label={<T id={'estimate.details.terms_conditions'} />}>
+          <DetailItem
+            label={<T id={'estimate.details.terms_conditions'} />}
+            multiline
+          >
             {estimate.terms_conditions}
           </DetailItem>
         </If>
         <If condition={estimate.note}>
-          <DetailItem label={<T id={'estimate.details.note'} />}>
+          <DetailItem label={<T id={'estimate.details.note'} />} multiline>
             {estimate.note}
           </DetailItem>
         </If>
diff --git a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.tsx b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.tsx
index 237254652..f21170b49 100644
--- a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.tsx
@@ -23,13 +23,16 @@ export function InvoiceDetailFooter() {
     <CommercialDocFooter>
       <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
         <If condition={invoice.terms_conditions}>
-          <DetailItem label={<T id={'terms_conditions'} />}>
+          <DetailItem label={<T id={'terms_conditions'} />} multiline>
             {invoice.terms_conditions}
           </DetailItem>
         </If>
 
         <If condition={invoice.invoice_message}>
-          <DetailItem label={<T id={'invoice.details.invoice_message'} />}>
+          <DetailItem
+            label={<T id={'invoice.details.invoice_message'} />}
+            multiline
+          >
             {invoice.invoice_message}
           </DetailItem>
         </If>
diff --git a/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.tsx b/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.tsx
index 110670fed..5dda3235d 100644
--- a/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.tsx
@@ -20,7 +20,10 @@ export function PaymentMadeDetailFooter() {
     <CommercialDocFooter>
       <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
         <If condition={paymentMade.statement}>
-          <DetailItem label={<T id={'payment_made.details.statement'} />}>
+          <DetailItem
+            label={<T id={'payment_made.details.statement'} />}
+            multiline
+          >
             {paymentMade.statement}
           </DetailItem>
         </If>
diff --git a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.tsx b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.tsx
index 019023174..36664acb3 100644
--- a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.tsx
@@ -16,12 +16,15 @@ import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
  */
 export default function PaymentReceiveDetailFooter() {
   const { paymentReceive } = usePaymentReceiveDetailContext();
-  
+
   return (
     <CommercialDocFooter>
       <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
         <If condition={paymentReceive.statement}>
-          <DetailItem label={<T id={'payment_receive.details.statement'} />}>
+          <DetailItem
+            label={<T id={'payment_receive.details.statement'} />}
+            multiline
+          >
             {paymentReceive.statement}
           </DetailItem>
         </If>
diff --git a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.tsx b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.tsx
index 8b7b1d859..fd47113c6 100644
--- a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.tsx
@@ -21,12 +21,15 @@ export default function ReceiptDetailFooter() {
     <CommercialDocFooter>
       <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
         <If condition={receipt.statement}>
-          <DetailItem label={<T id={'receipt.details.statement'} />}>
+          <DetailItem label={<T id={'receipt.details.statement'} />} multiline>
             {receipt.statement}
           </DetailItem>
         </If>
         <If condition={receipt.receipt_message}>
-          <DetailItem label={<T id={'receipt.details.receipt_message'} />}>
+          <DetailItem
+            label={<T id={'receipt.details.receipt_message'} />}
+            multiline
+          >
             {receipt.receipt_message}
           </DetailItem>
         </If>
diff --git a/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailFooter.tsx b/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailFooter.tsx
index c698b04a6..055f9ae73 100644
--- a/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailFooter.tsx
@@ -16,7 +16,11 @@ export function VendorCreditDetailFooter() {
     <CommercialDocFooter>
       <DetailsMenu direction={'horizantal'} minLabelSize={'150px'}>
         <If condition={vendorCredit.note}>
-          <DetailItem label={<T id={'note'} />} children={vendorCredit.note} />
+          <DetailItem
+            label={<T id={'note'} />}
+            children={vendorCredit.note}
+            multiline
+          />
         </If>
       </DetailsMenu>
     </CommercialDocFooter>
diff --git a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterLeft.tsx b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterLeft.tsx
index e6dc5443d..54bd8939f 100644
--- a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterLeft.tsx
@@ -14,6 +14,8 @@ export function ExpenseFormFooterLeft() {
         <FEditableText
           name={'description'}
           placeholder={<T id={'expenses.decscrption.placeholder'} />}
+          multiline
+          fastField
         />
       </DescriptionFormGroup>
     </React.Fragment>
diff --git a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.tsx b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.tsx
index 77c529b87..43bb005e2 100644
--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.tsx
@@ -15,6 +15,8 @@ export function BillFormFooterLeft() {
         <FEditableText
           name={'note'}
           placeholder={intl.get('bill_form.label.note.placeholder')}
+          fastField
+          multiline
         />
       </TermsConditsFormGroup>
     </React.Fragment>
diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.tsx
index beb3f4966..dfe3938f1 100644
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.tsx
@@ -15,6 +15,8 @@ export function VendorCreditNoteFormFooterLeft() {
         <FEditableText
           name={'note'}
           placeholder={intl.get('vendor_credit_form.note.placeholder')}
+          multiline
+          fastField
         />
       </TermsConditsFormGroup>
     </React.Fragment>
diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.tsx
index 699859923..4944b159f 100644
--- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.tsx
@@ -20,7 +20,8 @@ export function PaymentMadeFormFooterLeft() {
         <FEditableText
           name={'statement'}
           placeholder={intl.get('payment_made.form.internal_note.placeholder')}
-          fastField={true}
+          fastField
+          multiline
         />
       </InternalNoteFormGroup>
     </React.Fragment>
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterLeft.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterLeft.tsx
index 2b86b1319..3b62a70ab 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterLeft.tsx
@@ -15,6 +15,8 @@ export function CreditNoteFormFooterLeft() {
         <FEditableText
           name={'note'}
           placeholder={intl.get('credit_note.label_customer_note.placeholder')}
+          multiline
+          fastField
         />
       </CreditNoteMsgFormGroup>
       {/* --------- Terms and conditions --------- */}
@@ -27,6 +29,8 @@ export function CreditNoteFormFooterLeft() {
           placeholder={intl.get(
             'credit_note.label_terms_and_conditions.placeholder',
           )}
+          multiline
+          fastField
         />
       </TermsConditsFormGroup>
     </React.Fragment>
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterLeft.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterLeft.tsx
index 20968e4b1..7e84bb9d4 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterLeft.tsx
@@ -16,6 +16,8 @@ export function EstimateFormFooterLeft() {
         <FEditableText
           name={'note'}
           placeholder={intl.get('estimate_form.customer_note.placeholder')}
+          multiline
+          fastField
         />
       </EstimateMsgFormGroup>
 
@@ -26,7 +28,11 @@ export function EstimateFormFooterLeft() {
       >
         <FEditableText
           name={'terms_conditions'}
-          placeholder={intl.get('estimate_form.terms_and_conditions.placeholder')}
+          placeholder={intl.get(
+            'estimate_form.terms_and_conditions.placeholder',
+          )}
+          multiline
+          fastField
         />
       </TermsConditsFormGroup>
     </React.Fragment>
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx
index 14ff7d721..df6ec6236 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx
@@ -15,6 +15,8 @@ export function InvoiceFormFooterLeft() {
         <FEditableText
           name={'invoice_message'}
           placeholder={intl.get('invoice_form.invoice_message.placeholder')}
+          fastField
+          multiline
         />
       </InvoiceMsgFormGroup>
 
@@ -28,6 +30,8 @@ export function InvoiceFormFooterLeft() {
           placeholder={intl.get(
             'invoice_form.terms_and_conditions.placeholder',
           )}
+          multiline
+          fastField
         />
       </TermsConditsFormGroup>
     </React.Fragment>
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.tsx
index 2010cdb96..cc3cd371a 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.tsx
@@ -18,7 +18,8 @@ export function PaymentReceiveFormFootetLeft() {
           placeholder={intl.get(
             'payment_receive_form.internal_note.placeholder',
           )}
-          fastField={true}
+          fastField
+          multiline
         />
       </TermsConditsFormGroup>
     </React.Fragment>
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterLeft.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterLeft.tsx
index 04f797b52..590d2d371 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterLeft.tsx
@@ -16,6 +16,8 @@ export function ReceiptFormFooterLeft() {
         <FEditableText
           name={'receipt_message'}
           placeholder={intl.get('receipt_form.receipt_message.placeholder')}
+          multiline
+          fastField
         />
       </ReceiptMsgFormGroup>
 
@@ -29,6 +31,8 @@ export function ReceiptFormFooterLeft() {
           placeholder={intl.get(
             'receipt_form.terms_and_conditions.placeholder',
           )}
+          multiline
+          fastField
         />
       </TermsConditsFormGroup>
     </React.Fragment>
diff --git a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.tsx b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.tsx
index d42b1be93..018b0c06a 100644
--- a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.tsx
@@ -15,6 +15,8 @@ export function WarehouseTransferFormFooterLeft() {
         <FEditableText
           name={'reason'}
           placeholder={intl.get('warehouse_transfer.form.reason.placeholder')}
+          multiline
+          fastField
         />
       </TermsConditsFormGroup>
     </React.Fragment>
diff --git a/packages/webapp/src/style/components/Details.scss b/packages/webapp/src/style/components/Details.scss
index fd28128cb..16495a04d 100644
--- a/packages/webapp/src/style/components/Details.scss
+++ b/packages/webapp/src/style/components/Details.scss
@@ -48,6 +48,13 @@
     &__content {
       text-transform: capitalize;
     }
+
+    &.detail-item--multilines{
+
+      .detail-item__content{
+        white-space: pre-line;
+      }
+    }
   }
 
   + .details-menu{