fix(input-group) label cut off and broken ellipsis. (#12818)

* fix(input-group) label cut off and broken ellipsis

---------

Co-authored-by: Stamen Stoychev <[email protected]>

Author: desig9stein

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -637,6 +637,7 @@
         width: auto;
         min-width: 0;
         height: 100%;
+        position: relative;
 
         grid-area: 1 / 2;
     }
@@ -653,10 +654,6 @@
         grid-area: 1 / 4;
     }
 
-    %form-group-bundle--box,
-    %form-group-bundle--border {
-        grid-template-columns: auto auto 1fr auto;
-    }
 
     %form-group-bundle-start,
     %form-group-bundle-end {
@@ -677,8 +674,7 @@
     }
 
     %form-group-bundle--border {
-        --size: #{sizable(rem(40px), rem(48px), rem(56px))};
-
+        grid-template-columns: auto auto 1fr auto;
         display: grid;
         align-items: initial;
         padding: 0;
@@ -873,7 +869,7 @@
         position: absolute;
         max-width: 100%;
         padding-inline-end: rem(4px);
-        line-height: 1;
+        line-height: normal;
         backface-visibility: hidden;
         will-change: transform;
         transform-origin: top left;
@@ -905,7 +901,7 @@
     }
 
     %form-group-label--float {
-        --floating-label-position: -106%;
+        --floating-label-position: -73%;
         transform: translateY(var(--floating-label-position));
         font-size: rem(12px);
     }
@@ -1584,10 +1580,9 @@
 
     // Label
     %fluent-label {
-        display: inline-flex;
+        display: block;
         font-size: rem(14px);
         font-weight: 600;
-        line-height: 1 !important;
         position: static;
         transform: translateY(0);
         transform-origin: top left;