No absolute position in smart card SAML PIN dialog

This is a pure cleanup CL. It replaces the use of "position: absolution"
in the smart card SAML PIN dialog (a.k.a. the security_token_pin dialog)
with the normal positioning.

This makes the implementation less fragile against future changes, as it
doesn't rely on the absolute coordinates of the PIN input field and its
sizes anymore.

Bug: 1024251
Test: take screenshot of the SAML smart card PIN dialog before and after the change, check they're equal
Change-Id: Ibce4d99d07016ef9437782ba528c7e3c2744b799
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2007647Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Commit-Queue: Maksim Ivanov <emaxx@chromium.org>
Cr-Commit-Position: refs/heads/master@{#733436}

chrome/browser/resources/chromeos/login/security_token_pin.css

@@ -10,7 +10,6 @@
 #pinKeyboard {
   --pin-keyboard-pin-input-style: {
     width: 192px;
-    padding-bottom: 24px;
   };
   --pin-keyboard-number-color: var(--google-grey-900);
   --cr-icon-button-margin-start: 5px;
@@ -19,9 +18,8 @@
 #errorContainer {
   color: var(--google-red-600);
   font-size: 12px;
-  position: absolute;
+  padding: 1px 0 3px;
   text-align: center;
-  top: 36px;
   width: 100%;
 }
 
@@ -30,3 +28,8 @@
   --iron-icon-height: 20px;
   margin-inline-end: 3px;
 }
+
+/* Allows to hide the element while still consuming the space that it needs. */
+[invisible] {
+  visibility: hidden;
+}

chrome/browser/resources/chromeos/login/security_token_pin.html

@@ -31,7 +31,7 @@
               on-pin-change="onPinChange_" on-submit="onSubmit_"
               disabled="[[!canSubmit_]]">
             <div id="errorContainer" role="alert" problem
-                hidden$="[[!isLabelVisible_(parameters, userEdited_)]]">
+                invisible$="[[!isLabelVisible_(parameters, userEdited_)]]">
               <iron-icon id="errorIcon" icon="cr:error-outline"></iron-icon>
               [[getLabel_(locale, parameters, errorLabelId_, userEdited_)]]
             </div>