Ads Message: Adjust styles for the ads message in channels (#5021)

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) {

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);
+  }
 }

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>