Please help me understand the style change of admin page in 6.1

Using Django The Admin
1

Before 6.1, form fields are shown next to their labels in the same row.

Since 6.1, “Form fields are now shown below their respective labels instead of next to them.”

The old style looks organized and space-efficient, especially on a (almost any) computer screen.

The new style looks disorganized and space-inefficient. It forces you to scroll a lot if there are many fields, textareas, select boxes, etc.

What’s the reason or motivation behind this change? This is purely a design (thus a subjective) change. Are most Django developers/admins nowadays mobile device users instead of computer users?

If we want to accommodate for mobile device users, isn’t the admin CSS already responsive before 6.1?

2

#34643 (Move admin form labels to a more accessible place) – Django This was the ticket from there you can get to the PR(s) to see other discussion that happened at the time.

5

This change comes from ticket #34643. It’s intentional (accessibility), and there’s no setting to revert it. But you can bring back the old layout with a small CSS override.

  1. Create your_app/static/admin/css/restore_labels.css:
.aligned .form-row {

display: grid;

grid-template-columns: 160px 1fr;

gap: .4rem 1rem;


}

.aligned .form-row > label {

text-align: right;

padding-top: .35rem;@media

}

@media (max-width: 767px) {

.aligned .form-row { grid-template-columns: 1fr; }

.aligned .form-row > label { text-align: left; }

}
  1. Load it in your_app/templates/admin/base_site.html:
{% extends "admin/base.html" %}

{% load static %}

{% block extrastyle %}{{ block.super }}

<link rel="stylesheet" href="{% static 'admin/css/restore_labels.css' %}">

{% endblock %}

Put your app before django.contrib.admin in INSTALLED_APPS so the template wins.

6

The linked ticket makes the motivation much clearer.

While I also preferred the previous layout from a space-efficiency perspective, improving accessibility is a solid reason for the change. If labels are now associated more reliably with their fields and the experience is better for assistive technologies, that seems like a reasonable trade-off.

It would be nice, though, if there were an optional admin setting or CSS class to restore the compact horizontal layout for projects where screen space is more important than the default presentation.