Dropdown consolidation, layout fixes, and RTL updates

[bjester]

Summary

Background

• We recently switched Studio's dropdowns to absolute positioning instead of the fixed positioning
• It relies on a selector, usually an ID, for attaching the menu, and when building reusable components the use of ID complicates things
• Additionally, switching this caused issues with automatic placement of the dropdowns depending on its location in the viewport

Description of the change(s) you made

• Consolidated dropdown behavior (hopefully once and for all) using a new component that uses scoped slots to provide an attach attribute to Vuetify selects, autocompletes, and menus
• With the consolidated behavior in the new component, it now automates the dropdown position so that the dropdown shows above the field if there isn't sufficient space below the field
• Refactors and simplifies the layout of import search to address issues with the filter dropdowns
• Fixes RTL issues in the Language filter of the Catalog search

Manual verification steps performed

• Verified the behavior of the dropdowns in:
  • Edit modal
  • Editing channel details
  • Signing up for a new account
  • Catalog search
  • Import search

Screenshots (if applicable)

Before	After

Does this introduce any tech-debt items?

• I didn't add logic to the <DropdownWrapper> for handling viewport resizes

---

Reviewer guidance

How can a reviewer test these changes?

Much of the diff comes from wrapping templates with <DropdownWrapper>

References

Fixes #3689
Fixes #3678
Fixes #3666

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]

@bjester this looks great!!

1. The dropdowns in all places you list seem to be working as expected 🎉 I checked, and code review looks good.
   ✅ Edit modal
   ✅ Editing channel details
   ✅ Signing up for a new account
   ✅ Catalog search
   ✅ Import search

2. The alignment of the checkboxes is also fixed. ✅

3. Needs to be fixed: I don't see the thumbnail changes on RTL that you have a screenshot of 🤔 (I double checked that I wasn't running devserver hot).

4. Not blocking, but would be great to add. The last thing is I found two more places where the new dropdown wrapper could be added:
   Under administration/user, click on a user listed, and scroll down to the storage space

Invite collaborators to a channel

[bjester]

@marcellamaki Updated

[marcellamaki]

LGTM! Thanks @bjester