how do overlay symbols/items on a drawing contained within a coordinate container such that on resizing the container the symbols/items resize too and keep their position?
Before resizing,
After resizing,
It looks like you’re mixing coord and flex containers, which needs consideration to make them work as you’d like. I personally would never use the labels within smart symbols since they're stacked into a flex container and you have no control over them without overriding via css. The issue they pose is resizing issues as you’ve found, where the size of the SVG will ultimately resize disproportionately which is essentially when positioning is important in a p&id. (I actually don't use the smart symbols at all given their limited customisation)
With pnid mimic pages, you need to make sure to set the aspect ratio of the view, eg to the size of the view (1920:980 for example).
Can you share the definition of that label with arrow template view? I can’t tell why it’s doing what it is without seeing it