Skip to content

feat(pr-review): open formSheets full-height with roomier density #5402

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
iscekic merged 2 commits into from
Aug 20, 2026
Merged

feat(pr-review): open formSheets full-height with roomier density #5402

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c0a0e57
feat(pr-review): open formSheets full-height with roomier density
iscekic Aug 20, 2026
334b6e1
refactor(pr-review): drop dead className prop from form-sheet footer
iscekic Aug 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/mobile/src/app/(app)/pr-review/[owner]/[repo]/[number]/_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export default function PrReviewNumberLayout() {
const sheetOptions = {
presentation: 'formSheet' as const,
sheetAllowedDetents: [0.5, fullSheetDetent] as [number, number],
sheetInitialDetentIndex: 'last' as const,
sheetGrabberVisible: true,
headerShown: false,
};
Expand Down
34 changes: 16 additions & 18 deletions apps/mobile/src/components/pr-review/merge/pr-merge-sheet-parts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,11 @@ function MethodPicker({
onChange: (next: AllowedMergeMethod) => void;
}>) {
return (
<View className="gap-0.5">
<Text className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
<View className="gap-1.5">
<Text className="text-sm font-medium uppercase tracking-wide text-muted-foreground">
Method
</Text>
<RadioGroup label="Method" className="flex-row flex-wrap gap-1">
<RadioGroup label="Method" className="flex-row flex-wrap gap-2">
{methodOptions.map(option => {
const active = method === option.value;
// Long labels stay readable via accessibilityLabel; chip shows short text.
Expand All @@ -62,15 +62,15 @@ function MethodPicker({
{...radioItemA11y({ label: option.label, checked: active, disabled: isDisabled })}
accessibilityHint={PR_MERGE_DESCRIPTIONS[option.value]}
className={cn(
'min-h-8 items-center justify-center rounded-full border px-2.5 py-1 active:opacity-70',
'min-h-11 items-center justify-center rounded-full border px-4 py-2 active:opacity-70',
active && 'border-primary bg-primary',
!active && isDisabled && 'border-hair-soft bg-secondary',
!active && !isDisabled && 'border-border bg-secondary'
)}
>
<Text
className={cn(
'text-xs font-medium',
'text-sm font-medium',
active && 'text-primary-foreground',
!active && isDisabled && 'text-muted-foreground',
!active && !isDisabled && 'text-foreground'
Expand Down Expand Up @@ -99,8 +99,8 @@ function CommitTitleField({
}>) {
const colors = useThemeColors();
return (
<View className="gap-0.5">
<Text className="text-xs font-medium text-foreground">Commit title</Text>
<View className="gap-1.5">
<Text className="text-sm font-medium text-foreground">Commit title</Text>
<TextInput
ref={inputRef}
defaultValue={titleRef.current}
Expand All @@ -112,7 +112,7 @@ function CommitTitleField({
titleRef.current = value;
}}
className={cn(
'min-h-9 max-h-12 rounded-md border border-input bg-background px-3 py-1 text-sm leading-5 text-foreground',
'min-h-11 rounded-md border border-input bg-background px-3 py-2 text-sm leading-5 text-foreground',
'focus:border-ring'
)}
multiline
Expand All @@ -137,8 +137,8 @@ function CommitMessageField({
const keyboardVisible = useFormSheetKeyboardVisible();
const tight = compact || keyboardVisible;
return (
<View className="gap-0.5">
<Text className="text-xs font-medium text-foreground">Commit message</Text>
<View className="gap-1.5">
<Text className="text-sm font-medium text-foreground">Commit message</Text>
<TextInput
ref={inputRef}
defaultValue={messageRef.current}
Expand All @@ -150,9 +150,9 @@ function CommitMessageField({
messageRef.current = value;
}}
className={cn(
'rounded-md border border-input bg-background px-3 py-1 text-sm leading-5 text-foreground',
'rounded-md border border-input bg-background px-3 py-2 text-sm leading-5 text-foreground',
'focus:border-ring',
tight ? 'max-h-12 min-h-9' : 'min-h-11 max-h-16'
tight ? 'max-h-16 min-h-11' : 'min-h-24 max-h-40'
)}
multiline
textAlignVertical="top"
Expand All @@ -178,7 +178,7 @@ function DeleteBranchToggle({
return null;
}
return (
<View className="flex-row items-center justify-between rounded-lg bg-secondary px-3 py-1.5">
<View className="flex-row items-center justify-between rounded-lg bg-secondary px-4 py-3">
<Text className="flex-1 pr-3 text-sm font-medium">Delete branch</Text>
<Switch
accessibilityLabel="Delete branch after merge"
Expand Down Expand Up @@ -236,7 +236,7 @@ export function MergeSheetFormBody(props: {

return (
<>
<View className="gap-1.5 px-6 pt-1.5">
<View className="gap-4 px-6 pt-4">
{noMethodsAllowed ? (
<View className="rounded-md border border-border bg-secondary p-3">
<AccessibleStatus
Expand Down Expand Up @@ -286,9 +286,8 @@ export function MergeSheetFormBody(props: {
) : null}
</View>

<PrFormSheetFooter className="pb-1 pt-1">
<PrFormSheetFooter>
<Button
size="sm"
onPress={onConfirm}
loading={isMutating}
disabled={
Expand All @@ -301,11 +300,10 @@ export function MergeSheetFormBody(props: {
<Text>{submitLabel}</Text>
</Button>
<Button
size="sm"
variant="ghost"
onPress={onDismiss}
disabled={isMutating}
className="mt-0.5"
className="mt-2"
accessibilityLabel="Cancel"
>
<Text>Cancel</Text>
Expand Down
10 changes: 2 additions & 8 deletions apps/mobile/src/components/pr-review/pr-form-sheet-chrome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ import { type ReactNode, useEffect, useState } from 'react';
import { Keyboard, Platform, View } from 'react-native';

import { ScreenHeader } from '@/components/screen-header';
import { cn } from '@/lib/utils';

export function useFormSheetKeyboardVisible(): boolean {
const [visible, setVisible] = useState(false);
Expand Down Expand Up @@ -63,14 +62,9 @@ export function PrFormSheetHeader(props: { title: string; eyebrow: string; onBac
* Trailing ScrollView footer for formSheets. No keyboard-height padding —
* parent ScrollView automaticallyAdjustKeyboardInsets owns that.
*/
export function PrFormSheetFooter(props: { children: ReactNode; className?: string }) {
export function PrFormSheetFooter(props: { children: ReactNode }) {
return (
<View
className={cn(
'mt-0.5 border-t-[0.5px] border-hair-soft bg-background px-6 pb-1.5 pt-1',
props.className
)}
>
<View className="mt-0.5 border-t-[0.5px] border-hair-soft bg-background px-6 pb-4 pt-3">
{props.children}
</View>
);
Expand Down
17 changes: 7 additions & 10 deletions apps/mobile/src/components/pr-review/pr-review-comment-composer-parts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,17 +72,16 @@ export function ComposerFooter({
}): ReactNode {
return (
// Lives inside the formSheet ScrollView (not a sticky sibling).
// size=sm + tight footer: half-detent + empty-body error must keep Cancel
// above the closed-sheet limit (~874) without scrolling.
<PrFormSheetFooter className="pb-1 pt-1">
// Half detent stays a drag-down; keep Cancel above the closed-sheet
// limit (~874) without scrolling.
<PrFormSheetFooter>
{isEdit ? (
<Button size="sm" onPress={onSave} disabled={primaryDisabled} accessibilityLabel="Save">
<Button onPress={onSave} disabled={primaryDisabled} accessibilityLabel="Save">
<Text>Save</Text>
</Button>
) : (
<>
<Button
size="sm"
onPress={onCommentNow}
loading={isSubmitting}
disabled={primaryDisabled}
Expand All @@ -91,23 +90,21 @@ export function ComposerFooter({
<Text>Comment now</Text>
</Button>
<Button
size="sm"
variant="secondary"
onPress={onAddToReview}
disabled={isSubmitting}
className="mt-0.5"
className="mt-2"
accessibilityLabel="Add to review"
>
<Text>Add to review</Text>
</Button>
</>
)}
<Button
size="sm"
variant="ghost"
onPress={onCancel}
disabled={isSubmitting}
className="mt-0.5"
className="mt-2"
accessibilityLabel="Cancel"
>
<Text>Cancel</Text>
Expand Down Expand Up @@ -139,7 +136,7 @@ export function ContextPreview({
const previewText = preferFallback ? '' : (selection?.selectedText ?? '');
// Single-line context keeps half-detent + keyboard-open room for CTAs.
return (
<View className="gap-0.5 rounded-lg border border-hair-soft bg-secondary px-3 py-1.5">
<View className="gap-0.5 rounded-lg border border-hair-soft bg-secondary px-4 py-2">
<Text className="font-mono-medium text-[11px] text-muted-foreground" numberOfLines={1}>
{path} {side} {lineLabel}
</Text>
Expand Down
4 changes: 2 additions & 2 deletions apps/mobile/src/components/pr-review/pr-review-comment-composer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,7 @@ export function PrReviewCommentComposer(props: PrReviewCommentComposerProps) {
automaticallyAdjustKeyboardInsets
keyboardDismissMode="interactive"
>
<View className="gap-1.5 px-6 pt-1.5">
<View className="gap-4 px-6 pt-4">
<ContextPreview
selection={selection}
fallbackPath={path}
Expand All @@ -328,7 +328,7 @@ export function PrReviewCommentComposer(props: PrReviewCommentComposerProps) {
preferFallback={isEdit}
/>
<View className="gap-1">
<Text className="text-xs font-medium text-foreground">Comment</Text>
<Text className="text-sm font-medium text-foreground">Comment</Text>
{isEdit || draft.settled ? (
<CommentBodyField
inputRef={bodyInputRef}
Expand Down
4 changes: 2 additions & 2 deletions apps/mobile/src/components/pr-review/pr-review-submit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ export function PrReviewSubmit(props: PrReviewSubmitProps) {
automaticallyAdjustKeyboardInsets
keyboardDismissMode="interactive"
>
<View className="gap-2 px-6 pt-2">
<View className="gap-4 px-6 pt-4">
<ReviewEventChips
value={event}
disabled={isSubmitting}
Expand Down Expand Up @@ -339,7 +339,7 @@ export function PrReviewSubmit(props: PrReviewSubmitProps) {
}
}}
disabled={isSubmitting}
className="mt-1"
className="mt-2"
accessibilityLabel="Cancel"
>
<Text>Cancel</Text>
Expand Down
8 changes: 4 additions & 4 deletions apps/mobile/src/components/pr-review/review-event-chips.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ export function ReviewEventChips(props: {
}) {
return (
<View className="gap-1.5">
<Text className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
<Text className="text-sm font-medium uppercase tracking-wide text-muted-foreground">
Review event
</Text>
<RadioGroup label="Review event" className="flex-row flex-wrap gap-1.5">
<RadioGroup label="Review event" className="flex-row flex-wrap gap-2">
{EVENT_OPTIONS.map(option => {
const active = props.value === option.value;
return (
Expand All @@ -38,14 +38,14 @@ export function ReviewEventChips(props: {
}}
{...radioItemA11y({ label: option.label, checked: active, disabled: props.disabled })}
className={cn(
'min-h-9 items-center justify-center rounded-full border px-3 py-1.5 active:opacity-70',
'min-h-11 items-center justify-center rounded-full border px-4 py-2 active:opacity-70',
active ? 'border-primary bg-primary' : 'bg-secondary',
!active && (props.disabled ? 'border-hair-soft' : 'border-border')
)}
>
<Text
className={cn(
'text-xs font-medium',
'text-sm font-medium',
active ? 'text-primary-foreground' : 'text-foreground',
!active && props.disabled && 'text-muted-foreground'
)}
Expand Down