From f03287be2d7d27e441d0bd4628e7f3dd268ec856 Mon Sep 17 00:00:00 2001 From: Aziz Becha Date: Mon, 11 May 2026 17:20:35 +0100 Subject: [PATCH] fix(appbar): prevent large/medium header title from being clipped on iOS In `medium`/`large` mode the inner column was sized to its content rather than to the Appbar's fixed `modeAppbarHeight`, so the controls row plus the title's padding/line-height could exceed the header height. On iOS, where `Surface` renders a fixed-size layer, the overflowing title got clipped. Add `alignSelf: 'stretch'` to `columnContainer` so it fills the header height; the controls row and `AppbarContent` (`justifyContent: 'flex-end'`) then partition that known height and the title stays within bounds. --- src/components/Appbar/Appbar.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx index d59c626769..7b72d54bf5 100644 --- a/src/components/Appbar/Appbar.tsx +++ b/src/components/Appbar/Appbar.tsx @@ -364,6 +364,10 @@ const styles = StyleSheet.create({ columnContainer: { flexDirection: 'column', flex: 1, + // Stretch to the Appbar's fixed `modeAppbarHeight` instead of being sized + // to content. Without this the column can exceed the header height and the + // title gets clipped on iOS, where `Surface` renders a fixed-size layer. + alignSelf: 'stretch', paddingTop: 8, }, centerAlignedContainer: {