Change banner style according to width

[hslee2008]

Problem

As clearly seen below, the Support Ukraine 🇺🇦 Banner is not changing to fit the screen.
The banenr takes up a lot of space.

Code

As seen on a screenshot of the devtools, it shows us the default style of the banner.
Everything is fine.
However, there is no code for changing the banner style to fit the screen.

File

Looking at the file that contains the style for the banner (website/src/pages/index.module.css), media exists.

@media only screen and (max-width: 768px) {
  .announcement {
    font-size: 18px;
  }
}

@media only screen and (max-width: 500px) {
  .announcement {
    font-size: 15px;
    line-height: 22px;
    padding: 6px 30px;
  }
}

However, the class is set to .announcement and there is no element by the class of .announcement.
But there is an element (the banner) that has the class of announcementBar_yyVl.
I concluded the class should be div[class^='announcementBarContent'].

Screenshots

Tested

[SimenB]

Yeah, I noticed this as well on mobile, thanks for sending a PR!. @dmitryvinn does this seem fine? I assume it was copied across Meta projects.

[SimenB]

Ping @dmitryvinn

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.