From a3fb866a3c6389454ddad451c69994b5649e3e27 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Wed, 30 Sep 2026 12:08:18 +0300
Subject: [PATCH 1/2] fix(file-input): restore file name ellipsis in
 non-Material themes

Closes #2384

Add min-width: 0 to the file-names grid item so its 1fr column can
shrink.

Regressed in #1713, which moved the ellipsis to an inner span.
---
 src/components/file-input/file-input.spec.ts  | 42 ++++++++++++++++++-
 .../file-input/themes/file-input.base.scss    |  1 +
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/src/components/file-input/file-input.spec.ts b/src/components/file-input/file-input.spec.ts
index 3e83a5d01..da44cbaec 100644
--- a/src/components/file-input/file-input.spec.ts
+++ b/src/components/file-input/file-input.spec.ts
@@ -1,4 +1,10 @@
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import {
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  nextFrame,
+} from '@open-wc/testing';
 import type { TemplateResult } from 'lit';
 import { spy } from 'sinon';
 import { defineComponents } from '#internals/definitions/defineComponents.js';
@@ -12,6 +18,7 @@ import {
   type ValidationContainerTestsParams,
 } from '#internals/testing/validity-helpers.spec.js';
 import { firstOf } from '#internals/utils/arrays.js';
+import { configureTheme } from '#theming/config.js';
 import IgcFileInputComponent from './file-input.js';
 
 describe('File Input component', () => {
@@ -152,6 +159,39 @@ describe('File Input component', () => {
         'Choose a file'
       );
     });
+
+    for (const theme of [
+      'bootstrap',
+      'material',
+      'fluent',
+      'indigo',
+    ] as const) {
+      it(`truncates overflowing file names instead of growing (${theme})`, async () => {
+        configureTheme(theme);
+        await createFixture(
+          html`<igc-file-input multiple style="width: 300px"></igc-file-input>`
+        );
+
+        simulateFileUpload(
+          input,
+          Array.from(
+            { length: 8 },
+            (_, i) => new File([''], `a-very-long-file-name-number-${i}.txt`)
+          )
+        );
+        await elementUpdated(element);
+        await nextFrame();
+
+        const container = getDOM('[part~="container"]') as HTMLElement;
+        const names = getDOM('[part="file-names"] > span') as HTMLElement;
+
+        expect(container.scrollWidth).to.be.at.most(element.offsetWidth);
+        expect(names.scrollWidth).to.be.greaterThan(names.clientWidth);
+
+        configureTheme('bootstrap');
+        await nextFrame();
+      });
+    }
   });
 
   describe('Events', () => {
diff --git a/src/components/file-input/themes/file-input.base.scss b/src/components/file-input/themes/file-input.base.scss
index 21963d6e5..4935d0890 100644
--- a/src/components/file-input/themes/file-input.base.scss
+++ b/src/components/file-input/themes/file-input.base.scss
@@ -22,6 +22,7 @@ $theme-file-input: file-input.$base;
     [part='file-names'] {
         display: flex;
         align-items: center;
+        min-width: 0;
         max-height: var-get($theme, 'size');
         height: 100%;
         grid-area: 1 / 3;

From c7bffa96cda6079f6e2ee35b87f680714f127148 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Wed, 30 Sep 2026 12:20:36 +0300
Subject: [PATCH 2/2] spec(file-input): assert ellipsis on overflowing file
 names

---
 src/components/file-input/file-input.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/file-input/file-input.spec.ts b/src/components/file-input/file-input.spec.ts
index da44cbaec..1f7710c17 100644
--- a/src/components/file-input/file-input.spec.ts
+++ b/src/components/file-input/file-input.spec.ts
@@ -187,6 +187,7 @@ describe('File Input component', () => {
 
         expect(container.scrollWidth).to.be.at.most(element.offsetWidth);
         expect(names.scrollWidth).to.be.greaterThan(names.clientWidth);
+        expect(getComputedStyle(names).textOverflow).to.equal('ellipsis');
 
         configureTheme('bootstrap');
         await nextFrame();