Project

General

Profile

Actions

Defect #41873

closed

Table layout breaks due to .icon class on td elements

Added by Mizuki ISHIKAWA 18 days ago. Updated 7 days ago.

Status:
Closed
Priority:
Normal
Assignee:
Category:
UI
Target version:
Start date:
Due date:
% Done:

0%

Estimated time:
Resolution:
Fixed
Affected version:

Description

The table layout is breaking because td elements have the .icon class applied to them. When the .icon class is used, its display: inline-flex; style is applied, which disrupts the table layout.
This issue is particularly noticeable in themes with table borders, such as the Alternate theme, where the layout break becomes visually evident.

The attached patch modifies the structure by inserting a span element inside the td element and applying the .icon class to the span. This ensures that the table layout remains intact.

Affected Areas: ( Use Alternate theme )
  • Versions" tab in the project settings
  • forum pages (boards/show)

Files

screenshot 2024-11-26 9.49.46.png (193 KB) screenshot 2024-11-26 9.49.46.png Mizuki ISHIKAWA, 2024-11-26 01:50
screenshot 2024-11-26 9.49.57.png (140 KB) screenshot 2024-11-26 9.49.57.png Mizuki ISHIKAWA, 2024-11-26 01:51
fix-td-layout.diff (2.11 KB) fix-td-layout.diff Mizuki ISHIKAWA, 2024-11-26 01:55
version-settings-after-fix.png (40.3 KB) version-settings-after-fix.png Katsuya HIDAKA, 2024-11-27 08:34
version-setings-before-fix.png (40.6 KB) version-setings-before-fix.png Katsuya HIDAKA, 2024-11-27 08:34
fix-td-layout-shared-version-padding.diff (2.73 KB) fix-td-layout-shared-version-padding.diff Katsuya HIDAKA, 2024-11-27 08:48
screenshot 2024-12-03 13.39.34.png (20.1 KB) screenshot 2024-12-03 13.39.34.png Mizuki ISHIKAWA, 2024-12-03 05:43
screenshot 2024-12-03 13.40.38.png (20.2 KB) screenshot 2024-12-03 13.40.38.png Mizuki ISHIKAWA, 2024-12-03 05:43
screenshot 2024-12-03 13.41.38.png (20.1 KB) screenshot 2024-12-03 13.41.38.png Mizuki ISHIKAWA, 2024-12-03 05:44
result-when-the-subject-is-long.png (61.4 KB) result-when-the-subject-is-long.png Katsuya HIDAKA, 2024-12-03 06:28
Actions #1

Updated by Go MAEDA 18 days ago

  • Tracker changed from Patch to Defect
  • Category set to UI
  • Status changed from New to Confirmed
  • Target version set to 6.0.2
Actions #2

Updated by Katsuya HIDAKA 17 days ago

I tested the patch and found that the layout of the Versions settings table is broken. An unnecessary padding is added to the left of the shared version names from other projects.

This issue occurs because the following style is incorrectly applied by the attached patch.
https://github.com/redmine/redmine/blob/1612d85ad808c36d7315c75cad1e4bdfbbb9db62/app/assets/stylesheets/application.css#L431

tr.version td.name:not(.icon-shared) { padding-left: 20px; }

To fix this, the following change resolves the issue:

 tr.version.closed, tr.version.closed a { color: #999; }
-tr.version td.name:not(.icon-shared) { padding-left: 20px; }
+tr.version td.name:not(:has(.icon-shared)) { padding-left: 20px; }
 tr.version td.date, tr.version td.status, tr.version td.sharing { text-align: center; white-space:nowrap; }

However, since the .icon-shared class is no longer needed, I updated the patch to rely on the .shared class applied to <tr class="version shared"> tags instead. I have attached the updated patch as "fix-td-layout-shared-version-padding.diff".

Additionally, I removed the unnecessary .icon-sticky and .icon-locked classes from the forums page, as they are also no longer required. These changes are included in the attached patch.

Below is the corrected Versions settings table after applying the updated patch:

Actions #3

Updated by Mizuki ISHIKAWA 16 days ago

Katsuya HIDAKA

Thank you. I have confirmed that the patch seems to work well.

Actions #4

Updated by Go MAEDA 16 days ago

  • Status changed from Confirmed to Resolved
  • Assignee set to Go MAEDA
  • Resolution set to Fixed

Committed the fix in r23317. Thank you.

Actions #5

Updated by Go MAEDA 14 days ago

  • Status changed from Resolved to Closed

Merged the fix into the 6.0-stable branch in r23334.

Actions #6

Updated by Mizuki ISHIKAWA 11 days ago

The position of the links on the forum page was shifted due to the change applied in this issue.
Please apply the following fix:

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 1c9595172..81182b2ce 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -422,6 +422,7 @@ tr.message { height: 2.6em; }
 tr.message td.created_on { white-space: nowrap; }
 tr.message td.last_message { font-size: 93%; white-space: nowrap; }
 tr.message.sticky td.subject { font-weight: bold; }
+tr.message:not(.sticky):not(.locked) td.subject { padding-left: 20px; }

 body.avatars-on #replies .message.reply {padding-left: 32px;}
 #replies .reply:target h4.reply-header {background-color:#DDEEFF;}

Before this issue's change After this issue's change After applying this fix
Actions #7

Updated by Mizuki ISHIKAWA 11 days ago

The following modification might make the intention clearer than the diff provided in #note-6:

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 1c9595172..89d385ca0 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -422,6 +422,7 @@ tr.message { height: 2.6em; }
 tr.message td.created_on { white-space: nowrap; }
 tr.message td.last_message { font-size: 93%; white-space: nowrap; }
 tr.message.sticky td.subject { font-weight: bold; }
+tr.message td.subject:not(:has(.icon)) { padding-left: 20px; }

 body.avatars-on #replies .message.reply {padding-left: 32px;}
 #replies .reply:target h4.reply-header {background-color:#DDEEFF;}

Actions #8

Updated by Katsuya HIDAKA 11 days ago

Thank you for providing the fix. I reviewed the #note-7 patch and tested the following cases:

  • When the sticky icon is present.
  • When the lock icon is present.
  • When no icons are present.
  • When the subject is long (see attached screenshot).

Tested in Chrome, Safari, and Firefox. Everything works as expected.

Actions #9

Updated by Go MAEDA 11 days ago

Committed the #note-7 in r23348 and merged it into 6.0-stable in r23349. Thank you.

Actions

Also available in: Atom PDF