fix(app): prevent branch switcher title from overflowing its row
Wrap the branch icon and title in a flex row with minWidth 0 and overflow hidden so long titles truncate instead of pushing the switcher off-screen.
This commit is contained in:
@@ -45,10 +45,10 @@ export function BranchSwitcher({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const titleContent = (
|
const titleContent = (
|
||||||
<>
|
<View style={styles.titleRow}>
|
||||||
{isGitCheckout ? <GitBranch size={14} color={theme.colors.foregroundMuted} /> : null}
|
{isGitCheckout ? <GitBranch size={14} color={theme.colors.foregroundMuted} /> : null}
|
||||||
<ScreenTitle testID="workspace-header-title">{title}</ScreenTitle>
|
<ScreenTitle testID="workspace-header-title">{title}</ScreenTitle>
|
||||||
</>
|
</View>
|
||||||
);
|
);
|
||||||
|
|
||||||
if (!currentBranchName) {
|
if (!currentBranchName) {
|
||||||
@@ -105,6 +105,7 @@ const styles = StyleSheet.create((theme) => ({
|
|||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
gap: theme.spacing[1],
|
gap: theme.spacing[1],
|
||||||
|
minWidth: 0,
|
||||||
marginLeft: {
|
marginLeft: {
|
||||||
xs: -theme.spacing[2],
|
xs: -theme.spacing[2],
|
||||||
md: 0,
|
md: 0,
|
||||||
@@ -116,9 +117,15 @@ const styles = StyleSheet.create((theme) => ({
|
|||||||
paddingHorizontal: theme.spacing[2],
|
paddingHorizontal: theme.spacing[2],
|
||||||
borderRadius: theme.borderRadius.md,
|
borderRadius: theme.borderRadius.md,
|
||||||
flexShrink: 1,
|
flexShrink: 1,
|
||||||
minWidth: 0,
|
|
||||||
},
|
},
|
||||||
branchSwitcherTriggerHovered: {
|
branchSwitcherTriggerHovered: {
|
||||||
backgroundColor: theme.colors.surface1,
|
backgroundColor: theme.colors.surface1,
|
||||||
},
|
},
|
||||||
|
titleRow: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: theme.spacing[1],
|
||||||
|
minWidth: 0,
|
||||||
|
overflow: "hidden",
|
||||||
|
},
|
||||||
}));
|
}));
|
||||||
|
|||||||
Reference in New Issue
Block a user