[Django] #35541: Admin changelist total row css issue

[Django]

#35541: Admin changelist total row css issue
-----------------------------------------+------------------------
Reporter: Sarah Boyce | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.1
Severity: Normal | Keywords:
Triage Stage: Unreviewed | Has patch: 0
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 0 |
-----------------------------------------+------------------------
The border of the total row extends longer than the table

This would fix it for me (needs further testing)
{{{#!diff
--- a/django/contrib/admin/static/admin/css/base.css
+++ b/django/contrib/admin/static/admin/css/base.css
@@ -1119,7 +1119,6 @@ a.deletelink:focus, a.deletelink:hover {
line-height: 22px;
margin: 0;
border-top: 1px solid var(--hairline-color);
- width: 100%;
}
}}}

Please update `docs/intro/_images/admin04t.png` with the lastest css
--
Ticket URL: <https://code.djangoproject.com/ticket/35541>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#35541: Admin changelist total row css issue

-------------------------------+--------------------------------------

Reporter: Sarah Boyce | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.1

Severity: Normal | Resolution:

Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0

-------------------------------+--------------------------------------
Changes (by Sarah Boyce):

* Attachment "image-20240620-132817.png" added.

[Django]

#35541: Admin changelist total row css issue
-------------------------------+--------------------------------------
Reporter: Sarah Boyce | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+--------------------------------------
Changes (by Sarah Boyce):

* Attachment "image-20240620-132917.png" added.

[Django]

#35541: Admin changelist total row css issue
-------------------------------+--------------------------------------
Reporter: Sarah Boyce | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+--------------------------------------

Description changed by Sarah Boyce:

Old description:

> The border of the total row extends longer than the table
>
> This would fix it for me (needs further testing)
> {{{#!diff
> --- a/django/contrib/admin/static/admin/css/base.css
> +++ b/django/contrib/admin/static/admin/css/base.css
> @@ -1119,7 +1119,6 @@ a.deletelink:focus, a.deletelink:hover {
> line-height: 22px;
> margin: 0;
> border-top: 1px solid var(--hairline-color);
> - width: 100%;
> }
> }}}
>
> Please update `docs/intro/_images/admin04t.png` with the lastest css

New description:

The border of the total row extends longer than the table

[[Image(image-20240620-132817.png)]]

This would fix it for me (needs further testing)
{{{#!diff
--- a/django/contrib/admin/static/admin/css/base.css
+++ b/django/contrib/admin/static/admin/css/base.css
@@ -1119,7 +1119,6 @@ a.deletelink:focus, a.deletelink:hover {
line-height: 22px;
margin: 0;
border-top: 1px solid var(--hairline-color);
- width: 100%;
}
}}}

[[Image(image-20240620-132917.png)]]

Please update `docs/intro/_images/admin04t.png` with the lastest css

--

--
Ticket URL: <https://code.djangoproject.com/ticket/35541#comment:1>

[Django]

#35541: Admin changelist total row css issue
-------------------------------+--------------------------------------
Reporter: Sarah Boyce | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0

Easy pickings: 1 | UI/UX: 0

-------------------------------+--------------------------------------
Changes (by Sarah Boyce):

* easy: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/35541#comment:2>

[Django]

#35541: Admin changelist total row css issue
-------------------------------+--------------------------------------
Reporter: Sarah Boyce | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------+--------------------------------------

Description changed by Sarah Boyce:

Old description:

> The border of the total row extends longer than the table
>

I also believe the following related images should be updated with the
lastest css:
- `docs/intro/_images/admin04t.png`
- `docs/intro/_images/admin06t.png`
- `docs/intro/_images/admin12t.png`

--
--
Ticket URL: <https://code.djangoproject.com/ticket/35541#comment:3>

[Django]

#35541: Admin changelist total row css issue
-------------------------------+------------------------------------

Reporter: Sarah Boyce | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:

Keywords: | Triage Stage: Accepted

Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------+------------------------------------

Changes (by Natalia Bidart):

* stage: Unreviewed => Accepted

Comment:

Great catch Sarah, thank you! As far as I can see this is an issue in 5.0
and 4.2 as well, so not a release blocker for 5.0.
--
Ticket URL: <https://code.djangoproject.com/ticket/35541#comment:4>

[Django]

#35541: Admin changelist total row css issue
-------------------------------+------------------------------------
Reporter: Sarah Boyce | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------+------------------------------------

Comment (by tabiva):

Hi all, I would like to take on the bug and test the fix proposed by
Sarah, I believe I can handle it!
--
Ticket URL: <https://code.djangoproject.com/ticket/35541#comment:5>

[Django]

#35541: Admin changelist total row css issue
-------------------------------+------------------------------------

Reporter: Sarah Boyce | Owner: tabiva
Type: Bug | Status: assigned

Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------+------------------------------------

Changes (by tabiva):

* owner: nobody => tabiva
* status: new => assigned

--
Ticket URL: <https://code.djangoproject.com/ticket/35541#comment:6>

[Django]

#35541: Admin changelist total row css issue
-------------------------------+------------------------------------
Reporter: Sarah Boyce | Owner: tabiva
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------+------------------------------------

Description changed by Sarah Boyce:

Old description:

> The border of the total row extends longer than the table
>
> [[Image(image-20240620-132817.png)]]
>
> This would fix it for me (needs further testing)
> {{{#!diff
> --- a/django/contrib/admin/static/admin/css/base.css
> +++ b/django/contrib/admin/static/admin/css/base.css
> @@ -1119,7 +1119,6 @@ a.deletelink:focus, a.deletelink:hover {
> line-height: 22px;
> margin: 0;
> border-top: 1px solid var(--hairline-color);
> - width: 100%;
> }
> }}}
>
> [[Image(image-20240620-132917.png)]]
>

> I also believe the following related images should be updated with the
> lastest css:
> - `docs/intro/_images/admin04t.png`
> - `docs/intro/_images/admin06t.png`
> - `docs/intro/_images/admin12t.png`

New description:

The border of the total row extends longer than the table

[[Image(image-20240620-132817.png)]]

This would fix it for me (needs further testing)
{{{#!diff
--- a/django/contrib/admin/static/admin/css/base.css
+++ b/django/contrib/admin/static/admin/css/base.css
@@ -1119,7 +1119,6 @@ a.deletelink:focus, a.deletelink:hover {
line-height: 22px;
margin: 0;
border-top: 1px solid var(--hairline-color);
- width: 100%;
}
}}}

[[Image(image-20240620-132917.png)]]

I also believe the following related images should be updated with the
lastest css:
- `docs/intro/_images/admin04t.png`
- `docs/intro/_images/admin06t.png`

--
--
Ticket URL: <https://code.djangoproject.com/ticket/35541#comment:7>

[Django]

#35541: Admin changelist total row css issue
-------------------------------+------------------------------------
Reporter: Sarah Boyce | Owner: tabiva
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------+------------------------------------

Comment (by Sarah Boyce):

An alternative would be to add `box-sizing: border-box;` to `.paginator`
The combination of left and right padding applied from `.module p` and the
`width: 100%;` from `.paginator` makes it "overflow"
To me, less css is better so would want some testing to confirm we can't
just delete `width: 100%;`
Note that the top action row `<div class="actions">` has the same issue on
inspection
--
Ticket URL: <https://code.djangoproject.com/ticket/35541#comment:8>

[Django]

#35541: Admin changelist total row css issue
-------------------------------+------------------------------------
Reporter: Sarah Boyce | Owner: tabiva
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------+------------------------------------

Changes (by arjun omray):

* Attachment "Screenshot from 2024-07-08 08-27-26.png" added.

--
Ticket URL: <https://code.djangoproject.com/ticket/35541>

[Django]

#35541: Admin changelist total row css issue
-------------------------------+------------------------------------
Reporter: Sarah Boyce | Owner: tabiva
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------+------------------------------------
Changes (by arjun omray):

* Attachment "Screenshot from 2024-07-08 08-27-26.png" removed.

[Django]

#35541: Admin changelist total row css issue
-------------------------------+------------------------------------
Reporter: Sarah Boyce | Owner: tabiva
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------+------------------------------------

Comment (by arjun omray):

While trying to work on this issue myself, I found that adding `width:
100%` on `a.deletelink:focus, a.deletelink:hover` would fix one of the
lines but the bottom line would still be extended. This is not the case
when using `box-sizing: border-box` on `.paginator`, both the lines are of
proper width.

Also, I was unable to replicate the issue on `<div class="actions">`.

Should I make a PR with `box-sizing: border-box` on `.paginator`?
--
Ticket URL: <https://code.djangoproject.com/ticket/35541#comment:9>

[Django]

#35541: Admin changelist total row css issue
-------------------------------+------------------------------------
Reporter: Sarah Boyce | Owner: tabiva
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------+------------------------------------

Comment (by Sarah Boyce):

Replying to [comment:9 arjun omray]:

> Should I make a PR with `box-sizing: border-box` on `.paginator`?

Yes please, thank you
--
Ticket URL: <https://code.djangoproject.com/ticket/35541#comment:10>

[Django]

#35541: Admin changelist total row css issue
-------------------------------+------------------------------------
Reporter: Sarah Boyce | Owner: tabiva
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------+------------------------------------

Comment (by arjun omray):

Here is the PR for required changes.
[https://github.com/django/django/pull/18352]
--
Ticket URL: <https://code.djangoproject.com/ticket/35541#comment:11>

[Django]

#35541: Admin changelist total row css issue

-------------------------------+---------------------------------------
Reporter: Sarah Boyce | Owner: arjun omray

Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted

Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0

-------------------------------+---------------------------------------
Changes (by Sarah Boyce):

* has_patch: 0 => 1
* owner: tabiva => arjun omray

--
Ticket URL: <https://code.djangoproject.com/ticket/35541#comment:12>

[Django]

#35541: Admin changelist total row css issue

-------------------------------------+-------------------------------------

Reporter: Sarah Boyce | Owner: arjun
| omray
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:

Keywords: | Triage Stage: Ready for
| checkin

Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0

-------------------------------------+-------------------------------------
Changes (by Sarah Boyce):

* stage: Accepted => Ready for checkin

--
Ticket URL: <https://code.djangoproject.com/ticket/35541#comment:13>

[Django]

#35541: Admin changelist total row css issue
-------------------------------------+-------------------------------------
Reporter: Sarah Boyce | Owner: arjun
| omray

Type: Bug | Status: closed
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution: fixed

Keywords: | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce <42296566+sarahboyce@…>):

* resolution: => fixed
* status: assigned => closed

Comment:

In [changeset:"5559011c2bfd44a93b0929802be26bfeffbc4e95" 5559011c]:
{{{#!CommitTicketReference repository=""
revision="5559011c2bfd44a93b0929802be26bfeffbc4e95"
Fixed #35541 -- Fixed paginator border in admin CSS.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/35541#comment:14>