Phrase editor unexpected behaviour when using css class hidden

[SofieAndersen]

Expected behavior
CSS 'hidden' should not impact phrase context editor. This is especially an issue when using tailwind css since that is using 'hidden' as a utility class that will be used in combination with a display class for certain breakpoints.

Actual behavior
When using css 'hidden' in combination with other css classes phrase context editor does not pick up the translation and displays the raw {{__phrase_hero_title__}} without an option to edit even though the element is full visible

Your environment
N/A

Steps to reproduce the problem
See: https://stackblitz.com/edit/stackblitz-starters-o6notr

Setup to use

projectId: '00000000000000004158e0858d2fa45c',
accountId: '0bed59e5',

login with user: [email protected] pw: phrase

In this example I ended up using the inline js script and a hard coded value. However when using ngx-translate-phraseapp the exact same issue occurs. Since the PhraseAppCompiler simply transforms all the translations and the translate pipe simple outputs the transformed keys.

Also mention in: phrase/i18next-phrase-in-context-editor-post-processor#175

Additionally
I noticed a small ui issue with the context editor; when you have multiple translations close to each other the dropdown when editing falls below other edit buttons

[itsahsiao]

HI @SofieAndersen, thank you for reporting this! We'll look into it and see what we can do.