Fix review changes request

- Fix i18n demo looking
- Fix vaadin-login max-width and background
- Fix inputs focus ring being cropped

demo/i18n-demos.html

@@ -11,7 +11,20 @@ <h3>Internationalization</h3>
     <p>Set the <code>i18n</code> object to localize the component</p>
     <vaadin-demo-snippet id="login-demo-internationalisation">
       <template preserve-content>
-        <vaadin-login></vaadin-login>
+        <style include="lumo-typography lumo-color">
+          </style>
+        </custom-style>
+        <style>
+          main {
+            display: flex;
+            justify-content: center;
+            background: var(--lumo-base-color) linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
+            padding: var(--lumo-space-m);
+          }
+        </style>
+        <main>
+          <vaadin-login></vaadin-login>
+        </main>
         <script>
           window.addDemoReadyListener('#login-demo-internationalisation', function(document) {
             const login = document.querySelector('vaadin-login');

theme/lumo/vaadin-login-overlay-styles.html

@@ -174,8 +174,8 @@
       :host([theme~="with-overlay"]) {
         min-height: 100%;
         display: flex;
-        align-items: center;
         justify-content: center;
+        max-width: 100%;
       }
 
       /* Landscape small screen */
@@ -187,7 +187,7 @@
           height: 100%;
           -webkit-overflow-scrolling: touch;
           flex: 1;
-          padding: 0;
+          padding: 2px;
         }
       }
     </style>

theme/lumo/vaadin-login-styles.html

@@ -5,6 +5,11 @@
 <dom-module id="lumo-login" theme-for="vaadin-login">
   <template>
     <style include="lumo-color lumo-typography">
+      :host {
+        max-width: calc(var(--lumo-size-m) * 10);
+        background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
+      }
+
       [part="form"] {
         padding: var(--lumo-space-l);
       }