fix: autocomplete quickview alignment

[James-Baloyi]

Summary by CodeRabbit

• Bug Fixes
  • Adjusted horizontal padding in entity reference buttons for improved spacing and alignment.
  • Improved quick view label layout to better align and support multi-line labels.
  • Relaxed read-only field overflow rules to prevent clipping and allow natural text wrapping.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 325808cf-8922-486d-a36b-46fd43112996

📥 Commits

Reviewing files that changed from the base of the PR and between e554cc5 and d665816.

📒 Files selected for processing (1)

• shesha-reactjs/src/components/quickView/styles/styles.ts

---

Walkthrough

This PR updates component styling in the entity reference and quick view modules. Button box padding is standardized to include horizontal spacing, and form label styles are refined to improve text wrapping and overflow behavior through adjusted height, whitespace, and word-break rules.

Changes

Component Styling Improvements

Layer / File(s)	Summary
Button box padding standardization shesha-reactjs/src/components/entityReference/styles/styles.ts, shesha-reactjs/src/components/quickView/styles/styles.ts	innerEntityReferenceButtonBoxStyle padding updated from uniform 0 to horizontal 0 11px in both entity reference and quick view components for consistent spacing.
Form label text wrapping and overflow shesha-reactjs/src/components/quickView/styles/styles.ts	formLabel nested selectors reworked to improve text layout: container alignment set to flex-start, > label uses height: auto, right-aligned label text with added top padding, and read-only display descendants now allow overflow: visible, white-space: normal, word-break: break-word, overflow-wrap: anywhere, and text-overflow: clip.

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰
A hop for padding, neat and trim,
Labels loosen where texts grew grim.
Eleven pixels, gentle space,
Words can wrap and find their place.
A tiny hop — the UI's whim.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: autocomplete quickview alignment' directly addresses the main changes in the pull request, which involve adjusting padding and layout styles in both entity reference and quick view components to improve alignment and text wrapping behavior.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 OpenGrep (1.22.0)

OpenGrep fatal error (exit code 2): [00.13][ERROR]: Error: exception Unix_error: No such file or directory stat shesha-reactjs/src/components/quickView/styles/styles.ts
Raised by primitive operation at UTmp.replace_named_pipe_by_regular_file_if_needed in file "libs/commons/UTmp.ml", line 145, characters 8-27
Called from Scan_CLI.replace_target_roots_by_regular_files_where_needed.(fun) in file "src/osemgrep/cli_scan/Scan_CLI.ml", lines 1086-1087, characters 19-65
Called from List_.fast_map in file "libs/commons/List_.ml", line 81,

---

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

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@shesha-reactjs/src/components/quickView/styles/styles.ts`:
- Around line 59-73: Replace the overly broad `.read-only-display-form-item *`
rule that uses multiple `!important` declarations with a narrowly scoped
selector that targets only the actual text/content container(s) (for example
direct children or the wrapper with `[data-tag-wrapper="true"]`) so internal
components like ReflistTag/Tooltip/Tag/ShaIcon are not affected; increase
selector specificity as needed instead of using `!important` and restore/retain
the intended ReadOnlyDisplayFormItem base styles (`overflow: hidden`,
`text-overflow: ellipsis`, `white-space: nowrap`) for non-expanded content by
applying the new selector to the textual element(s) only.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 7c398833-5fd9-48cf-a1a2-1391a6126bfd

📥 Commits

Reviewing files that changed from the base of the PR and between b18358a and e554cc5.

⛔ Files ignored due to path filters (1)

• shesha-reactjs/package-lock.json is excluded by !**/package-lock.json and included by none

📒 Files selected for processing (2)

• shesha-reactjs/src/components/entityReference/styles/styles.ts
• shesha-reactjs/src/components/quickView/styles/styles.ts