diff --git a/packages/happy-app/sources/components/MessageView.tsx b/packages/happy-app/sources/components/MessageView.tsx
index 2fab4cfbad..ff8e91a12e 100644
--- a/packages/happy-app/sources/components/MessageView.tsx
+++ b/packages/happy-app/sources/components/MessageView.tsx
@@ -180,7 +180,9 @@ const styles = StyleSheet.create((theme) => ({
     flexDirection: 'column',
     flexGrow: 1,
     flexBasis: 0,
+    minWidth: 0,
     maxWidth: layout.maxWidth,
+    overflow: 'hidden',
   },
   userMessageContainer: {
     maxWidth: '100%',
@@ -201,7 +203,6 @@ const styles = StyleSheet.create((theme) => ({
     marginHorizontal: 16,
     marginBottom: 12,
     borderRadius: 16,
-    alignSelf: 'flex-start',
   },
   agentEventContainer: {
     marginHorizontal: 8,
diff --git a/packages/happy-app/sources/components/markdown/MarkdownView.tsx b/packages/happy-app/sources/components/markdown/MarkdownView.tsx
index 0cb1d54cb7..e6c0671075 100644
--- a/packages/happy-app/sources/components/markdown/MarkdownView.tsx
+++ b/packages/happy-app/sources/components/markdown/MarkdownView.tsx
@@ -504,10 +504,13 @@ const style = StyleSheet.create((theme) => ({
         borderColor: theme.colors.divider,
         borderRadius: 8,
         overflow: 'hidden',
-        alignSelf: 'flex-start',
+        maxWidth: '100%',
+        flexGrow: 0,
+        flexShrink: 1,
     },
     tableScrollView: {
         flexGrow: 0,
+        flexShrink: 1,
     },
     tableContent: {
         flexDirection: 'row',