fix: config profile form focus loss and path validation messages

- Fix React key stability in env vars, files, and mount file inputs
  to prevent focus loss on every keystroke
- Improve validation error messages to explain Files vs Mounts
- Add helper text in UI clarifying relative vs absolute paths

Fixes focus loss bug and improves UX for path validation errors.
This commit is contained in:
2026-05-24 18:10:51 +00:00
parent b58696bb7e
commit 08bd8bf7f9
2 changed files with 20 additions and 8 deletions
+8 -6
View File
@@ -343,8 +343,8 @@ export const ConfigProfilesPage = () => {
<div className="form-section">
<h4>Environment Variables</h4>
{Object.entries(formData.env_vars || {}).map(([key, value]) => (
<div key={key} className="form-row">
{Object.entries(formData.env_vars || {}).map(([key, value], idx) => (
<div key={idx} className="form-row">
<input
type="text"
value={key}
@@ -387,8 +387,9 @@ export const ConfigProfilesPage = () => {
<div className="form-section">
<h4>Files</h4>
{Object.entries(formData.files || {}).map(([path, content]) => (
<div key={path} className="file-entry">
<p className="muted">Relative paths written to the instance directory. Use Mounts below for absolute container paths.</p>
{Object.entries(formData.files || {}).map(([path, content], idx) => (
<div key={idx} className="file-entry">
<input
type="text"
value={path}
@@ -414,6 +415,7 @@ export const ConfigProfilesPage = () => {
<div className="form-section">
<h4>Mounts</h4>
<p className="muted">Bind directories into the container at absolute paths. Files are relative to the mount target.</p>
{(formData.mounts || []).map((mount, index) => (
<div key={index} className="mount-entry card">
<div className="form-row">
@@ -442,8 +444,8 @@ export const ConfigProfilesPage = () => {
</div>
<div className="mount-files">
{Object.entries(mount.files).map(([path, content]) => (
<div key={path} className="file-entry">
{Object.entries(mount.files).map(([path, content], idx) => (
<div key={idx} className="file-entry">
<input
type="text"
value={path}