From 18ffbea9dbcd4e28880a3d3ca9b3fa085103b899 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Wed, 8 Apr 2026 21:23:05 +0200
Subject: [PATCH] fix: use visually-hidden clip pattern for file inputs

The opacity:0 approach caused the native "Choose File" button to
appear in the accessibility tree and compete for clicks. The clip
pattern properly hides the input while keeping it functional for
programmatic .click().

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/AppsTab/AppsTab.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/pages/AppsTab/AppsTab.tsx b/ui/src/pages/AppsTab/AppsTab.tsx
index c4fb0c02..474886ff 100644
--- a/ui/src/pages/AppsTab/AppsTab.tsx
+++ b/ui/src/pages/AppsTab/AppsTab.tsx
@@ -303,7 +303,7 @@ function CreateAppView({ environments, selectedEnv }: { environments: Environmen
         <span className={styles.configLabel}>Application JAR</span>
         <div className={styles.fileRow}>
           <input ref={fileInputRef} type="file" accept=".jar"
-            style={{ position: 'absolute', width: 0, height: 0, opacity: 0, overflow: 'hidden' }}
+            style={{ position: 'absolute', width: 1, height: 1, margin: -1, padding: 0, overflow: 'hidden', clip: 'rect(0,0,0,0)', border: 0 }}
             onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
           <Button size="sm" variant="secondary" type="button" onClick={() => fileInputRef.current?.click()} disabled={busy}>
             {file ? 'Change file' : 'Select JAR'}
@@ -541,7 +541,7 @@ function AppDetailView({ appId, environments, selectedEnv }: { appId: string; en
         </div>
         <div className={styles.detailActions}>
           <input ref={fileInputRef} type="file" accept=".jar"
-            style={{ position: 'absolute', width: 0, height: 0, opacity: 0, overflow: 'hidden' }}
+            style={{ position: 'absolute', width: 1, height: 1, margin: -1, padding: 0, overflow: 'hidden', clip: 'rect(0,0,0,0)', border: 0 }}
             onChange={handleUpload} />
           <Button size="sm" variant="primary" type="button" onClick={() => fileInputRef.current?.click()} loading={uploadJar.isPending}>Upload JAR</Button>
           <Button size="sm" variant="danger" onClick={() => setDeleteConfirm(true)}>Delete App</Button>