Opened 8 months ago

Closed 8 months ago

Last modified 8 months ago

#35001 closed Bug (fixed)

Add related object icon (green plus sign) is not fully visible in some screens

Reported by: Natalia Bidart Owned by: Tom Carrick
Component: contrib.admin Version: 5.0
Severity: Release blocker Keywords:
Cc: Tom Carrick Triage Stage: Accepted
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description

While reviewing and debugging ticket #34995, I've noticed that the "green plus sign" used to add related objects is not fully visible in some screens (see attached). As far as I've investigated, this may be caused by having the following in responsive.css for @media (max-width: 767px):

    .aligned .form-row,
    .aligned .form-row > div {
        max-width: 100vw;
    }

I'm unclear if this is a release blocker though.

Attachments (5)

django-admin-plus-sign-chopped.png​ (29.5 KB ) - added by Natalia Bidart 8 months ago.
Example of issue in Django 5.0
django-admin-plus-sign-chopped-4.2.png​ (29.2 KB ) - added by Natalia Bidart 8 months ago.
Example of issue in 4.2
django-admin-selector-overflow.png​ (133.4 KB ) - added by Natalia Bidart 8 months ago.
Example of how the selector overflows the overall form row margin (RTL is irrelevant in this case I think)
before_34995.png​ (20.2 KB ) - added by Mariusz Felisiak 8 months ago.
after_34995.png​ (21.1 KB ) - added by Mariusz Felisiak 8 months ago.

Download all attachments as: .zip

Change History (15)

by Natalia Bidart, 8 months ago

Attachment: django-admin-plus-sign-chopped.png​ added

Example of issue in Django 5.0

by Natalia Bidart, 8 months ago

Attachment: django-admin-plus-sign-chopped-4.2.png​ added

Example of issue in 4.2

comment:1 by Natalia Bidart, 8 months ago

Cc: Tom Carrick added

Regression in d687febce5868545f99974d2499a91f81a32fef5

by Natalia Bidart, 8 months ago

Attachment: django-admin-selector-overflow.png​ added

Example of how the selector overflows the overall form row margin (RTL is irrelevant in this case I think)

comment:2 by Tom Carrick, 8 months ago

Owner: changed from nobody to Tom Carrick
Status: new → assigned

comment:3 by Natalia Bidart, 8 months ago

Summary: Admin: Add related object icon (green plus sign) is not fully visible in some screens → Add related object icon (green plus sign) is not fully visible in some screens
Triage Stage: Unreviewed → Accepted
Version: 4.2 → dev

comment:4 by Natalia Bidart, 8 months ago

Triage Stage: Accepted → Unreviewed

Sorry I shouldn't have accepted my own ticket :-)

in reply to:  1 comment:5 by Mariusz Felisiak, 8 months ago

Severity: Normal → Release blocker
Triage Stage: Unreviewed → Accepted

Replying to Natalia Bidart:

Regression in d687febce5868545f99974d2499a91f81a32fef5

I don't think it's a proper commit. I can see "+" before and after this commit, it may be in different places but it's still visible. However 999ba9db6d6331eaa58af77debba42754bcc1a8e made it not visible in some screens when sidebar is open, so we need to treat this as a regression.

Before 999ba9db6d6331eaa58af77debba42754bcc1a8e

After 999ba9db6d6331eaa58af77debba42754bcc1a8e

Last edited 8 months ago by Mariusz Felisiak (previous) (diff)

by Mariusz Felisiak, 8 months ago

Attachment: before_34995.png​ added

by Mariusz Felisiak, 8 months ago

Attachment: after_34995.png​ added

comment:6 by Mariusz Felisiak, 8 months ago

Version: dev → 5.0

comment:7 by Mariusz Felisiak, 8 months ago

Maybe we could add flex-wrap: wrap-reverse to make it always visible, it's not perfect, but ...

  • django/contrib/admin/static/admin/css/widgets.css 

    diff --git a/django/contrib/admin/static/admin/css/widgets.css b/django/contrib/admin/static/admin/css/widgets.css
index f5b769333b..64628652ec 100644
    a b ul.timelist, .timelist li {  
    582582    display: flex;
    583583    gap: 10px;
    584584    flex-grow: 1;
     585    flex-wrap: wrap-reverse;
    585586}
    586587
    587588.related-widget-wrapper-link {

comment:8 by Tom Carrick, 8 months ago

Has patch: set

​PR

comment:9 by GitHub <noreply@…>, 8 months ago

Resolution: → fixed
Status: assigned → closed

In dec8aa6:

Fixed #35001 -- Fixed position of related widget action icons in admin for some screen sizes.

comment:10 by Natalia <124304+nessita@…>, 8 months ago

In 6c502734:

[5.0.x] Fixed #35001 -- Fixed position of related widget action icons in admin for some screen sizes.

Backport of dec8aa68f6a2729e57a58c36a21d36daa9a99fed from main

Note: See TracTickets for help on using tickets.
Back to Top