diff --git a/src/screens/Messages/components/splitView/MessagesSplitViewLayout.tsx b/src/screens/Messages/components/splitView/MessagesSplitViewLayout.tsx index 38ebd28db2..fab3f5c874 100644 --- a/src/screens/Messages/components/splitView/MessagesSplitViewLayout.tsx +++ b/src/screens/Messages/components/splitView/MessagesSplitViewLayout.tsx @@ -61,15 +61,25 @@ function MessagesSplitViewLayout({children, navigation, route}: LayoutProps) { ? route?.params?.conversation : undefined - const leftNavWidth = centerColumnOffset - ? LEFT_NAV_MINIMAL_WIDTH - : LEFT_NAV_FULL_WIDTH const rightNavWidth = centerColumnOffset ? RIGHT_NAV_MINIMAL_WIDTH : RIGHT_NAV_FULL_WIDTH - const containerWidth = - leftNavWidth - LEFT_NAV_MINIMAL_WIDTH + CENTER_COLUMN_WIDTH + rightNavWidth + const leftNavWidth = centerColumnOffset + ? LEFT_NAV_MINIMAL_WIDTH + : LEFT_NAV_FULL_WIDTH - LEFT_NAV_MINIMAL_WIDTH + + // slight reduce width for smaller breakpoint + const centerColumnWidth = centerColumnOffset + ? CENTER_COLUMN_WIDTH - 50 + : CENTER_COLUMN_WIDTH + + // nasty magic numbers here, sorry :( + const offset = centerColumnOffset + ? LEFT_NAV_MINIMAL_WIDTH - 34 + : LEFT_NAV_MINIMAL_WIDTH + 5 + + const containerWidth = leftNavWidth + centerColumnWidth + rightNavWidth return ( {children}