Project

General

Profile

Actions

Defect #43591

closed

Context menu is hidden behind sidebar in RTL layout

Added by Yasu Saku 22 days ago. Updated 3 days ago.

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

0%

Estimated time:
Resolution:
Fixed
Affected version:

Description

In RTL environments, the context menu does not display correctly.
When the menu is opened near the left edge of the screen, it may be partially hidden behind the sidebar or extend beyond the visible area of the page.

For example


Files

Actions #1

Updated by Yasu Saku 22 days ago

Simple solution for this problem is as follows:

html[dir="rtl"],
html:has(head link[rel="stylesheet"][href*="/rtl"]) {
  .contextual .drdn-content {
    inset-inline-start: auto;
    inset-inline-end: 0;

    a.icon {
      padding-inline-start: 24px;
      padding-inline-end: 0;
      background-position-x: calc(100% - 4px);

      /* For Redmine 6 and lator */
      &:has(svg) {
        padding-inline-start: 0;
      }
    }
  }
}

Actions #2

Updated by Yasu Saku 22 days ago

Yasu Saku wrote in #note-1:

Simple solution for this problem is as follows:
[...]

Sorry, this solution does not handle submenus in the context menu.

Actions #3

Updated by Go MAEDA 22 days ago

  • Status changed from New to Confirmed
Actions #4

Updated by Go MAEDA 4 days ago

I propose another solution. The attached patch only replaces the CSS right and margin-left/right properties with inset-inline-end and margin-inline-start/end. Because the patch does not rely on checking html[dir="rtl"] or link[rel="stylesheet"], I believe this approach is simpler than the patch suggested in #note-2.

Actions #5

Updated by Go MAEDA 3 days ago

  • Related to Feature #43515: Improve RTL layouts by removing rtl.css and integrating its overrides into application.css using CSS logical properties added
Actions #6

Updated by Go MAEDA 3 days ago

  • Subject changed from Context Menu Is Not Displayed Correctly in RTL Layout to Context menu is hidden behind sidebar in RTL layout
  • Status changed from Confirmed to Resolved
  • Assignee set to Go MAEDA
  • Resolution set to Fixed

Fixed in r24249.

Actions #7

Updated by Go MAEDA 3 days ago

  • Status changed from Resolved to Closed

Merged the change into 6.1-stable branch in r24250.

Actions #8

Updated by Go MAEDA 3 days ago

  • Related to deleted (Feature #43515: Improve RTL layouts by removing rtl.css and integrating its overrides into application.css using CSS logical properties)
Actions

Also available in: Atom PDF