diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss index 33b254dd1..3b15bae95 100644 --- a/src/components/middle/MessageList.scss +++ b/src/components/middle/MessageList.scss @@ -90,6 +90,14 @@ padding-bottom: 0.125rem; } } + + &:has(.sponsored-media-preview) { + margin-bottom: 5.625rem; + + .last-in-list { + margin-bottom: 1rem; + } + } } @media (max-width: 600px) { diff --git a/src/components/middle/message/SponsoredMessage.scss b/src/components/middle/message/SponsoredMessage.scss index c641562ae..79981ddab 100644 --- a/src/components/middle/message/SponsoredMessage.scss +++ b/src/components/middle/message/SponsoredMessage.scss @@ -49,7 +49,6 @@ --border-top-left-radius: var(--border-radius-messages-small); --border-top-right-radius: var(--border-radius-messages-small); --border-bottom-right-radius: var(--border-radius-messages-small); - --border-bottom-left-radius: var(--border-radius-messages-small); @media (max-width: 600px) { max-width: min(29rem, calc(100vw - 4.5rem)) !important; @@ -108,7 +107,7 @@ } } - .icon { + .sponsored-action-icon { position: absolute; font-size: 0.75rem; top: 0.25rem; @@ -139,4 +138,8 @@ .has-media { padding-top: 0.5rem; } + + .media-inner { + --border-bottom-left-radius: var(--border-radius-messages-small); + } } diff --git a/src/components/middle/message/SponsoredMessage.tsx b/src/components/middle/message/SponsoredMessage.tsx index ea2ce9d8f..93dcf8e62 100644 --- a/src/components/middle/message/SponsoredMessage.tsx +++ b/src/components/middle/message/SponsoredMessage.tsx @@ -297,7 +297,7 @@ const SponsoredMessage: FC = ({ ariaLabel={lang('Close')} onClick={handleHideSponsoredMessage} > - + {message.canReport && ( )}