authorgravatar for 91240327+shivamhwp@users.noreply.github.comshivam <91240327+shivamhwp@users.noreply.github.com> 2026-09-30 12:35:22+05:30
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-30 07:05:22+00:00
logc18e5ea6ed741443a8ec4a5d22d4b6939b0ecd21
tree1f85ab656bfac0acb697c2bc6a6e717a6d00f384
parent0fcd5f90611451cca842689faea53b5450c022da
signature Signed by PGP key B5690EEEBB952194

fix(web): stop clipping the bottoms of diff file names (#14375)


1 files changed, 8 insertions(+), 7 deletions(-)

apps/web/src/components/diffs/StyledDiffCodeView.tsx+8-7
...@@ -200,6 +200,13 @@ const DIFF_VIEW_UNSAFE_CSS = `${DIFF_SURFACE_THEME_UNSAFE_CSS}...@@ -200,6 +200,13 @@ const DIFF_VIEW_UNSAFE_CSS = `${DIFF_SURFACE_THEME_UNSAFE_CSS}
200 line-height: 1 !important;200 line-height: 1 !important;
201}201}
202202
203/* Pierre clips file names with overflow: hidden for its start ellipsis. A 1em line box cuts off
204 descenders. Only the clipped names get room: 16px plus the header's 12px of padding stays
205 inside its 32px min-height, which diffHeaderHeight assumes. */
206[data-diffs-header] :is([data-title], [data-prev-name]) {
207 line-height: 16px !important;
208}
209
203[data-diffs-header] [data-metadata] {210[data-diffs-header] [data-metadata] {
204 align-items: center !important;211 align-items: center !important;
205 line-height: 1 !important;212 line-height: 1 !important;
...@@ -222,18 +229,12 @@ const DIFF_VIEW_UNSAFE_CSS = `${DIFF_SURFACE_THEME_UNSAFE_CSS}...@@ -222,18 +229,12 @@ const DIFF_VIEW_UNSAFE_CSS = `${DIFF_SURFACE_THEME_UNSAFE_CSS}
222229
223[data-title] {230[data-title] {
224 cursor: pointer;231 cursor: pointer;
225 transition:232 transition: color 120ms ease;
226 color 120ms ease,
227 text-decoration-color 120ms ease;
228 text-decoration: underline;
229 text-decoration-color: transparent;
230 text-underline-offset: 2px;
231 font-family: var(--font-sans) !important;233 font-family: var(--font-sans) !important;
232}234}
233235
234[data-title]:hover {236[data-title]:hover {
235 color: color-mix(in srgb, var(--code-foreground) 84%, var(--primary)) !important;237 color: color-mix(in srgb, var(--code-foreground) 84%, var(--primary)) !important;
236 text-decoration-color: currentColor;
237}238}
238239
239/* Expanding a file mounts its body all at once; easing it in matches the 200ms the app's240/* Expanding a file mounts its body all at once; easing it in matches the 200ms the app's