Make the 404 page device friendly.

Summary: Fixes T5686.

Test Plan: Viewed in iOS simulator and Chrome with various viewport sizes - looked good!

Reviewers: chad, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Maniphest Tasks: T5686

Differential Revision: https://secure.phabricator.com/D10082

src/aphront/response/Aphront404Response.php

@@ -7,15 +7,16 @@ final class Aphront404Response extends AphrontHTMLResponse {
   }
 
   public function buildResponseString() {
-    $failure = new AphrontRequestFailureView();
-    $failure->setHeader('404 Not Found');
-    $failure->appendChild(phutil_tag('p', array(), pht(
+    $failure = id(new AphrontRequestFailureView())
+      ->setHeader(pht('404 Not Found'))
+      ->appendChild(phutil_tag('p', array(), pht(
       'The page you requested was not found.')));
 
-    $view = new PhabricatorStandardPageView();
-    $view->setTitle('404 Not Found');
-    $view->setRequest($this->getRequest());
-    $view->appendChild($failure);
+    $view = id(new PhabricatorStandardPageView())
+      ->setTitle('404 Not Found')
+      ->setRequest($this->getRequest())
+      ->setDeviceReady(true)
+      ->appendChild($failure);
 
     return $view->render();
   }

webroot/rsrc/css/aphront/request-failure-view.css

@@ -3,11 +3,15 @@
  */
 
 .aphront-request-failure-view {
-  margin: 2em auto;
+  margin: 16px auto;
   background: #eff2f7;
   width: 600px;
 }
 
+.device .aphront-request-failure-view {
+  width: 90%;
+}
+
 .aphront-request-failure-view .aphront-request-failure-head {
   padding: 1em 2em;
   border-bottom: 1px solid #afb2b7;