From 8b5562d3501ba9cddbe7280966e494d7eb09d9e2 Mon Sep 17 00:00:00 2001
From: Go MAEDA <maeda@farend.jp>
Date: Thu, 11 Sep 2025 11:45:08 +0000
Subject: [PATCH] Fix responsive layout issue when table headers are enabled in
 related and sub-issues lists (#42477, #43168).

Patch by Mizuki ISHIKAWA (user:ishikawa999).


git-svn-id: https://svn.redmine.org/redmine/trunk@23972 e93f8b46-1217-0410-a6f0-8f06a7374b81
---
 app/assets/stylesheets/responsive.css | 40 +++++++++++++++++++--------
 app/views/issues/_relations.html.erb  |  4 ++-
 app/views/issues/_subtasks.html.erb   |  4 ++-
 app/views/issues/show.html.erb        | 12 ++++----
 4 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/app/assets/stylesheets/responsive.css b/app/assets/stylesheets/responsive.css
index 6f58f7e95..cd779d9c7 100644
--- a/app/assets/stylesheets/responsive.css
+++ b/app/assets/stylesheets/responsive.css
@@ -764,39 +764,44 @@
     text-align: left;
   }
 
-  /* subtasks and related issues list on issue show */
-  #issue_tree .issues, #relations .issues {
+  /* subtasks and related issues list on issue show (without headers) */
+  #issue_tree:not(.with-related-issues-table-headers) table.issues,
+  #relations:not(.with-related-issues-table-headers) table.issues {
     border-collapse: separate;
     border-spacing: 0 1em; /* vertical space between tasks */
   }
 
-  #issue_tree .issue > td:not(.checkbox), #relations .issue > td:not(.checkbox) {
+  #issue_tree:not(.with-related-issues-table-headers) .issue > td:not(.checkbox),
+  #relations:not(.with-related-issues-table-headers) .issue > td:not(.checkbox) {
     display: block;
     float: left;
     text-align: left;
     padding-right: 5px;
   }
 
-  #issue_tree .issue > td.subject, #relations .issue > td.subject {
+  #issue_tree:not(.with-related-issues-table-headers) .issue > td.subject,
+  #relations:not(.with-related-issues-table-headers) .issue > td.subject {
     width: 100%; /* let subject have one full width column */
   }
 
-  #issue_tree .issue:has(.buttons a) > td.subject, #relations .issue:has(.buttons a) > td.subject {
+  #issue_tree:not(.with-related-issues-table-headers) .issue:has(.buttons a) > td.subject,
+  #relations:not(.with-related-issues-table-headers) .issue:has(.buttons a) > td.subject {
     padding-right: 40px;
   }
 
-  #issue_tree .issue > td:not(.subject), #relations .issue > td:not(.subject) {
+  #issue_tree:not(.with-related-issues-table-headers) .issue > td:not(.subject),
+  #relations:not(.with-related-issues-table-headers) .issue > td:not(.subject) {
     width: 20%; /* three columns for all cells that are not subject */
   }
 
-  #issue_tree .issues, #issue_tree .issue,
-  #relations .issues, #relations .issue {
+  #issue_tree:not(.with-related-issues-table-headers) table.issues, #issue_tree:not(.with-related-issues-table-headers) .issue,
+  #relations:not(.with-related-issues-table-headers) table.issues, #relations:not(.with-related-issues-table-headers) .issue {
     position: relative; /* needed for .buttons positioning */
   }
 
   /* positioniong of unline button */
-  #issue_tree .issue > td.buttons,
-  #relations .issue > td.buttons {
+  #issue_tree:not(.with-related-issues-table-headers) .issue > td.buttons,
+  #relations:not(.with-related-issues-table-headers) .issue > td.buttons {
     text-align: right;
     position: absolute;
     right: 0;
@@ -804,11 +809,22 @@
     padding-right: 0;
   }
 
-  #issue_tree .issue .buttons a,
-  #relations .issue .buttons a {
+  #issue_tree:not(.with-related-issues-table-headers) .issue .buttons a,
+  #relations:not(.with-related-issues-table-headers) .issue .buttons a {
     vertical-align: middle;
   }
 
+  /* subtasks and related issues list on issue show (with headers) */
+  #issue_tree.with-related-issues-table-headers .subtasks-wrapper,
+  #relations.with-related-issues-table-headers .relation-issues-wrapper {
+    overflow-x: scroll;
+  }
+
+  #issue_tree.with-related-issues-table-headers .issue > td.subject,
+  #relations.with-related-issues-table-headers .issue > td.subject {
+    min-width: 15rem;
+  }
+
   /* attachment upload form */
   .attachments_fields span {
     position: relative;
diff --git a/app/views/issues/_relations.html.erb b/app/views/issues/_relations.html.erb
index 902292a7f..07b633e43 100644
--- a/app/views/issues/_relations.html.erb
+++ b/app/views/issues/_relations.html.erb
@@ -11,7 +11,9 @@
 
 <% if @relations.present? %>
 <%= form_tag({}, :data => {:cm_url => issues_context_menu_path}) do %>
-  <%= render_issue_relations(@issue, @relations) %>
+  <div class="relation-issues-wrapper">
+    <%= render_issue_relations(@issue, @relations) %>
+  </div>
 <% end %>
 <% end %>
 
diff --git a/app/views/issues/_subtasks.html.erb b/app/views/issues/_subtasks.html.erb
index c84b5baf9..39ad286d7 100644
--- a/app/views/issues/_subtasks.html.erb
+++ b/app/views/issues/_subtasks.html.erb
@@ -8,5 +8,7 @@
 </p>
 
 <%= form_tag({}, :data => {:cm_url => issues_context_menu_path}) do %>
-  <%= render_descendants_tree(@issue) unless @issue.leaf? %>
+  <div class="subtasks-wrapper">
+    <%= render_descendants_tree(@issue) unless @issue.leaf? %>
+  </div>
 <% end %>
diff --git a/app/views/issues/show.html.erb b/app/views/issues/show.html.erb
index 6892269e4..94ab1162a 100644
--- a/app/views/issues/show.html.erb
+++ b/app/views/issues/show.html.erb
@@ -115,16 +115,16 @@ end %>
 
 <% if !@issue.leaf? || User.current.allowed_to?(:manage_subtasks, @project) %>
 <hr />
-<div id="issue_tree">
-<%= render :partial => 'subtasks' %>
-</div>
+<%= tag.div id: 'issue_tree', class: { 'with-related-issues-table-headers': Setting.display_related_issues_table_headers? } do %>
+  <%= render :partial => 'subtasks' %>
+<% end %>
 <% end %>
 
 <% if @relations.present? || User.current.allowed_to?(:manage_issue_relations, @project) %>
 <hr />
-<div id="relations">
-<%= render :partial => 'relations' %>
-</div>
+<%= tag.div id: 'relations', class: { 'with-related-issues-table-headers': Setting.display_related_issues_table_headers? } do %>
+  <%= render :partial => 'relations' %>
+<% end %>
 <% end %>
 
 </div>