Better Paste layout on mobile

Summary: Builds a container of paste, makes it smaller on mobile.

Test Plan: View on desktop, tablet, mobile.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -80,7 +80,7 @@ return array(
     'rsrc/css/application/maniphest/task-summary.css' => '11cc5344',
     'rsrc/css/application/objectselector/object-selector.css' => '85ee8ce6',
     'rsrc/css/application/owners/owners-path-editor.css' => '2f00933b',
-    'rsrc/css/application/paste/paste.css' => '1898e534',
+    'rsrc/css/application/paste/paste.css' => 'b2f5a543',
     'rsrc/css/application/people/people-profile.css' => '25970776',
     'rsrc/css/application/phame/phame.css' => 'bb147387',
     'rsrc/css/application/pholio/pholio-edit.css' => '3ad9d1ee',
@@ -703,7 +703,7 @@ return array(
     'multirow-row-manager' => 'b5d57730',
     'owners-path-editor' => 'aa1733d0',
     'owners-path-editor-css' => '2f00933b',
-    'paste-css' => '1898e534',
+    'paste-css' => 'b2f5a543',
     'path-typeahead' => 'f7fc67ec',
     'people-profile-css' => '25970776',
     'phabricator-action-list-view-css' => 'c5eba19d',

src/applications/paste/controller/PhabricatorPasteViewController.php

@@ -69,11 +69,13 @@ final class PhabricatorPasteViewController extends PhabricatorPasteController {
       null,
       $this->highlightMap);
 
-    $source_code = id(new PHUIBoxView())
-      ->appendChild($source_code)
-      ->addMargin(PHUI::MARGIN_LARGE_LEFT)
-      ->addMargin(PHUI::MARGIN_LARGE_RIGHT)
-      ->addMargin(PHUI::MARGIN_LARGE_TOP);
+    require_celerity_resource('paste-css');
+    $source_code = phutil_tag(
+      'div',
+      array(
+        'class' => 'container-of-paste',
+      ),
+      $source_code);
 
     $crumbs = $this->buildApplicationCrumbs($this->buildSideNavView())
       ->addTextCrumb('P'.$paste->getID(), '/P'.$paste->getID());

webroot/rsrc/css/application/paste/paste.css

@@ -2,6 +2,14 @@
  * @provides paste-css
  */
 
+.container-of-paste {
+  margin: 16px;
+}
+
+.device .container-of-paste {
+  margin: 8px;
+}
+
 .paste-embed {
   background: {$sh-yellowbackground};
   border: 1px solid {$sh-lightyellowborder};