Skip to content

Commit 67f0c83

Browse files
warp-agent-staging[bot]oz-agentwarp-agent
authored
Fix code review file header leaking diff content through its rounded corners (warpdotdev#13091)
## Description Fixes the Code Review file header leaking diff content through its rounded top corners while scrolling. When you scroll within an expanded file in Code Review, the file header pins to the top of the panel as a sticky overlay on top of the diff. The diff content beneath it was only offset by a top margin to *reserve* space for the header — it was never *clipped* — so as content scrolled up into the header's band, the header's un-painted rounded top corners revealed the moving code through the top-left/top-right corner notches. This keeps the fix local to Code Review and composes existing generalized elements. `Container::with_corner_radius` rounds the file card/header drawing, but it does not clip descendant painting; WarpUI's layer clips are rectangular. The PR now always passes file content through a normal `Clipped` region. In the regular non-pinned case that clip uses the normal content bounds; when the header is pinned, an outer `Container` margin moves the clip below the pinned header and an inner counter-margin keeps the editor painting at its normal scrolled position. This keeps editor content out of the parent/header rounded-corner area while preserving the viewported list layout, without adding a custom element or changing shared WarpUI APIs. The header keeps its rounded top corners, and the at-rest card (and the warpdotdev#12447 corner-fill fix) are left untouched. Reported via the factory-client triage Slack thread: https://warpdev.slack.com/archives/C0BCE7AELJ2/p1782483013346509?thread_ts=1782483013.346509&cid=C0BCE7AELJ2 ## Linked Issue N/A — reported via the factory-client Slack triage channel (linked above). - [ ] The linked issue is labeled `ready-to-spec` or `ready-to-implement`. - [x] Where appropriate, screenshots or a short video of the implementation are included below (especially for user-visible or UI changes). ## Testing - `./script/format` passes. - `cargo check -p warp --features local_fs` passes. - `cargo clippy -p warp --all-targets --tests -- -D warnings` passes. - **Manual UI verification with computer use** on the rebuilt always-clipped existing-element implementation: opened Code Review on a repo with a large single-file diff and scrolled so the header pins. Confirmed the pinned header keeps its rounded top corners, no diff content shows through the top corners (during scroll motion or at rest), the first line below the header is fully visible with no abnormal gap/seam, and the at-rest card still shows rounded corners with no square-corner regression. - **Multi-file UI verification with computer use**: opened Code Review on a repo with three changed files (`alpha.rs`, `beta.rs`, `gamma.rs`). Confirmed non-pinned headers for each changed file keep clean rounded top corners and show content immediately below with no abnormal gap/cutoff, and pinned headers for `alpha.rs`/`beta.rs` still have no corner leakage while scrolling. - [x] I have manually tested my changes locally ### Screenshots / Videos After the fix, while scrolled, the pinned header's rounded corners cleanly show the panel background with no diff content bleeding through, and the first diff line remains fully visible below the header. ![Verified Code Review pinned header fix](https://slack-files.com/TUPM5R54Y-F0BDGBTJ5K8-d9c42739e9) ![Verified multi-file non-pinned Code Review header](https://slack-files.com/TUPM5R54Y-F0BDGDC5SKG-d5c70e4c4b) ![Verified multi-file second changed file header](https://slack-files.com/TUPM5R54Y-F0BD326GLHM-3bc89def17) ![Verified multi-file pinned Code Review header](https://slack-files.com/TUPM5R54Y-F0BDLBHRL2D-ac9a9a451b) The same screenshot is also attached in the linked factory-client Slack thread for review context. ## Agent Mode - [x] Warp Agent Mode - This PR was created via Warp's AI Agent Mode <!-- CHANGELOG-BUG-FIX: Fixed the Code Review file header showing diff content through its rounded top corners while scrolling. --> <!-- factory-client: {"source":"factory-client","slack_channel":"C0BCE7AELJ2","slack_thread_ts":"1782483013.346509","slack_permalink":"https://warpdev.slack.com/archives/C0BCE7AELJ2/p1782483013346509?thread_ts=1782483013.346509&cid=C0BCE7AELJ2","oz_run_id":"019f044b-be18-7689-ac7f-6accda2e15b1","repo":"warpdotdev/warp"} --> _Conversation: https://staging.warp.dev/conversation/4f74044e-c38e-4413-a672-532537a988ff_ _Run: https://oz.staging.warp.dev/runs/019f044b-be18-7689-ac7f-6accda2e15b1_ _This PR was generated with [Oz](https://warp.dev/oz)._ Co-authored-by: Oz <oz-agent@warp.dev> Co-authored-by: Warp <agent@warp.dev>
1 parent cccaed6 commit 67f0c83

1 file changed

Lines changed: 49 additions & 23 deletions

File tree

app/src/code_review/code_review_view.rs

Lines changed: 49 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4782,6 +4782,20 @@ impl CodeReviewView {
47824782
)
47834783
}
47844784

4785+
fn clip_file_content(file_content: Box<dyn Element>, top_inset: f32) -> Box<dyn Element> {
4786+
let top_inset = top_inset.max(0.);
4787+
Container::new(
4788+
Clipped::new(
4789+
Container::new(file_content)
4790+
.with_margin_top(-top_inset)
4791+
.finish(),
4792+
)
4793+
.finish(),
4794+
)
4795+
.with_margin_top(top_inset)
4796+
.finish()
4797+
}
4798+
47854799
/// Renders a single file's diff
47864800
fn render_file_diff(
47874801
&self,
@@ -4819,31 +4833,43 @@ impl CodeReviewView {
48194833
let mut stack = Stack::new().with_constrain_absolute_children();
48204834
// Only show file content if expanded.
48214835
if file.is_expanded {
4822-
stack.add_child(
4823-
SavePosition::new(
4824-
Container::new(self.render_file_content(file, appearance))
4825-
.with_margin_top(
4826-
if is_item_being_scrolled && !is_first_item_with_no_scroll {
4827-
// This is the height of the header bar needs to be present. Otherwise,
4828-
// the file contents shift up by this amount.
4829-
if let Some(header_rect) = app.element_position_by_id_at_last_frame(
4830-
self.window_id,
4831-
self.file_diff_header_position(file_index),
4832-
) {
4833-
header_rect.height()
4834-
} else {
4835-
FILE_HEADER_HEIGHT
4836-
}
4837-
} else {
4838-
0.
4839-
},
4840-
)
4841-
.finish(),
4842-
&self.file_index_position(file_index),
4836+
// When this file is the one being scrolled, its header is pinned as an
4837+
// overlay on top of the diff content (added as a positioned child below).
4838+
let pin_header = is_item_being_scrolled && !is_first_item_with_no_scroll;
4839+
4840+
// Reserve the header's height above the content so the content doesn't
4841+
// shift up under the pinned header.
4842+
let header_height = if pin_header {
4843+
app.element_position_by_id_at_last_frame(
4844+
self.window_id,
4845+
self.file_diff_header_position(file_index),
48434846
)
4844-
.finish(),
4847+
.map(|header_rect| header_rect.height())
4848+
.unwrap_or(FILE_HEADER_HEIGHT)
4849+
} else {
4850+
0.
4851+
};
4852+
4853+
let file_content = Container::new(self.render_file_content(file, appearance))
4854+
.with_margin_top(header_height)
4855+
.finish();
4856+
// Always clip file content so it respects the file card/header's
4857+
// visible boundary. The parent/header corner radii only affect their
4858+
// own drawing; they do not clip the editor's painting. When the
4859+
// header is pinned, the visible content boundary moves down to the
4860+
// pinned header's bottom edge (`scroll offset + header height`);
4861+
// otherwise the normal content bounds are used.
4862+
let file_content_top_inset = if pin_header {
4863+
scroll_offset_from_top.offset_from_start().as_f32() + header_height
4864+
} else {
4865+
0.
4866+
};
4867+
let file_content = Self::clip_file_content(file_content, file_content_top_inset);
4868+
4869+
stack.add_child(
4870+
SavePosition::new(file_content, &self.file_index_position(file_index)).finish(),
48454871
);
4846-
if is_item_being_scrolled && !is_first_item_with_no_scroll {
4872+
if pin_header {
48474873
let sticky_file_header = self.render_file_header(file, appearance, app);
48484874
stack.add_positioned_child(
48494875
sticky_file_header,

0 commit comments

Comments
 (0)