fix: [IOCOM-2040] Handling of code and pre html blocks in old markdown (

#6652)

## Short description
This PR fixes a problem with the existing markdown component, where text
was overflowing or being cut.

|Horizontal overflow<br/>Android|Horizontal overflow<br/>iOS|
|-|-|

|![AndroidHorizontal](https://github.com/user-attachments/assets/d4f11f5a-1c0a-4589-baf7-88e1a290c201)|![iOSHorizontal](https://github.com/user-attachments/assets/5f8d43a3-1531-4af5-85b3-40a4326a5315)|

|Vertical cut<br/>Android|Vertical cut<br/>iOS|
|-|-|

|![AndroidVertical](https://github.com/user-attachments/assets/10c0053e-a320-4c4f-b5ef-d0e2398f991a)|![iOSVertical](https://github.com/user-attachments/assets/bd624ee5-c656-4577-8a06-5b73c946a95a)|

|Fixed<br/>Android|Fixed<br/>iOS|
|-|-|
|a|b|

|![AndroidFixed](https://github.com/user-attachments/assets/98cdba97-dcdc-4a7c-9c90-f63ebdf52d6c)|![iOSFixed](https://github.com/user-attachments/assets/ba3a3ced-0871-4763-bef7-815f8ecbbcac)|

## List of changes proposed in this pull request
The problem arises when the input markdown string contains:
- a tab character (UTF-8), after a newline
- two or more subsequent newlines with four blank spaces before any text
Such sequences causes the generated html to wrap the text into a
`<pre><code>text here</code></pre>` block, that causes either horizontal
overflow or vertical cutting (or both).
To fix such problem, a custom styling for `pre` and `code` has been
added to the markdown's CSS in order to render such blocks as a standard
HTML paragraph.

## How to test
Using the io-dev-api-server, generate a message containing above cases
and check that it is rendered properly.

---------

Co-authored-by: Martino Cesari Tomba <[email protected]>

ts/components/ui/Markdown/utils.ts

@@ -76,6 +76,26 @@ body {
   hyphens: auto;
 }
 
+/* Code blocks either overflow horizontally or cause 
+ * the webview height to be reported with a wrong 
+ * value. This styling forces code blocks to render as
+ * standard paragraphs, resolving both problems. A
+ * 'pre' tag normally includes a 'code' block inside */
+pre {
+  font-family: 'Titillium SansPro';
+  margin-block-start: 0;
+  white-space: pre-wrap;
+}
+
+/* This block is normally contained into a 'pre' block.
+ * The custom styling on the 'pre' block forces it to
+ * render as a standard paragraph but the 'code' block
+ * needs to customise the 'font-family', otherwise the
+ * text appearance will be 'monospace' */
+code {
+  font-family: 'Titillium SansPro';
+}
+
 h1, h2, h3, h4, h5, h6 {
   line-height: 1.3333em;
 }