feat(app): collapse workspace header button labels on narrow rows

Measure the header row width and hide text labels on the Open,
Scripts, and git action split buttons below 700px so the header
fits without wrapping on split-pane layouts.
This commit is contained in:
Mohamed Boudra
2026-04-19 14:26:51 +07:00
parent cfa3b009e3
commit 43bbf8cb12
8 changed files with 84 additions and 15 deletions
@@ -1,4 +1,5 @@
import type { ReactNode } from "react";
import type { LayoutChangeEvent } from "react-native";
import { View, type StyleProp, type ViewStyle } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { StyleSheet, useUnistyles } from "react-native-unistyles";
@@ -17,6 +18,7 @@ interface ScreenHeaderProps {
leftStyle?: StyleProp<ViewStyle>;
rightStyle?: StyleProp<ViewStyle>;
borderless?: boolean;
onRowLayout?: (event: LayoutChangeEvent) => void;
}
/**
@@ -29,6 +31,7 @@ export function ScreenHeader({
leftStyle,
rightStyle,
borderless,
onRowLayout,
}: ScreenHeaderProps) {
const { theme } = useUnistyles();
const insets = useSafeAreaInsets();
@@ -42,6 +45,7 @@ export function ScreenHeader({
<View style={styles.header}>
<View style={[styles.inner, { paddingTop: insets.top + topPadding }]}>
<View
onLayout={onRowLayout}
style={[
styles.row,
{
@@ -84,11 +88,13 @@ const styles = StyleSheet.create((theme) => ({
flexDirection: "row",
alignItems: "center",
gap: theme.spacing[2],
minWidth: 0,
},
right: {
flexDirection: "row",
alignItems: "center",
gap: theme.spacing[2],
flexShrink: 0,
},
borderless: {
borderBottomColor: "transparent",
@@ -25,6 +25,7 @@ export function ScreenTitle({ children, numberOfLines = 1, testID, style }: Scre
const styles = StyleSheet.create((theme) => ({
text: {
flexShrink: 1,
minWidth: 0,
fontSize: theme.fontSize.base,
fontWeight: {
xs: "400",