From e97f93924ee2d7d3dc878b37727250461a4c2574 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Sz=C3=BCcs?= <127139797+balazs-szucs@users.noreply.github.com> Date: Wed, 18 Feb 2026 09:49:52 +0100 Subject: [PATCH] fix(forms): Update form field UI and behavior for better interactivity and alignment (#5747) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Description of Changes --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### Translations (if applicable) - [ ] I ran [`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details. Signed-off-by: Balázs Szücs --- .../core/components/viewer/LocalEmbedPDF.tsx | 2 +- .../tools/formFill/FormFieldOverlay.tsx | 53 +++++++++++++------ 2 files changed, 38 insertions(+), 17 deletions(-) diff --git a/frontend/src/core/components/viewer/LocalEmbedPDF.tsx b/frontend/src/core/components/viewer/LocalEmbedPDF.tsx index 45cfbde78..4fdf9fc63 100644 --- a/frontend/src/core/components/viewer/LocalEmbedPDF.tsx +++ b/frontend/src/core/components/viewer/LocalEmbedPDF.tsx @@ -126,7 +126,7 @@ export function LocalEmbedPDF({ file, url, fileName, enableAnnotations = false, }), createPluginRegistration(ScrollPluginPackage), createPluginRegistration(RenderPluginPackage, { - withForms: true, + withForms: !enableFormFill, withAnnotations: showBakedAnnotations && !enableAnnotations, // Show baked annotations only when: visibility is ON and annotation layer is OFF }), diff --git a/frontend/src/proprietary/tools/formFill/FormFieldOverlay.tsx b/frontend/src/proprietary/tools/formFill/FormFieldOverlay.tsx index d48de82e5..1f70b9f16 100644 --- a/frontend/src/proprietary/tools/formFill/FormFieldOverlay.tsx +++ b/frontend/src/proprietary/tools/formFill/FormFieldOverlay.tsx @@ -71,13 +71,14 @@ function WidgetInputInner({ height, zIndex: 10, boxSizing: 'border-box', - border: `2px solid ${borderColor}`, - borderRadius: 2, - background: bgColor, + border: `1px solid ${borderColor}`, + borderRadius: 1, + background: isActive ? bgColor : 'transparent', transition: 'border-color 0.15s, background 0.15s, box-shadow 0.15s', - boxShadow: isActive - ? `0 0 0 2px ${error ? 'rgba(244, 67, 54, 0.25)' : 'rgba(33, 150, 243, 0.25)'}` - : 'none', + boxShadow: + isActive && field.type !== 'radio' && field.type !== 'checkbox' + ? `0 0 0 2px ${error ? 'rgba(244, 67, 54, 0.25)' : 'rgba(33, 150, 243, 0.25)'}` + : 'none', cursor: field.readOnly ? 'default' : 'text', pointerEvents: 'auto', display: 'flex', @@ -122,8 +123,8 @@ function WidgetInputInner({ const fontSize = widget.fontSize ? widget.fontSize * scaleY : field.multiline - ? Math.max(8, Math.min(height * 0.65, 14)) - : Math.max(8, height * 0.7); + ? Math.max(6, Math.min(height * 0.60, 14)) + : Math.max(6, height * 0.65); const inputBaseStyle: React.CSSProperties = { width: '100%', @@ -192,9 +193,11 @@ function WidgetInputInner({ {...commonProps} style={{ ...commonStyle, + border: isActive ? commonStyle.border : '1px solid rgba(0,0,0,0.15)', + background: isActive ? bgColor : 'transparent', display: 'flex', alignItems: 'center', - justifyContent: 'center', + justifyContent: 'center', // Keep center for checkboxes as they are usually square hitboxes cursor: field.readOnly ? 'default' : 'pointer', }} title={error || field.tooltip || field.label} @@ -207,11 +210,22 @@ function WidgetInputInner({ > ✓ @@ -282,9 +296,12 @@ function WidgetInputInner({ {...commonProps} style={{ ...commonStyle, + border: isActive ? commonStyle.border : 'none', + background: 'transparent', display: 'flex', alignItems: 'center', - justifyContent: 'center', + justifyContent: 'flex-start', // Align to start (left) instead of center for radio buttons + paddingLeft: Math.max(1, (height - Math.min(width, height) * 0.8) / 2), // Slight offset cursor: field.readOnly ? 'default' : 'pointer', }} title={error || field.tooltip || `${field.label}: ${optionValue}`} @@ -297,12 +314,16 @@ function WidgetInputInner({ >