From ecb675454f751ddc81cf67bbd48bdf2536f3a9c9 Mon Sep 17 00:00:00 2001 From: bytedream Date: Wed, 22 Apr 2026 13:21:31 +0200 Subject: [PATCH 1/9] Fix button layout shift when collapsing file tree in editor --- web_src/css/repo.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 428d2e0714e3b..e6ef737a4e3e9 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -200,8 +200,7 @@ td .commit-summary { .repo-editor-header { display: flex; - margin: 1rem 0; - padding: 3px 0; + margin: 5px 0 1rem; width: 100%; gap: 0.5em; align-items: center; From 14f9149a717da0571e9a8d43ab53d89ca5e00612 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 22 Apr 2026 19:55:48 +0200 Subject: [PATCH 2/9] Align toggle button with sidebar row to eliminate 1.5px shift The toggle button in .repo-editor-header was vertically centered in a 33px-tall row (input height), while the same button in the sidebar's .repo-button-row sits at the top of a 30px row with 8px top margin. Toggling the tree moved the button by 1.5px. Match the sidebar: use margin-top 8px and align-items flex-start so the 30px button lands at the same y position in both states. Co-Authored-By: Claude (Opus 4.7) --- web_src/css/repo.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index e6ef737a4e3e9..46176ededb399 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -200,10 +200,10 @@ td .commit-summary { .repo-editor-header { display: flex; - margin: 5px 0 1rem; + margin: 8px 0 1rem; width: 100%; gap: 0.5em; - align-items: center; + align-items: flex-start; } .repo-editor-header input { From 3b16392ef485f0f197e16f68ad7b3f16212ae6ac Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 22 Apr 2026 19:57:41 +0200 Subject: [PATCH 3/9] Add comment on why 8px matches sidebar row Co-Authored-By: Claude (Opus 4.7) --- web_src/css/repo.css | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 46176ededb399..24d19130462a0 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -200,6 +200,7 @@ td .commit-summary { .repo-editor-header { display: flex; + /* margin-top and align-items must match .repo-button-row so the file tree toggle button sits at the same y position in both states */ margin: 8px 0 1rem; width: 100%; gap: 0.5em; From a6f34668ed62069c8a27d7f6747ae0b2dc5d0f16 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 22 Apr 2026 19:58:00 +0200 Subject: [PATCH 4/9] Move comment inline Co-Authored-By: Claude (Opus 4.7) --- web_src/css/repo.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 24d19130462a0..cd9fcefcd4b8a 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -200,8 +200,7 @@ td .commit-summary { .repo-editor-header { display: flex; - /* margin-top and align-items must match .repo-button-row so the file tree toggle button sits at the same y position in both states */ - margin: 8px 0 1rem; + margin: 8px 0 1rem; /* match .repo-button-row so the tree toggle button stays put */ width: 100%; gap: 0.5em; align-items: flex-start; From f2410219c039336a83f88f5bd8357cc065dd2444 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 22 Apr 2026 20:02:13 +0200 Subject: [PATCH 5/9] Match .repo-button-row styling in .repo-editor-header Co-Authored-By: Claude (Opus 4.7) --- web_src/css/repo.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index cd9fcefcd4b8a..10c50b1f30381 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -199,11 +199,12 @@ td .commit-summary { } .repo-editor-header { + margin: 8px 0; display: flex; - margin: 8px 0 1rem; /* match .repo-button-row so the tree toggle button stays put */ - width: 100%; - gap: 0.5em; align-items: flex-start; + gap: 8px; + flex-wrap: wrap; + width: 100%; } .repo-editor-header input { From 44668a7f91f18976792e09a6d50ccd1e1f3d2aa1 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 22 Apr 2026 20:04:43 +0200 Subject: [PATCH 6/9] Match input height to toggle button to align editor .field with file view Co-Authored-By: Claude (Opus 4.7) --- web_src/css/repo.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 10c50b1f30381..06f020523f08f 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -201,7 +201,7 @@ td .commit-summary { .repo-editor-header { margin: 8px 0; display: flex; - align-items: flex-start; + align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; @@ -210,7 +210,8 @@ td .commit-summary { .repo-editor-header input { vertical-align: middle !important; width: auto !important; - padding: 7px 8px !important; + height: 30px !important; + padding: 5px 8px !important; margin-right: 5px !important; } From ab65cf18e280351bfa488350f23aa6d867b69853 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 22 Apr 2026 20:13:10 +0200 Subject: [PATCH 7/9] Wrap breadcrumb items instead of the header row Co-Authored-By: Claude (Opus 4.7) --- web_src/css/repo.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 06f020523f08f..d2748a722d2d3 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -203,10 +203,13 @@ td .commit-summary { display: flex; align-items: center; gap: 8px; - flex-wrap: wrap; width: 100%; } +.repo-editor-header .breadcrumb { + flex-wrap: wrap; +} + .repo-editor-header input { vertical-align: middle !important; width: auto !important; From fc71ebf418b4965fc3895e5775d06d9e4636dc23 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 22 Apr 2026 20:24:18 +0200 Subject: [PATCH 8/9] Make .breadcrumb always wrap Co-Authored-By: Claude (Opus 4.7) --- web_src/css/modules/breadcrumb.css | 1 + web_src/css/repo.css | 4 ---- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/web_src/css/modules/breadcrumb.css b/web_src/css/modules/breadcrumb.css index 77e31ef627518..39a896e9bb4b5 100644 --- a/web_src/css/modules/breadcrumb.css +++ b/web_src/css/modules/breadcrumb.css @@ -1,6 +1,7 @@ .breadcrumb { display: flex; align-items: center; + flex-wrap: wrap; gap: 3px; overflow-wrap: anywhere; } diff --git a/web_src/css/repo.css b/web_src/css/repo.css index d2748a722d2d3..40d4336501b76 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -206,10 +206,6 @@ td .commit-summary { width: 100%; } -.repo-editor-header .breadcrumb { - flex-wrap: wrap; -} - .repo-editor-header input { vertical-align: middle !important; width: auto !important; From 6d3ef1e6da0ef84b0a52ac259a298dc7704b00bb Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 23 Apr 2026 02:33:27 +0800 Subject: [PATCH 9/9] Apply suggestion from @wxiaoguang Signed-off-by: wxiaoguang --- web_src/css/repo.css | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 40d4336501b76..bd436e89b06f2 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -199,6 +199,7 @@ td .commit-summary { } .repo-editor-header { + /* it should match ".repo-button-row" so the tree toggle button stays aligned */ margin: 8px 0; display: flex; align-items: center;