TF-1743: Hide Horizontal scroll bar in Email detail view

(cherry picked from commit 491cd1d59c69e9a308700ee1bc4032b87284380c)
2023-04-24 23:30:41 +07:00
parent 13a3976a61
commit 1c984421d5
2 changed files with 25 additions and 1 deletions
@@ -53,7 +53,7 @@ String generateHtml(String content, {
    </style>
    ${javaScripts ?? ''}
    </head>
-    <body>
+    <body style = "overflow-x: hidden">
    <div class="tmail-content">$content</div>
    </body>
    </html> 
@@ -0,0 +1,24 @@
+# 25. Hide Horizontal scroll bar in Email detail view
+
+Date: 2023-04-24
+
+## Status
+
+- Issue: [#1743](https://github.com/linagora/tmail-flutter/issues/1743)
+
+## Context
+
+In email view always show horizontal scroll bar in Email detail view and don't wrap text instead
+
+## Root cause
+
+The horizontal scrollbar appears when the content inside the body element is wider than the width of the viewport. By default, the overflow property is set to "visible", which means that the content can overflow the element's boundaries.
+
+## Decision
+
+When you set `overflow-x: hidden`; on the body element, it prevents the content from overflowing the element's boundaries in the horizontal direction, 
+effectively disabling the horizontal scrollbar. However, if you don't set this property and the content is wider than the viewport, 
+the scrollbar will appear to allow the user to scroll horizontally to see the content that is outside the viewport.
+## Consequences
+
+- Hide Horizontal scroll bar in Email detail view