From e0eb2100029812d7707e5618c9bbf0b26e1aa892 Mon Sep 17 00:00:00 2001
From: brendangadd <brendangadd@users.noreply.github.com>
Date: Wed, 18 Apr 2018 16:51:34 -0400
Subject: [PATCH 1/2] 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.
---
 packages/rocketchat-theme/client/imports/general/base_old.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css
index 638e7da8c6fb..53661e558dd1 100644
--- a/packages/rocketchat-theme/client/imports/general/base_old.css
+++ b/packages/rocketchat-theme/client/imports/general/base_old.css
@@ -1699,8 +1699,6 @@
 
 	cursor: pointer;
 	text-align: center;
-	white-space: nowrap;
-	text-overflow: ellipsis;
 
 	color: var(--rc-color-content);
 

From 930b8793ceb9ae3ad2d3c612a4e8cea1e9d832db Mon Sep 17 00:00:00 2001
From: Brendan Gadd <brendangadd@gmail.com>
Date: Sat, 21 Apr 2018 18:14:23 -0400
Subject: [PATCH 2/2] 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.
---
 .../client/imports/general/base_old.css               | 11 ++++++++++-
 packages/rocketchat-ui/client/views/app/room.html     |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css
index 2010c5351ad3..48e69f558aaf 100644
--- a/packages/rocketchat-theme/client/imports/general/base_old.css
+++ b/packages/rocketchat-theme/client/imports/general/base_old.css
@@ -1691,7 +1691,8 @@
 }
 
 .rc-old .announcement {
-	display: block;
+	display: flex;
+	flex-flow: row nowrap;
 	overflow: hidden;
 
 	height: 40px;
@@ -1714,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 {
diff --git a/packages/rocketchat-ui/client/views/app/room.html b/packages/rocketchat-ui/client/views/app/room.html
index 540edf20e707..3b0f9313e6b0 100644
--- a/packages/rocketchat-ui/client/views/app/room.html
+++ b/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}}