From 24a129c3e140a49d2aa14b4b85019894283ad0d1 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sun, 20 Oct 2024 18:53:02 +0200
Subject: [PATCH] Ads Message: Adjust styles for the ads message in channels
 (#5021)

---
 src/components/middle/MessageList.scss              | 8 ++++++++
 src/components/middle/message/SponsoredMessage.scss | 7 +++++--
 src/components/middle/message/SponsoredMessage.tsx  | 4 ++--
 3 files changed, 15 insertions(+), 4 deletions(-)

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<OwnProps & StateProps> = ({
             ariaLabel={lang('Close')}
             onClick={handleHideSponsoredMessage}
           >
-            <Icon name="close" />
+            <Icon name="close" className="sponsored-action-icon" />
           </Button>
           {message.canReport && (
             <Button
@@ -309,7 +309,7 @@ const SponsoredMessage: FC<OwnProps & StateProps> = ({
               onClick={handleContextMenu}
               onContextMenu={handleContextMenu}
             >
-              <Icon name="more" />
+              <Icon name="more" className="sponsored-action-icon" />
             </Button>
           )}
         </div>