[Django] #37144: Filters appear above main table in admin in Firefox

[Django]

#37144: Filters appear above main table in admin in Firefox
-------------------------------+-----------------------------------------
Reporter: Alyssa Herzog | Type: Bug
Status: new | Component: contrib.admin
Version: 6.0 | Severity: Normal
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------+-----------------------------------------
While working on upgrading one of our Django based services I noticed that
the filters for the admin panel in Firefox sit above the main table. In
Chrome and Safari it seems to work as intended and it's on the right hand
side of the table. I created an empty project to validate it wasn't
something our code was doing (screenshots to follow) and sure enough it
happens even on an empty project (only ran db migrations to make the
default sqlite db and made a superuser to access the admin page). In our
project it seems to happen across all admin pages.

From the empty project:
{{{
$ pip freeze
asgiref==3.11.1
Django==6.0.6
sqlparse==0.5.5
}}}

I searched for a ticket already existing about this but couldn't find one,
but if I simply couldn't find it please forgive me and let me know.

If I am missing any information, please let me know so I can update this
issue, thank you.
--
Ticket URL: <https://code.djangoproject.com/ticket/37144>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#37144: Filters appear above main table in admin in Firefox
-------------------------------+--------------------------------------

Reporter: Alyssa Herzog | Owner: (none)

Type: Bug | Status: new
Component: contrib.admin | Version: 6.0

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: 1
-------------------------------+--------------------------------------

Changes (by Alyssa Herzog):

* Attachment "Chrome Screenshot 2026-06-04 at 10.26.54 AM.png" added.

[Django]

#37144: Filters appear above main table in admin in Firefox
-------------------------------+--------------------------------------
Reporter: Alyssa Herzog | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 6.0
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: 1
-------------------------------+--------------------------------------
Changes (by Alyssa Herzog):

* Attachment "Firefox Screenshot 2026-06-04 at 10.26.48 AM.png" added.

[Django]

#37144: Filters appear above main table in admin in Firefox
-------------------------------+--------------------------------------
Reporter: Alyssa Herzog | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 6.0
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: 1
-------------------------------+--------------------------------------

Description changed by Alyssa Herzog:

Old description:

> While working on upgrading one of our Django based services I noticed
> that the filters for the admin panel in Firefox sit above the main table.
> In Chrome and Safari it seems to work as intended and it's on the right
> hand side of the table. I created an empty project to validate it wasn't
> something our code was doing (screenshots to follow) and sure enough it
> happens even on an empty project (only ran db migrations to make the
> default sqlite db and made a superuser to access the admin page). In our
> project it seems to happen across all admin pages.
>
> From the empty project:
> {{{
> $ pip freeze
> asgiref==3.11.1
> Django==6.0.6
> sqlparse==0.5.5
> }}}
>
> I searched for a ticket already existing about this but couldn't find
> one, but if I simply couldn't find it please forgive me and let me know.
>
> If I am missing any information, please let me know so I can update this
> issue, thank you.

New description:

While working on upgrading one of our Django based services I noticed that
the filters for the admin panel in Firefox sit above the main table. In
Chrome and Safari it seems to work as intended and it's on the right hand
side of the table. I created an empty project to validate it wasn't
something our code was doing (screenshots to follow) and sure enough it
happens even on an empty project (only ran db migrations to make the
default sqlite db and made a superuser to access the admin page). In our
project it seems to happen across all admin pages.

I should also note both images in the screenshot are the same size (I had
to resize the Firefox one due to being too large to attach) it doesn't
matter what size the browsers are, they retain the respective position of
the list filter.

From the empty project:
{{{
$ pip freeze
asgiref==3.11.1
Django==6.0.6
sqlparse==0.5.5
}}}

I searched for a ticket already existing about this but couldn't find one,
but if I simply couldn't find it please forgive me and let me know.

If I am missing any information, please let me know so I can update this
issue, thank you.

--

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

[Django]

#37144: Filters appear above main table in admin in Firefox
-------------------------------+--------------------------------------
Reporter: Alyssa Herzog | Owner: (none)

Type: Bug | Status: closed
Component: contrib.admin | Version: 6.0
Severity: Normal | Resolution: worksforme

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

Changes (by Jacob Walls):

* resolution: => worksforme
* status: new => closed

Comment:

Thanks for the report, but it looks fine for me in Firefox 151. A few
things:
- What Firefox version is this? The `<search>` element is not positioned
correctly here. Support for `<search>` may be problematic on your version.
- Is it the same on other patch releases of 6.0.x? When was the last
release where it worked?
- Does the element appear correctly if you apply a style rule like

{{{#!css
search {
display: block;
}
}}}

If so, that makes me feel like it's a Firefox quirk on a lower version.

Happy to hear your answers, just setting a triage state in the meantime.
--
Ticket URL: <https://code.djangoproject.com/ticket/37144#comment:2>

[Django]

#37144: Filters appear above main table in admin in Firefox
-------------------------------+--------------------------------------
Reporter: Alyssa Herzog | Owner: (none)
Type: Bug | Status: closed
Component: contrib.admin | Version: 6.0
Severity: Normal | Resolution: worksforme
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------+--------------------------------------

Comment (by Alyssa Herzog):

Using 152.0b7 of the developer edition of Firefox, which reports it's the
latest for that edition. Downloading the non developer version of Firefox
version 151.0.3, does seem to look correct.

Our project was last using 5.2.x and it looked fine there, I'll look into
the different patch versions later today, this issue is non-blocking (I'm
the only one at the company using a non-chrome based browser) and so my
focus is getting it updated and ready.

Adding the display CSS rule to search did not fix it in the developer
edition.

That being said, guessing this is a Firefox issue not a Django issue
anyways.

Thank you for the questions and insight.
--
Ticket URL: <https://code.djangoproject.com/ticket/37144#comment:3>