Problem/Motivation

The Admin theme was derived from Gin, which was based on Claro, which was forked from Seven, which was developed in 2010 or something. This leads to a lot of cruft around the CSS.

Proposed resolution

As part of this, we're going to implement box-sizing: border-box on the root element, and psuedo-elements. This is best practice in the year of our Lord 2026.

There should be no visual changes, and we will confirm this with a visual regression checker tool.

Issue fork drupal-3606582

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mherchel created an issue. See original summary.

saniphilip made their first commit to this issue’s fork.

mukeysh made their first commit to this issue’s fork.

mukeysh opened merge request !16309

mukeysh’s picture

mukeysh commented

Added border-boxing as global styles. Please review.

mukeysh’s picture

mukeysh commented
Status: Active » Needs review
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Needs work

@mukeysh this isn't going to be as simple as adding the CSS properties. Changing the box model is going to result in visual regressions that you'll need to sus out, and fix. In addition, you'll need to find elements where border-box is set and remove that rule.

To help sus out the regressions, you can use https://github.com/mherchel/ddev-drupal-admin-vrt

mukeysh’s picture

mukeysh commented

thank you for clarification

mukeysh’s picture

mukeysh commented

Thanks for the feedback. I reviewed the relevant component styles to identify where box-sizing: border-box was being applied.

I checked the following files:

accordion.pcss.css
action-links.pcss.css
ajax-progress.module.pcss.css
autocomplete-loading.module.pcss.css
batch.pcss.css
blocks.pcss.css
breadcrumbs.pcss.css
button.pcss.css
card.pcss.css
ckeditor.pcss.css
container-inline.pcss.css
container-inline.module.pcss.css
content-header.pcss.css
contextual-links.pcss.css
dblog.pcss.css
details.pcss.css
dialog.pcss.css
description-toggle.pcss.css
divider.pcss.css
edit-form.pcss.css
entity-meta.pcss.css
fieldset.pcss.css
file.pcss.css

Among these, I found box-sizing: border-box rules in a few components. I removed those rules where appropriate, updated the related styles to account for the box model change, and tested the affected components to verify that there were no visual regressions.

The changes are currently in:

ajax-progress.module
button
card
ckeditor5
contextual-links
details
edit-form
form--text

Please review this if this is fine i will continue with the rest.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Looking right. But be sure to run the visual regression tests. There should be no visual changes.