diff --git a/src/common/StreamingServerWarning/StreamingServerWarning.js b/src/common/StreamingServerWarning/StreamingServerWarning.js
index f095ce1d1..f95b65978 100644
--- a/src/common/StreamingServerWarning/StreamingServerWarning.js
+++ b/src/common/StreamingServerWarning/StreamingServerWarning.js
@@ -51,11 +51,16 @@ const StreamingServerWarning = ({ className }) => {
return (
{ t('SETTINGS_SERVER_UNAVAILABLE') }
+
+
+
-
);
diff --git a/src/common/StreamingServerWarning/styles.less b/src/common/StreamingServerWarning/styles.less
index cabb73bdf..85f86dc9b 100644
--- a/src/common/StreamingServerWarning/styles.less
+++ b/src/common/StreamingServerWarning/styles.less
@@ -6,7 +6,7 @@
display: flex;
flex-direction: row;
align-items: center;
- padding: 0.5rem 1rem;
+ padding: 1rem;
background-color: @color-accent5-dark3;
.warning-statement {
@@ -19,10 +19,11 @@
.warning-button {
flex: none;
- max-width: 8rem;
+ margin-left: 1rem;
+ color: @color-surface-light5-90;
- &:not(:last-child) {
- margin-right: 1rem;
+ &:first-child {
+ margin-left: 0;
}
&:hover {
@@ -37,4 +38,23 @@
color: @color-surface-light5-90;
}
}
-}
\ No newline at end of file
+
+ .warning-button:hover {
+ text-decoration: underline;
+ }
+}
+
+@media only screen and (max-width: 500px) {
+ .warning-container {
+ display: block;
+ height: auto !important;
+ text-align: center;
+ .warning-statement {
+ margin-bottom: 0.5rem;
+ margin-right: 0;
+ }
+ .warning-button {
+ display: inline-block;
+ }
+ }
+}