Resolve remaining issues with dropdown positioning and broken help tooltips

[bjester]

Summary

Description of the change(s) you made

• Updates attachment of menus to not use ID's defined outside of the component
• Updates all edit modal menus to use parent attachment pattern, to display below the field, to not show above edit modal toolbar when scrolling, and to be lazily loaded
• Updates the license dropdown to always show above the field, because it's the last field and generally showing below would cause overflow
• Fixes broken help tooltips in the edit modal

Manual verification steps performed

1. Open to edit a resource
2. Use any and all fields with dropdowns
3. Verify the dropdown shows below the field, except for the License field where it should show above
4. Ensure the fields still operate appropriately
5. Scroll while a dropdown is open, and ensure it remains in place relative to the field

Screenshots (if applicable)

Since this affects nearly every field in the edit modal, I didn't take screenshots-- that would be a lot of before and after screenshots

---

Reviewer guidance

How can a reviewer test these changes?

Check out the changes and use the edit modal

Are there any risky areas that deserve extra testing?

References

Fixes #3467
Fixes #3381

Comments

---

Contributor's Checklist

PR process:

• If this is an important user-facing change, PR or related issue the CHANGELOG label been added to this PR. Note: items with this label will be added to the CHANGELOG at a later time
• If this includes an internal dependency change, a link to the diff is provided
• The docs label has been added if this introduces a change that needs to be updated in the user docs?
• If any Python requirements have changed, the updated requirements.txt files also included in this PR
• Opportunities for using Google Analytics here are noted
• Migrations are safe for a large db

Studio-specifc:

• All user-facing strings are translated properly
• The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. icons, user-generated text)
• All UI components are LTR and RTL compliant
• Views are organized into pages, components, and layouts directories as described in the docs
• Users' storage used is recalculated properly on any changes to main tree files
• If there new ways this uses user data that needs to be factored into our Privacy Policy, it has been noted.

Testing:

• Code is clean and well-commented
• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Any new interactions have been added to the QA Sheet
• Critical and brittle code paths are covered by unit tests

---

Reviewer's Checklist

This section is for reviewers to fill out.

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[marcellamaki]

This all looks good to me. The code is very readable and the changes are clear. Manual QA checks out. I added one non-blocking comment, I think it connected to addressing #3467

[marcellamaki]

Is the reason that top: true is set here because it is near the bottom of the page? i.e. a space issue?

[bjester]

Yes that's correct. I tried offset-overflow which should flip it automatically, but it didn't actually do that, so I just made it so this always shows above.