From 71c9afd57a2e306a9922f31a1f4a5ca9dc463868 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bartosz=20Dziewo=C5=84ski?= Date: Sat, 27 Sep 2025 00:16:36 +0200 Subject: [PATCH] Make the login and signup forms wider According to Codex Style Guide: https://doc.wikimedia.org/codex/latest/style-guide/constructing-forms.html#layout forms "should span the entire parent container of the page". We need to leave some space for the account benefits column, so we can't quite do that, but we can make it less cramped. Allow the benefits column to shrink a little, so that this change doesn't push it offscreen at common screen resolutions. Bug: T355853 Bug: T407172 Change-Id: I70bdbd414e2dc871dadc58922b34acb91cd66381 (cherry picked from commit f0cf5e6393663f319f1d7697f4527d9a4635e760) --- .../userlogin.less | 5 ++--- .../signup.less | 9 ++++++++- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/resources/src/mediawiki.special.userlogin.common.styles/userlogin.less b/resources/src/mediawiki.special.userlogin.common.styles/userlogin.less index 917e81519e9..bfb57d76577 100644 --- a/resources/src/mediawiki.special.userlogin.common.styles/userlogin.less +++ b/resources/src/mediawiki.special.userlogin.common.styles/userlogin.less @@ -1,14 +1,13 @@ /* User login and signup forms */ @import 'mediawiki.skin.variables.less'; -@import 'mediawiki.mixins.less'; -@defaultFormWidth: 290px; +@width-login-form: @size-2800; .mw-htmlform { box-sizing: border-box; @media ( min-width: @min-width-breakpoint-tablet ) { - width: @defaultFormWidth; + width: @width-login-form; } } diff --git a/resources/src/mediawiki.special.userlogin.signup.styles/signup.less b/resources/src/mediawiki.special.userlogin.signup.styles/signup.less index c766d7bdc9c..b14fb764346 100644 --- a/resources/src/mediawiki.special.userlogin.signup.styles/signup.less +++ b/resources/src/mediawiki.special.userlogin.signup.styles/signup.less @@ -6,7 +6,14 @@ /* Benefits column CSS to the right (if it fits) of the form, otherwise below. */ display: flex; flex-wrap: wrap; - gap: 50px 100px; + gap: @spacing-300; + + .mw-createacct-benefits-container { + @size-1200: 12em; + flex-basis: @size-1200; + flex-grow: 1; + max-width: max-content; + } } .mw-createacct-benefits-heading {