Truncate long field names in fields shortcode popups

[AbdiTolesa]

Fix https://github.com/Strategy11/formidable-pro/issues/6052

This should be tested both in Form actions TinyMCE and Views edit content modal.

Before:

After:

[coderabbitai]

Walkthrough

Small UI/output and styling edits: a PHP helper now wraps option labels in a span; a CSS file gained an extra comment terminator before tooltip rules; SCSS tightens a first-child span width/margin; several JS files contain formatting-only edits.

Changes

Cohort / File(s)	Summary
PHP output formatting classes/helpers/FrmFormsHelper.php	In insert_opt_html() the escaped option name is now emitted inside a <span> via printf() instead of echoing the escaped string directly; no logic or escaping changes.
Potential CSS comment/duplication css/frm_testing_mode.css, css/admin/frm-settings-components.css	css/frm_testing_mode.css has an extra */ inserted immediately before a Bootstrap .tooltip rules block (stray comment terminator). css/admin/frm-settings-components.css contains a duplicated block with an alternate top selector; rules themselves unchanged.
SCSS layout adjustment resources/scss/admin/components/list/_code-list.scss	Adds scoped rules under .frm_form_settings and #frm_edit_box_content_modal adjusting .frm_code_list.frm-full-hover first-of-type span (max-width increased to 170px and margin-left reset; existing calc-based rule widened from 130px).
JS formatting-only edits js/addons-page.js, js/formidable-settings-components.js, js/formidable_dashboard.js, js/formidable_overlay.js, js/onboarding-wizard.js, js/welcome-tour.js	Whitespace/formatting and minor identifier renames only; no behavioral, API, or control-flow changes detected.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Inspect css/frm_testing_mode.css and remove or rationalize the stray */; confirm .tooltip rules parse and behave as intended across browsers.
• Verify the new <span> in classes/helpers/FrmFormsHelper.php does not break CSS selectors, JS that expects a direct text node, or screen-reader output.
• Review visual impact of resources/scss/.../_code-list.scss changes inside admin modals.
• Briefly skim JS files to confirm edits are formatting-only.

Possibly related PRs

• Prevent error when clicking Background Image style setting when Pro is not active #2596 — modifies the same CSS areas (css/admin/frm-settings-components.css, css/frm_testing_mode.css) and appears related to duplicated/adjacent CSS blocks.
• Use Bootstrap 5 #2550 — also touches css/frm_testing_mode.css tooltip/comment region and deals with stray comment/token near tooltip rules.

Suggested reviewers

• Crabcyborg
• truongwp

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.45% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Truncate long field names in fields shortcode popups' directly matches the primary change made in the PHP helper file where option item names are wrapped in spans for truncation.
Description check	✅ Passed	The description is related to the changeset as it references the issue being fixed and mentions the two contexts where testing should occur (Form actions TinyMCE and Views edit content modal), which aligns with the CSS and PHP changes for implementing truncation.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch issue-6052

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 35377f0 and f043d87.

⛔ Files ignored due to path filters (4)

• js/form-templates.js.map is excluded by !**/*.map, !**/*.map
• js/formidable-settings-components.js.map is excluded by !**/*.map, !**/*.map
• js/formidable_admin.js.map is excluded by !**/*.map, !**/*.map
• js/formidable_dashboard.js.map is excluded by !**/*.map, !**/*.map

📒 Files selected for processing (2)

• css/admin/frm-settings-components.css (1 hunks)
• js/formidable_styles.js (1 hunks)

🧰 Additional context used

🪛 Biome (2.1.2)

js/formidable_styles.js

[error] 1-1: This variable is used before its declaration.

The variable is declared here:

(lint/correctness/noInvalidUseBeforeDeclaration)

---

[error] 1-1: This variable is used before its declaration.

The variable is declared here:

(lint/correctness/noInvalidUseBeforeDeclaration)

---

[error] 1-1: This variable is used before its declaration.

The variable is declared here:

(lint/correctness/noInvalidUseBeforeDeclaration)

---

[error] 1-1: This variable is used before its declaration.

The variable is declared here:

(lint/correctness/noInvalidUseBeforeDeclaration)

---

[error] 1-1: This variable is used before its declaration.

The variable is declared here:

(lint/correctness/noInvalidUseBeforeDeclaration)

---

[error] 1-1: This variable is used before its declaration.

The variable is declared here:

(lint/correctness/noInvalidUseBeforeDeclaration)

---

[error] 1-1: This variable is used before its declaration.

The variable is declared here:

(lint/correctness/noInvalidUseBeforeDeclaration)

---

[error] 1-1: This variable is used before its declaration.

The variable is declared here:

(lint/correctness/noInvalidUseBeforeDeclaration)

---

[error] 1-1: This variable is used before its declaration.

The variable is declared here:

(lint/correctness/noInvalidUseBeforeDeclaration)

---

[error] 1-1: This variable is used before its declaration.

The variable is declared here:

(lint/correctness/noInvalidUseBeforeDeclaration)

---

[error] 1-1: This variable is used before its declaration.

The variable is declared here:

(lint/correctness/noInvalidUseBeforeDeclaration)

---

[error] 1-1: This variable is used before its declaration.

The variable is declared here:

(lint/correctness/noInvalidUseBeforeDeclaration)

---

[error] 1-1: Do not use the t variable name as a label

The variable is declared here

Creating a label with the same name as an in-scope variable leads to confusion.

(lint/suspicious/noLabelVar)

---

[error] 1-1: Do not reassign a function declaration.

Reassigned here.

Use a local variable instead.

(lint/suspicious/noFunctionAssign)

---

[error] 1-1: Do not reassign a function declaration.

Reassigned here.

Use a local variable instead.

(lint/suspicious/noFunctionAssign)

---

[error] 1-1: Do not reassign a function declaration.

Reassigned here.

Use a local variable instead.

(lint/suspicious/noFunctionAssign)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: PHP 7.4 tests in WP trunk
• GitHub Check: PHP 8 tests in WP trunk
• GitHub Check: Cypress

🔇 Additional comments (3)

js/formidable_styles.js (1)

1-1: Minified bundle cannot be meaningfully reviewed.

This file is minified and bundled, making it impossible to verify logic, identify functional changes, or validate the truncation feature. Static analysis hints report multiple variable declaration and reassignment warnings, but these are likely noise from minification.

To properly review the changes, please provide:

• The original source TypeScript/JavaScript files, or
• Unminified/source-mapped versions that show the actual code changes for the field name truncation feature.

css/admin/frm-settings-components.css (2)

1-1: Minified format prevents verification of truncation and responsiveness fixes.

The CSS is minified, making it impossible to identify which rules apply to the field name truncation feature or verify that responsive adjustments (CSS calc(), breakpoints) have been implemented as requested by reviewers.

According to PR feedback, the truncation is too short in field settings and becomes too long below 1050px width. Please provide unminified CSS to confirm:

1. The max-width or width constraint for truncated field names uses calc() or media queries for responsiveness.
2. The truncation length values have been adjusted based on reviewer feedback.

---

1-1: No action required. The CSS selector .formidable_page_formidable-styles.js is valid CSS syntax.

In CSS, .class1.class2 (without whitespace) selects elements that have both classes simultaneously. This selector targets elements with both the formidable_page_formidable-styles and js classes, which is a legitimate pattern commonly used to apply styles conditionally based on JavaScript state.

Likely an incorrect or invalid review comment.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7c31ab4 and d532381.

⛔ Files ignored due to path filters (5)

• js/form-templates.js.map is excluded by !**/*.map, !**/*.map
• js/formidable-settings-components.js.map is excluded by !**/*.map, !**/*.map
• js/formidable_admin.js.map is excluded by !**/*.map, !**/*.map
• js/formidable_dashboard.js.map is excluded by !**/*.map, !**/*.map
• js/formidable_styles.js.map is excluded by !**/*.map, !**/*.map

📒 Files selected for processing (3)

• classes/helpers/FrmFormsHelper.php (1 hunks)
• css/frm_testing_mode.css (1 hunks)
• resources/scss/admin/components/list/_code-list.scss (1 hunks)

🧰 Additional context used

🪛 Biome (2.1.2)

css/frm_testing_mode.css

[error] 3-3: Unexpected shorthand property background after background-color

(lint/suspicious/noShorthandPropertyOverrides)

---

[error] 3-3: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.

text-align is already defined here.

Remove or rename the duplicate property to ensure consistent styling.

(lint/suspicious/noDuplicateProperties)

---

[error] 3-3: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.

border-radius is already defined here.

Remove or rename the duplicate property to ensure consistent styling.

(lint/suspicious/noDuplicateProperties)

🔇 Additional comments (2)

classes/helpers/FrmFormsHelper.php (1)

652-656: LGTM! Wrapping field name in span enables CSS-based truncation.

The change wraps the truncated field name in a <span> element, which allows the CSS rules added in resources/scss/admin/components/list/_code-list.scss to properly target and style long field names. The escaping and output formatting are correct.

resources/scss/admin/components/list/_code-list.scss (1)

48-54: LGTM! Layout adjustment accommodates longer field names.

The new scoped rule increases the max-width from 83px to 170px for the first span (field name) in form settings and modal contexts, while adjusting margins to left-align the field name and right-align the field ID. This change works in conjunction with the PHP update in FrmFormsHelper.php to properly display and truncate long field names.

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

Critical: CSS file contains duplicated content and malformed comment marker.

The CSS file duplicates a large portion of tooltip and Bootstrap styles with an extra closing comment marker "*/" before the duplicated block, which will break CSS parsing and cause the styles to fail loading entirely.

This appears to be an unintentional commit. Please revert this file to remove the duplicated CSS content and the malformed comment marker.

🧰 Tools

🪛 Biome (2.1.2)

[error] 3-3: Unexpected shorthand property background after background-color

(lint/suspicious/noShorthandPropertyOverrides)

---

[error] 3-3: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.

text-align is already defined here.

Remove or rename the duplicate property to ensure consistent styling.

(lint/suspicious/noDuplicateProperties)

---

[error] 3-3: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.

border-radius is already defined here.

Remove or rename the duplicate property to ensure consistent styling.

(lint/suspicious/noDuplicateProperties)

🤖 Prompt for AI Agents

In css/frm_testing_mode.css around lines 1-3 there is a duplicated large CSS
block and a stray/malformed comment close token ("*/") before the duplicate
which breaks parsing; remove the entire duplicated section (the second copy of
the tooltip/Bootstrap and other repeated rules) and the stray "*/", leaving only
the intended original CSS (or revert the file to the last known-good commit),
validate the file with a CSS linter to ensure no stray comment markers remain,
and commit the cleaned file.

[lauramekaj1]

@AbdiTolesa I tested it and it's working as expected. Thank you!

[truongwp]

@AbdiTolesa This looks great in the form actions. In the field settings, it's too short. Can you fix it?

[truongwp]

@AbdiTolesa It's too long for screen width below 1050px. I think we can use calc().

[truongwp]

This looks good now. Thanks @AbdiTolesa!