Page MenuHomePhabricator
Create Task
Maniphest T361737

[EPIC] With the current layout, some elements extend beyond the content area and overlap sticky page tools
Open, HighPublic
Actions

Description

Buttons, wide page objects and some interfaces do not adapt to a narrow content area, causing sticky page tools are to overlap.

Examples:

Screenshot 2024-05-15 at 9.56.27 AM.png (653×765 px, 189 KB)

Note: table overlaps page tools on right

  • Certain special pages e.g. Special:Notifications are not optimized for Vector 2022's side bar menus. It's not clear if this should be fixed by skinStyles or a more generic solution.

    {F53352922}
  • Possible solutions
  • Horizontal scrollable tables
  • Use of container queries or CSS grid fit-content to limit the tables to their container.

Related Objects
Search...

Event Timeline

Iniquity created this task.Apr 3 2024, 7:23 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 3 2024, 7:23 PM
Iniquity added subtasks: T330527: Wider tables overlap sticky page tools (Upstream Minerva's responsive table styles to core SkinModule), T360578: Special:Notifications - expanded Main menu and Tools menu overlap content for screens under 1300px width , T361676: The watchlist menu extends beyond its area on mobile between 1200-1237px.Apr 3 2024, 7:24 PM
Iniquity edited subtasks, added: T358424: The watchlist menu extends beyond its area on mobile; removed: T361676: The watchlist menu extends beyond its area on mobile between 1200-1237px.Apr 3 2024, 7:28 PM
Iniquity edited subtasks, added: T337954: When both sidebars are open on Vector 2022, the Special:Notifications interface overlaps the right sidebar; removed: T360578: Special:Notifications - expanded Main menu and Tools menu overlap content for screens under 1300px width .Apr 3 2024, 7:37 PM
Jdlrobson renamed this task from With the current layout, some elements extend beyond the content area and overlap sticky page tools to [Tracking] With the current layout, some elements extend beyond the content area and overlap sticky page tools.Apr 5 2024, 12:59 AM
Jdlrobson added a project: Web-Team-Backlog.
ovasileva triaged this task as Medium priority.Apr 11 2024, 8:51 AM
ovasileva moved this task from Incoming to Groomed on the Web-Team-Backlog board.
Jdlrobson added a subtask: T359888: Upstream Minerva's responsive table styles to core SkinModule.Wed, May 15, 3:58 PM
Jdlrobson assigned this task to bwang.Wed, May 15, 4:56 PM
Jdlrobson subscribed.

Bernard will be point person for this work. I've asked him to take a look and think about this problem space.

Jdlrobson renamed this task from [Tracking] With the current layout, some elements extend beyond the content area and overlap sticky page tools to [EPIC] With the current layout, some elements extend beyond the content area and overlap sticky page tools.Wed, May 15, 4:57 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a comment.Wed, May 15, 4:59 PM

With the dropping of IE11 container queries are very viable here: https://caniuse.com/css-container-queries but it's worth noting our LESS parser does not support them, so we'd need to do this in a CSS file.

ovasileva raised the priority of this task from Medium to High.Wed, May 15, 5:15 PM
Jdlrobson added a subtask: T336679: Improve large table lint handling of nested tables and tables with image tags.Wed, May 15, 5:29 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL