[FIX] Stop Firefox announcement overflowing viewport (#10503)

* Stop Firefox announcement overflowing viewport

Fixes an issue where long announcement messages caused the right-hand
sidebar to and associated icons to be pushed outside the viewport due
to how non-wrapping whitespace was interacting with flex layout.

As a tradeoff, this commit causes overflowing text to no longer be
displayed with a nice ellipsis in other browsers, simply cutting it
short instead.

* Restore announcement ellipsis overflow

Announcment text is now wrapped in a `<p>` element which allows an
extra flex container to control text overflow for long announcements.
With this addition, announcements no longer make the right sidebar and
its associated icons innaccessible by pushing them out of the viewport.

A previous commit accomplished this by allowing whitespace to wrap,
which caused overflowing text to clip rather than receive an ellipsis.
This commit restores the ellipsis.

packages/rocketchat-theme/client/imports/general/base_old.css

@@ -1691,16 +1691,15 @@
 }
 
 .rc-old .announcement {
-	display: block;
+	display: flex;
+	flex-flow: row nowrap;
 	overflow: hidden;
 
 	height: 40px;
 	padding: 0 20px;
 
 	cursor: pointer;
 	text-align: center;
-	white-space: nowrap;
-	text-overflow: ellipsis;
 
 	color: var(--rc-color-content);
 
@@ -1716,6 +1715,14 @@
 
 		color: currentColor;
 	}
+
+	p {
+		width: 0; /* Grow via flex. */
+		flex: auto;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
 }
 
 .rc-old .cms-page {

packages/rocketchat-ui/client/views/app/room.html

@@ -21,7 +21,7 @@
 						{{#unless embeddedVersion}}
 							{{#if showAnnouncement}}
 							<div class="fixed-title announcement {{getAnnouncementStyle}}" aria-label="{{RocketChatMarkdown roomAnnouncement}}">
-								{{{RocketChatMarkdown roomAnnouncement}}}
+								<p>{{{RocketChatMarkdown roomAnnouncement}}}</p>
 							</div>
 							{{/if}}
 						{{/unless}}