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: demo@phrase.com 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: https://github.com/phrase/i18next-phrase-in-context-editor-post-processor/issues/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.