iterate compatibility page and make styling consistent between firefox and chrome

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/structures/ErrorView.scss

@@ -25,6 +25,7 @@ limitations under the License.
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5e0f7', endColorstr='#ffffff',GradientType=0 );
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     width: 100%;
+    min-height: 100%;
     height: auto;
     color: #000;
 

src/components/structures/CompatibilityPage.tsx

@@ -39,12 +39,10 @@ const CompatibilityPage: React.FC<IProps> = ({ onAccept }) => {
             <div className="mx_HomePage_col">
                 <div className="mx_HomePage_row">
                     <div>
-                        <h2 id="step1_heading">{ _t("Use Riot in a browser") }</h2>
-                        <p>{ _t("Sorry, your browser is <b>not</b> able to run Riot.", {}, { 'b': (sub) => <b>{sub}</b> }) } </p>
+                        <h2 id="step1_heading">{ _t("Your browser can't run Riot") }</h2>
                         <p>
                             { _t(
-                                "Riot uses many advanced browser features, some of which are not available " +
-                                "or experimental in your current browser.",
+                                "Riot uses advanced browser features which aren't supported by your current browser.",
                             ) }
                         </p>
                         <p>
@@ -61,10 +59,8 @@ const CompatibilityPage: React.FC<IProps> = ({ onAccept }) => {
                         </p>
                         <p>
                             { _t(
-                                "With your current browser, the look and feel of the application may be " +
-                                "completely incorrect, and some or all features may not function. " +
-                                "If you want to try it anyway you can continue, but you are on your own in terms " +
-                                "of any issues you may encounter!",
+                                "You can continue using your current browser, but some or all features may not work " +
+                                "and the look and feel of the application may be incorrect.",
                             ) }
                         </p>
                         <button onClick={onAccept}>

src/i18n/strings/en_EN.json

@@ -20,11 +20,10 @@
     "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use Riot with an existing Matrix account on a different homeserver.": "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use Riot with an existing Matrix account on a different homeserver.",
     "Dismiss": "Dismiss",
     "Unsupported browser": "Unsupported browser",
-    "Use Riot in a browser": "Use Riot in a browser",
-    "Sorry, your browser is <b>not</b> able to run Riot.": "Sorry, your browser is <b>not</b> able to run Riot.",
-    "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.": "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.",
+    "Your browser can't run Riot": "Your browser can't run Riot",
+    "Riot uses advanced browser features which aren't supported by your current browser.": "Riot uses advanced browser features which aren't supported by your current browser.",
     "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.",
-    "With your current browser, the look and feel of the application may be completely incorrect, and some or all features may not function. If you want to try it anyway you can continue, but you are on your own in terms of any issues you may encounter!": "With your current browser, the look and feel of the application may be completely incorrect, and some or all features may not function. If you want to try it anyway you can continue, but you are on your own in terms of any issues you may encounter!",
+    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.",
     "I understand the risks and wish to continue": "I understand the risks and wish to continue",
     "Failed to start": "Failed to start",
     "Welcome to Riot.im": "Welcome to Riot.im",

src/vector/index.html

@@ -49,7 +49,7 @@
         <% }
     } %>
   </head>
-  <body style="height: 100%;" data-vector-indexeddb-worker-script="<%= htmlWebpackPlugin.files.chunks['indexeddb-worker'].entry %>">
+  <body style="height: 100%; margin: 0;" data-vector-indexeddb-worker-script="<%= htmlWebpackPlugin.files.chunks['indexeddb-worker'].entry %>">
     <noscript>Sorry, Riot requires JavaScript to be enabled.</noscript> <!-- TODO: Translate this? -->
     <section id="matrixchat" style="height: 100%; overflow: auto;"></section>
     <script src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>

src/vector/static/incompatible-browser.html

@@ -168,8 +168,7 @@
     <div class="mx_HomePage_col">
         <div class="mx_HomePage_row">
             <div>
-                <h2 id="step1_heading">Use Riot in a browser</h2>
-                <p>Sorry, your browser is <b>not</b> able to run Riot.</p>
+                <h2 id="step1_heading">Your browser can't run Riot</h2>
                 <p>Riot uses many advanced browser features, some of which are not available or experimental in your current browser.</p>
                 <p>Please install <a href="https://www.google.com/chrome">Chrome</a>, <a href="https://firefox.com">Firefox</a>,
                     or <a href="https://apple.com/safari">Safari</a> for the best experience.</p>