From f4a6365f55c3b16494337e0880b42108cc4a171a Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Thu, 12 Jan 2023 16:43:02 +0100
Subject: [PATCH] Remove hardcoded width from dropdown overlays (#23062)
* Remove hardcoded width from dropdown overlays
* Fix emoji picker position
---
.../mastodon/features/compose/components/language_dropdown.js | 2 +-
.../mastodon/features/compose/components/privacy_dropdown.js | 2 +-
app/javascript/styles/mastodon/components.scss | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/app/javascript/mastodon/features/compose/components/language_dropdown.js b/app/javascript/mastodon/features/compose/components/language_dropdown.js
index 4254a4926..2dd406b4b 100644
--- a/app/javascript/mastodon/features/compose/components/language_dropdown.js
+++ b/app/javascript/mastodon/features/compose/components/language_dropdown.js
@@ -307,7 +307,7 @@ class LanguageDropdown extends React.PureComponent {
<Overlay show={open} placement={'bottom'} flip target={this.findTarget} popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}>
{({ props, placement }) => (
- <div {...props} style={{ ...props.style, width: 280 }}>
+ <div {...props}>
<div className={`dropdown-animation language-dropdown__dropdown ${placement}`} >
<LanguageDropdownMenu
value={value}
diff --git a/app/javascript/mastodon/features/compose/components/privacy_dropdown.js b/app/javascript/mastodon/features/compose/components/privacy_dropdown.js
index 09bbc8e99..545b67eda 100644
--- a/app/javascript/mastodon/features/compose/components/privacy_dropdown.js
+++ b/app/javascript/mastodon/features/compose/components/privacy_dropdown.js
@@ -268,7 +268,7 @@ class PrivacyDropdown extends React.PureComponent {
<Overlay show={open} placement={'bottom'} flip target={this.findTarget} container={container} popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}>
{({ props, placement }) => (
- <div {...props} style={{ ...props.style, width: 350, maxWidth: '100vw' }}>
+ <div {...props}>
<div className={`dropdown-animation privacy-dropdown__dropdown ${placement}`}>
<PrivacyDropdownMenu
items={this.options}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index ad59303f4..ff368faaa 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -4380,7 +4380,7 @@ a.status-card.compact:hover {
.emoji-picker-dropdown__menu {
background: $simple-background-color;
- position: absolute;
+ position: relative;
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
border-radius: 4px;
margin-top: 5px;