From 14866704d9fcccaca584ae9e9437a364bce06bb9 Mon Sep 17 00:00:00 2001 From: Eric Seastrand Date: Wed, 25 Feb 2026 12:54:12 -0600 Subject: [PATCH 1/2] fix(happy-app): message content overflow on mobile web Add minWidth: 0 to messageContent flex container so text wraps properly on narrow viewports. Change table container from alignSelf: flex-start to maxWidth: 100% so tables clip instead of overflowing. Co-Authored-By: Claude Opus 4.6 --- packages/happy-app/sources/components/MessageView.tsx | 1 + packages/happy-app/sources/components/markdown/MarkdownView.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/happy-app/sources/components/MessageView.tsx b/packages/happy-app/sources/components/MessageView.tsx index 2fab4cfbad..e0de96a4ef 100644 --- a/packages/happy-app/sources/components/MessageView.tsx +++ b/packages/happy-app/sources/components/MessageView.tsx @@ -180,6 +180,7 @@ const styles = StyleSheet.create((theme) => ({ flexDirection: 'column', flexGrow: 1, flexBasis: 0, + minWidth: 0, maxWidth: layout.maxWidth, }, userMessageContainer: { diff --git a/packages/happy-app/sources/components/markdown/MarkdownView.tsx b/packages/happy-app/sources/components/markdown/MarkdownView.tsx index 0cb1d54cb7..1143496b43 100644 --- a/packages/happy-app/sources/components/markdown/MarkdownView.tsx +++ b/packages/happy-app/sources/components/markdown/MarkdownView.tsx @@ -504,7 +504,7 @@ const style = StyleSheet.create((theme) => ({ borderColor: theme.colors.divider, borderRadius: 8, overflow: 'hidden', - alignSelf: 'flex-start', + maxWidth: '100%', }, tableScrollView: { flexGrow: 0, From 19f12e809cbc3e39670e0e451a2167b63b091a05 Mon Sep 17 00:00:00 2001 From: Eric Seastrand Date: Thu, 26 Feb 2026 12:40:43 -0600 Subject: [PATCH 2/2] fix(happy-app): prevent table content from overflowing message layout Remove alignSelf: 'flex-start' from agentMessageContainer so it stretches to fill available width (minus margins) instead of sizing to content. This prevents wide tables from pushing the entire message area beyond the viewport. Add overflow: hidden to messageContent and flex constraints to table containers as belt-and-suspenders. Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude Co-Authored-By: Happy --- packages/happy-app/sources/components/MessageView.tsx | 2 +- .../happy-app/sources/components/markdown/MarkdownView.tsx | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/happy-app/sources/components/MessageView.tsx b/packages/happy-app/sources/components/MessageView.tsx index e0de96a4ef..ff8e91a12e 100644 --- a/packages/happy-app/sources/components/MessageView.tsx +++ b/packages/happy-app/sources/components/MessageView.tsx @@ -182,6 +182,7 @@ const styles = StyleSheet.create((theme) => ({ flexBasis: 0, minWidth: 0, maxWidth: layout.maxWidth, + overflow: 'hidden', }, userMessageContainer: { maxWidth: '100%', @@ -202,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 1143496b43..e6c0671075 100644 --- a/packages/happy-app/sources/components/markdown/MarkdownView.tsx +++ b/packages/happy-app/sources/components/markdown/MarkdownView.tsx @@ -505,9 +505,12 @@ const style = StyleSheet.create((theme) => ({ borderRadius: 8, overflow: 'hidden', maxWidth: '100%', + flexGrow: 0, + flexShrink: 1, }, tableScrollView: { flexGrow: 0, + flexShrink: 1, }, tableContent: { flexDirection: 'row',