Make provider diagnostic modal scrollable on short screens

Drop the flex:1 Models section in favor of a maxHeight, and let the
outer modal scroll so the whole sheet is reachable when the viewport
can't fit it.
This commit is contained in:
Mohamed Boudra
2026-04-27 13:51:53 +07:00
parent 3b66b25f67
commit 7212cc2596
@@ -411,7 +411,6 @@ export function ProviderDiagnosticSheet({
visible={visible}
onClose={onClose}
snapPoints={DIAGNOSTIC_SHEET_SNAP_POINTS}
scrollable={false}
headerActions={headerActions}
>
<SettingsSection title="Diagnostic">
@@ -426,12 +425,12 @@ export function ProviderDiagnosticSheet({
<CustomModelsSection provider={provider} serverId={serverId} refresh={refresh} />
<View style={sheetStyles.modelsSection}>
<View>
<View style={sheetStyles.modelsHeader}>
<Text style={settingsStyles.sectionHeaderTitle}>Models</Text>
{modelsTrailing}
</View>
<View style={MODELS_CARD_STYLE}>
<View style={settingsStyles.card}>
<View style={INLINE_ROW_STYLE}>
<Search size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
<AdaptiveTextInput
@@ -521,10 +520,6 @@ const sheetStyles = StyleSheet.create((theme) => ({
alignItems: "center",
gap: theme.spacing[2],
},
modelsSection: {
flex: 1,
minHeight: 0,
},
modelsHeader: {
flexDirection: "row",
alignItems: "center",
@@ -533,18 +528,13 @@ const sheetStyles = StyleSheet.create((theme) => ({
marginBottom: theme.spacing[3],
marginLeft: theme.spacing[1],
},
flexCard: {
flex: 1,
minHeight: 0,
},
modelsTrailing: {
flexDirection: "row",
alignItems: "center",
gap: theme.spacing[1],
},
modelsScroll: {
flex: 1,
minHeight: 0,
maxHeight: 360,
},
modelsScrollContent: {
paddingBottom: 0,
@@ -566,4 +556,3 @@ const DIAGNOSTIC_SEARCH_INPUT_STYLE = [sheetStyles.inlineInput, isWeb && { outli
const DIAGNOSTIC_INLINE_INPUT_STYLE = [sheetStyles.inlineInput, isWeb && { outlineStyle: "none" }];
const MODEL_ROW_STYLE = [settingsStyles.row, settingsStyles.rowBorder];
const INLINE_ROW_STYLE = [settingsStyles.row, sheetStyles.inlineRow];
const MODELS_CARD_STYLE = [settingsStyles.card, sheetStyles.flexCard];