Developer Learnings while developing profile-pane

I wanted to create a ticket to track some things I have learned from developing profile-pane as well as some developer standards that we have discussed along the way so that we can discuss here and then be able to write a developer standards document at some point maybe sooner if possible rather than later.

Learnings

• We need all 3 responsive rules when working on our panes in order to work in mashlib. data-layout=mobile, container and media. Container is particularly important especially when using panes in panes for instance the profile-pane inside contacts-pane. It is also need to combat the table structure above it.

My research said this

Media queries are used for 
    - [ ] environmental/device concerns
    - [ ] accessibility preferences
    - [ ] viewport-level app shell``` but I found that media queries are used in the rolled up mashlib. I would like to investigate this further as we have duplicated logic between all 3 sections at this time. My thoughts were media for standalone, container for mashlib and data-layout=mobile for mobile only.

where should we attach input dialogs
not sure about this, needs more research currently it is attached to the body
The dialogs need to be attached to the pane root in our setup so that the container queries can work. If you attach to the body in our scenario the embedded app can suddenly render:
* huge desktop dialogs
* wrong breakpoints
* incorrect mobile layout

Developer style from conversations in tickets from Noel and in meetings

• We want to use typescript
• Style sheets should live next to the typescript file they style
• Style sheets that style multiple typescript files will reside in a styles folder.
• We shouldn't use utility classes on sr-only and hidden.
• Right now I have used BEM in profile-pane, but this is up for discussion there is another system Noel found here and because we are using web components the styles exist in those.
• Need to add copilot prompt etc in commits.

Things that would be good to do

Start by reviewing profile-pane's responsive rules and the open questions about media, container, and data-layout=mobile. Compare the stated dialog attachment behavior and collect the TypeScript and stylesheet conventions described in the issue. Done means the agreed standards and remaining decisions are captured in a developer standards document.