chore: Add correct spacing for floating input labels

src/app/components/client/InputField.module.scss

@@ -16,14 +16,15 @@
     border-radius: $border-radius-sm;
     color: $color-black;
     display: inline-block;
-    left: $spacing-md;
+    // Add a bit more space: The next spacing step is too much.
+    left: calc($spacing-sm * 1.5);
     line-height: 1em;
     padding: 0 calc($spacing-xs * 0.5);
     pointer-events: none;
     position: absolute;
     top: 50%;
     transform-origin: top left;
-    transform: translateY(-50%) scale(1);
+    transform: translate(-0.05em, -50%) scale(1);
     transition: transform 0.2s ease-in-out;
     user-select: none;
   }
@@ -32,8 +33,8 @@
     border: 1px solid $color-grey-30;
     border-radius: $border-radius-sm;
     color: $color-black;
-    // Add a bit more vertical space: The next spacing step is too much.
-    padding: calc($spacing-sm * 1.5) $spacing-md;
+    // Add a bit more space: The next spacing step is too much.
+    padding: calc($spacing-sm * 1.5);
     width: 100%;
 
     &.noValue {
@@ -61,25 +62,21 @@
   }
 
   &:has(.floatingLabel) {
-    &::placeholder {
+    ::placeholder {
       @include visually-hidden;
     }
-
     .inputField {
-      padding: $spacing-md;
+      // Move the value string off-center.
+      padding: calc($spacing-md * 1.25) calc($spacing-sm * 1.5) $spacing-xs;
     }
   }
 
   &:focus-within,
   &:not(:has(:placeholder-shown)) {
-    &:has(.floatingLabel) {
-      .inputField {
-        padding: calc($spacing-md + $spacing-sm) $spacing-md $spacing-sm;
-      }
-    }
-
     .floatingLabel {
-      transform: translateY(-125%) scale(0.75);
+      color: $color-grey-40;
+      // Make the floating label visually align with the input value.
+      transform: translate(-0.05em, -115%) scale(0.75);
     }
   }