fix(ui): style OS promo banner dismiss button in classic UI (#15332)

The open-source "Go Pro" promo banner (data-source="os") renders from
identical markup in both the classic (Bootstrap) and Tailwind base
templates, but the classic stylesheet was missing the OS-banner-specific
CSS the Tailwind stylesheet already had. As a result the dismiss control
fell back to a bulky default browser button and the banner row was not
laid out consistently.

Port the same OS-banner block into classic/dojo.css so both UIs render
the banner identically: a single centered row (dismiss ×, headline,
expand caret) with a compact bordered dismiss button, and the expanded
message dropping to its own full-width row.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: Maffooch

dojo/static/dojo/css/classic/dojo.css

@@ -1161,6 +1161,51 @@ div.custom-search-form {
     margin-top: 8px;
 }
 
+/* OS message banner dismiss (×): inline, grouped with the headline/caret
+   (not floated into the empty right side). Scoped so it only affects the
+   OS promo banner, which is the only banner carrying these classes. */
+/* Lay out the OS promo banner as a single centered row so the dismiss button,
+   headline, and expand caret line up vertically. Scoped to data-source="os"
+   so the other banners are untouched. */
+.announcement-banner[data-source="os"] {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.announcement-banner[data-source="os"] .banner-expanded {
+    flex-basis: 100%;  /* expanded text drops to its own row */
+}
+
+.announcement-banner .os-message-dismiss-form {
+    display: inline-flex;
+    margin-right: 10px;
+}
+
+.announcement-banner .os-message-dismiss {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    background: transparent;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 3px;
+    color: inherit;
+    cursor: pointer;
+    font-size: 13px;
+    line-height: 1;
+    opacity: 0.7;
+}
+
+.announcement-banner .os-message-dismiss:hover,
+.announcement-banner .os-message-dismiss:focus {
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.06);
+    outline: none;
+}
+
 @media (min-width: 795px) {
     div.custom-search-form {
         height: 21px;