refactor: update login-form to use column flex on slotted form (#9689)

web-padawan · web-flow · commit f56c531eae47 · 2025-07-11T12:45:29.000+03:00
diff --git a/dev/login-form.html b/dev/login-form.html
@@ -60,19 +60,11 @@
 
   <body>
     <style>
-      #wrapper {
-        background-color: var(--lumo-contrast-5pct);
-        justify-content: center;
-        padding: var(--lumo-space-l);
-        display: flex !important;
-      }
-
       .controls {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
         gap: 2rem;
         margin-bottom: 2rem;
-        font-size: 0.875rem;
       }
 
       .control-group {
diff --git a/packages/login/src/vaadin-login-form.js b/packages/login/src/vaadin-login-form.js
@@ -71,11 +71,6 @@ class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolylitMixin(L
   /** @protected */
   render() {
     return html`
-      <style>
-        vaadin-login-form-wrapper > form > * {
-          width: 100%;
-        }
-      </style>
       <vaadin-login-form-wrapper
         id="vaadinLoginFormWrapper"
         theme="${ifDefined(this._theme)}"
diff --git a/packages/login/theme/lumo/vaadin-login-form-wrapper-styles.js b/packages/login/theme/lumo/vaadin-login-form-wrapper-styles.js
@@ -6,14 +6,20 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 
 const loginFormWrapper = css`
   :host {
-    max-width: calc(var(--lumo-size-m) * 10);
+    width: calc(var(--lumo-size-m) * 10);
+    max-width: 100%;
     background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
   }
 
   [part='form'] {
     padding: var(--lumo-space-l);
   }
 
+  ::slotted(form) {
+    display: flex;
+    flex-direction: column;
+  }
+
   [part='form-title'] {
     margin-top: calc(var(--lumo-font-size-xxxl) - var(--lumo-font-size-xxl));
     color: var(--lumo-header-text-color);
diff --git a/packages/vaadin-lumo-styles/src/components/login-form-wrapper.css b/packages/vaadin-lumo-styles/src/components/login-form-wrapper.css
@@ -13,7 +13,8 @@
     -webkit-text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    max-width: calc(var(--lumo-size-m) * 10);
+    width: calc(var(--lumo-size-m) * 10);
+    max-width: 100%;
     background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
   }
 
@@ -29,6 +30,11 @@
     padding: var(--lumo-space-l);
   }
 
+  ::slotted(form) {
+    display: flex;
+    flex-direction: column;
+  }
+
   [part='form-title'] {
     margin: 0;
     margin-top: calc(var(--lumo-font-size-xxxl) - var(--lumo-font-size-xxl));
