File upload filename text overflows only during Selenium Webdriver session, blocking the upload button - selenium

Question

During testing with Selenium + Chrome + Webdriver the filename chosen in a file input field overlaps the edge of the field, and covers the upload button so it cannot be clicked on.
The error I get in testing is valid and correct, as I cannot click on the button manually either:
Exception in thread "main" org.openqa.selenium.ElementClickInterceptedException: element click intercepted: Element <button type="submit" id="article-file-upload-submit" class="ui primary button">...</button> is not clickable at point (427, 451). Other element would receive the click: <input type="file" name="import" id="article-file-upload-file" class="ui button" required="" data-qa-tag="project-file-import">
Why would viewing a page in a webdriver session change the rendering of a field?
This is what it normally looks like in Chrome:
This is what it looks like during testing in Chrome via webdriver:
(they are the same size in real life)
I am loading the same page here, in the same browser version, logged in as the same user, inside the same project and uploading the same file. The only difference I can see is the "bad one" is launched from Java, Selenium, Webdriver, from a VS Code project. So it is a different process.
Chrome Version 86.0.4240.80 (Official Build) (x86_64)
chromedriver v86
Mac OSX
The browser window isn't any narrower, (responsiveness doesn't affect this element).
I'm using the latest Semantic UI v2, the field is inside an accordion inside a segment, but in 2 years of dev evolution, I've never seen this overflow problem.
<div class="ui input">
<input type="file" name="import" id="article-file-upload-file" class="ui button" required>
</div>
<button type="submit" id="article-file-upload-submit" class="ui primary button">
<i class="icon upload"></i> UPLOAD
</button>

Answer 1

Click using javascript should work:
JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
String script = "document.getElementById('article-file-upload-submit').click();";
javascriptExecutor.executeScript(script);

Answer 2

It turned out that the overlap issue was just a CSS bug in my latest app version, but for some reason it only showed up in the new web driver Chrome session.
A while later it showed up in the other Chrome window, so it was probably just a CSS caching issue. I've not seen this before though, as I am using a automated Gulp build with Browsersync which normally keeps everything up to date.
So it's nothing to do with webdriver, and in fact the test was finding a true bug, so it's good that it failed!