diff --git a/app/styles/gabsocial/components.scss b/app/styles/gabsocial/components.scss index dda4f4e4a..ddf707a9a 100644 --- a/app/styles/gabsocial/components.scss +++ b/app/styles/gabsocial/components.scss @@ -2713,7 +2713,6 @@ a.status-card.compact:hover { .detailed-status__button { flex: 1 1 auto; text-align: center; - position: relative; } .column-settings__outer { diff --git a/app/styles/gabsocial/components/detailed-status.scss b/app/styles/gabsocial/components/detailed-status.scss index c6d3ac692..9009a8202 100644 --- a/app/styles/gabsocial/components/detailed-status.scss +++ b/app/styles/gabsocial/components/detailed-status.scss @@ -57,7 +57,6 @@ border-bottom: 1px solid lighten($ui-base-color, 8%); display: flex; flex-direction: row; - padding: 10px 0; } .detailed-status__link { @@ -76,6 +75,8 @@ } .detailed-status__button { + padding: 10px 0; + .icon-button { display: inline-flex; align-items: center; @@ -87,3 +88,7 @@ } } } + +.detailed-status__wrapper { + position: relative; +} diff --git a/app/styles/gabsocial/components/emoji-reacts.scss b/app/styles/gabsocial/components/emoji-reacts.scss index 5e1cac50c..8738a0782 100644 --- a/app/styles/gabsocial/components/emoji-reacts.scss +++ b/app/styles/gabsocial/components/emoji-reacts.scss @@ -56,7 +56,6 @@ .emoji-react-selector { position: absolute; - bottom: 100%; display: flex; background-color: #fff; padding: 5px 8px; @@ -105,8 +104,24 @@ opacity: 1; pointer-events: all; } + + @media(max-width: 455px) { + position: static; + } +} + +.detailed-status__wrapper .emoji-react-selector { + bottom: 40px; + right: 10px; } .status .emoji-react-selector { + bottom: 100%; left: -20px; + + @media(max-width: 455px) { + bottom: 31px; + right: 10px; + left: auto; + } }