From f055199e2a0c893b34b00ce6a86341614af7b213 Mon Sep 17 00:00:00 2001
From: Michael Chen <mechiland@gmail.com>
Date: Mon, 2 Nov 2026 16:06:05 +0800
Subject: [PATCH] fix: prevent PR review menus from being clipped

---
 src/code/diff.css               |  7 +++++++
 src/pages/issues-prs/review.css | 16 +++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/code/diff.css b/src/code/diff.css
index dcbb3fc..9997304 100644
--- a/src/code/diff.css
+++ b/src/code/diff.css
@@ -368,6 +368,13 @@
     overflow-x: auto;
   }
 
+  /* A horizontal scroller also clips vertically. Let an open review menu extend below the diff;
+     horizontal scrolling (including its previous offset) resumes when the dropdown closes. */
+  .repository .diff-file-box .code-diff-split:has(.comment-code-cloud .ui.dropdown.active) {
+    overflow-x: clip;
+    z-index: var(--zIndex-dropdown);
+  }
+
   .repository .diff-file-box .code-diff-split table {
     width: max(100%, 2 * (var(--base-size-64) + var(--base-size-8) + 6 * var(--base-size-48)));
   }
diff --git a/src/pages/issues-prs/review.css b/src/pages/issues-prs/review.css
index 4a387af..c989bba 100644
--- a/src/pages/issues-prs/review.css
+++ b/src/pages/issues-prs/review.css
@@ -9,8 +9,9 @@
  *    and the reply trigger (a default Button here, github.com has no green button in threads).
  */
 
+/* Menus in comment headers must be able to extend past the thread (issue #6).
+   Round the header/footer backgrounds themselves instead of clipping the whole Box. */
 .code-comments-list .conversation-holder {
-  overflow: hidden;
   border: var(--borderWidth-thin) solid var(--borderColor-default);
   border-radius: var(--borderRadius-medium);
   background: var(--bgColor-default);
@@ -25,10 +26,14 @@
   padding-right: var(--base-size-16);
   border: 0;
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
-  border-radius: 0;
+  border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;
   background: var(--bgColor-muted);
 }
 
+.code-comments-list .conversation-holder > .collapsible-comment-box:has(~ .comment-code-cloud.tw-hidden) {
+  border-radius: var(--borderRadius-medium);
+}
+
 .code-comments-list .conversation-holder .file-comment {
   color: var(--fgColor-accent);
   font-family: var(--fontStack-monospace);
@@ -101,6 +106,7 @@
 .code-comments-list .conversation-holder > .comment-code-cloud > .flex-text-block {
   padding: var(--base-size-8) var(--base-size-16);
   border-top: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);
   background: var(--bgColor-muted);
 }
 
@@ -125,6 +131,7 @@
 .code-comments-list .conversation-holder > .comment-code-cloud > form.comment-form {
   padding: 0 var(--base-size-8);
   border-top: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);
   background: var(--bgColor-muted);
 }
 
@@ -157,12 +164,13 @@
    1px --borderColor-muted — then a --bgColor-muted footer with the thread actions. Gitea: every comment is its own
    bordered Box with a caret and the avatar outside, the timeline's .comment-list gutter + line around them. */
 .repository.view.issue .code-diff .conversation-holder > .comment-code-cloud {
-  overflow: hidden;
   border: var(--borderWidth-thin) solid var(--borderColor-default);
   border-radius: var(--borderRadius-medium);
 }
 
 .repository.view.issue .code-diff .conversation-holder .comment-code-cloud > .comment-list {
+  /* The timeline line is hidden here; its stacking context would trap menus below later diff files. */
+  isolation: auto;
   margin: 0;
   padding: 0;
 }
@@ -228,6 +236,7 @@
 .repository.view.issue .code-diff .conversation-holder .comment-code-cloud > .flex-text-block {
   padding: var(--base-size-8) var(--base-size-16);
   border-top: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);
   background: var(--bgColor-muted);
 }
 
@@ -252,6 +261,7 @@
   margin: 0;
   padding: var(--base-size-8) var(--base-size-16) 0;
   border-top: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);
   background: var(--bgColor-muted);
 }