fix(file-group): fix misalignment in material variant. (#1713)

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: desig9stein

src/components/file-input/file-input.ts

@@ -190,8 +190,10 @@ export default class IgcFileInputComponent extends IgcInputBaseComponent {
           </igc-button>
         </div>
         <div part="file-names">
-          ${this._fileNames ??
-          html`<slot name="file-missing-text">${emptyText}</slot>`}
+          <span>
+            ${this._fileNames ??
+            html`<slot name="file-missing-text">${emptyText}</slot>`}
+          </span>
         </div>
       </div>
     `;

src/components/file-input/themes/file-input.base.scss

@@ -18,10 +18,15 @@ $theme: $base;
     }
 
     [part='file-names'] {
-        @include ellipsis();
-
-        align-content: center;
+        display: flex;
+        align-items: center;
+        max-height: var-get($theme, 'size');
+        height: 100%;
         grid-area: 1 / 3;
+
+        > span {
+            @include ellipsis();
+        }
     }
 
     [part~='container'] {
@@ -39,6 +44,11 @@ $theme: $base;
         opacity: 0;
     }
 
+    [part~='container'],
+    [part~='input'] {
+        height: var-get($theme, 'size');
+    }
+
     [part~='input']::file-selector-button {
         width: 100%;
         cursor: auto;