Opened 3 months ago

Closed 3 months ago

Last modified 3 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 3 months ago.
Example of issue in Django 5.0
django-admin-plus-sign-chopped-4.2.png (29.2 KB ) - added by Natalia Bidart 3 months ago.
Example of issue in 4.2
django-admin-selector-overflow.png (133.4 KB ) - added by Natalia Bidart 3 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 3 months ago.
after_34995.png (21.1 KB ) - added by Mariusz Felisiak 3 months ago.

Download all attachments as: .zip

Change History (15)

by Natalia Bidart, 3 months ago

Example of issue in Django 5.0

by Natalia Bidart, 3 months ago

Example of issue in 4.2

comment:1 by Natalia Bidart, 3 months ago

Cc: Tom Carrick added

by Natalia Bidart, 3 months ago

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

comment:2 by Tom Carrick, 3 months ago

Owner: changed from nobody to Tom Carrick
Status: newassigned

comment:3 by Natalia Bidart, 3 months ago

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

comment:4 by Natalia Bidart, 3 months ago

Triage Stage: AcceptedUnreviewed

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

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

Severity: NormalRelease blocker
Triage Stage: UnreviewedAccepted

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 3 months ago by Mariusz Felisiak (previous) (diff)

by Mariusz Felisiak, 3 months ago

Attachment: before_34995.png added

by Mariusz Felisiak, 3 months ago

Attachment: after_34995.png added

comment:6 by Mariusz Felisiak, 3 months ago

Version: dev5.0

comment:7 by Mariusz Felisiak, 3 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, 3 months ago

Has patch: set

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

Resolution: fixed
Status: assignedclosed

In dec8aa6:

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

comment:10 by Natalia <124304+nessita@…>, 3 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