diff --git a/core/modules/responsive_preview/config/responsive_preview.devices.yml b/core/modules/responsive_preview/config/responsive_preview.devices.yml
index a436422..dd4f7a0 100644
--- a/core/modules/responsive_preview/config/responsive_preview.devices.yml
+++ b/core/modules/responsive_preview/config/responsive_preview.devices.yml
@@ -1,19 +1,59 @@
 devices:
   iphone:
-    label: iPhone
+    label: iPhone 5
+    dimensions:
+      width: 640
+      height: 1136
+  iphone4:
+    label: iPhone 4
+    dimensions:
+      width: 640
+      height: 960
+  iphone3gs:
+    label: iPhone 3GS
     dimensions:
       width: 320
       height: 480
-  android:
-    label: Android
+  ipadmini:
+    label: iPad mini
     dimensions:
-      width: 540
-      height: 960
-  ipad:
-    label: iPad
+      width: 768
+      height: 1024
+  ipad4:
+    label: iPad 3/4
+    dimensions:
+      width: 1536
+      height: 2048
+  ipad2:
+    label: iPad 2
     dimensions:
       width: 768
       height: 1024
+  kindlefire:
+    label: Kindle Fire
+    dimensions:
+      width: 600
+      height: 1024
+  kindlefirehd:
+    label: Kindle Fire HD
+    dimensions:
+      width: 800
+      height: 1280
+  nooktablet:
+    label: Nook Tablet
+    dimensions:
+      width: 600
+      height: 1024
+  nexus7:
+    label: Nexus 7
+    dimensions:
+      width: 800
+      height: 1280
+  surface:
+    label: Microsoft Surface
+    dimensions:
+      width: 768
+      height: 1366
   desktop:
     label: Typical desktop
     dimensions:
diff --git a/core/modules/responsive_preview/css/responsive-preview.base-rtl.css b/core/modules/responsive_preview/css/responsive-preview.base-rtl.css
index 910cc13..eaf2504 100644
--- a/core/modules/responsive_preview/css/responsive-preview.base-rtl.css
+++ b/core/modules/responsive_preview/css/responsive-preview.base-rtl.css
@@ -6,6 +6,18 @@
 /**
  * Toolbar tab.
  */
+
+/* At narrow screen widths, float the tab to the right so it falls in line with
+ * the rest of the toolbar tabs. */
+.js .toolbar .bar .responsive-preview-toolbar-tab.tab {
+  float: right;
+}
+/* At wide widths, float the tab to the left. */
+@media only screen and (min-width: 36em) {
+  .js .toolbar .bar .responsive-preview-toolbar-tab.tab {
+    float: left;
+  }
+}
 .responsive-preview-toolbar-tab .responsive-preview-options {
   left: 0.3em;
   right: auto;
diff --git a/core/modules/responsive_preview/css/responsive-preview.base.css b/core/modules/responsive_preview/css/responsive-preview.base.css
index 49a9cef..6586f57 100644
--- a/core/modules/responsive_preview/css/responsive-preview.base.css
+++ b/core/modules/responsive_preview/css/responsive-preview.base.css
@@ -32,7 +32,7 @@
 }
 .responsive-preview-toolbar-tab .responsive-preview-options {
   display: none;
-  right: 0.3em; /* LTR */
+  z-index: 1;
 }
 .responsive-preview-toolbar-tab.open .responsive-preview-options {
   display: block;
diff --git a/core/modules/responsive_preview/css/responsive-preview.theme-rtl.css b/core/modules/responsive_preview/css/responsive-preview.theme-rtl.css
index 47a60aa..8add01e 100644
--- a/core/modules/responsive_preview/css/responsive-preview.theme-rtl.css
+++ b/core/modules/responsive_preview/css/responsive-preview.theme-rtl.css
@@ -19,7 +19,11 @@
   right: auto;
 }
 .responsive-preview-toolbar-tab.open:before {
-  left: 0.3em;
+  left: 0;
+  right: auto;
+}
+.responsive-preview-toolbar-tab.open .trigger:after {
+  left: 0.7em;
   right: auto;
 }
 
diff --git a/core/modules/responsive_preview/css/responsive-preview.theme.css b/core/modules/responsive_preview/css/responsive-preview.theme.css
index 72ffecd..3dce264 100644
--- a/core/modules/responsive_preview/css/responsive-preview.theme.css
+++ b/core/modules/responsive_preview/css/responsive-preview.theme.css
@@ -34,13 +34,12 @@
 }
 /* Device preview options. */
 .responsive-preview-toolbar-tab .responsive-preview-options {
-  box-shadow: 0 0 2em 0 rgba(0, 0, 0, 0.75);
+  box-shadow: 0 0.8em 2.5em -0.8em rgba(0, 0, 0, 0.75);
   position: absolute;
   white-space: nowrap;
 }
 .responsive-preview-toolbar-tab .responsive-preview-options li {
   background-color: white;
-  border-top: 1px solid #cfcfcf;
 }
 .responsive-preview-toolbar-tab .trigger {
   height: 3em;
@@ -78,11 +77,11 @@
 }
 .responsive-preview-toolbar-tab.open:before {
   background-color: white;
-  bottom: -1px;
+  bottom: 0;
   content: ' ';
   display: block;
   position: absolute;
-  right: 0.3em; /* LTR */
+  right: 0; /* LTR */
   top: 0;
   width: 2em;
   z-index: 1;
@@ -91,6 +90,7 @@
   border-bottom: 0.4545em solid;
   border-top-color: transparent;
   color: black;
+  right: 0.7em; /* LTR */
   top: 1.25em;
 }
 
diff --git a/core/modules/responsive_preview/js/responsive-preview.js b/core/modules/responsive_preview/js/responsive-preview.js
index 02444d2..a58d040 100644
--- a/core/modules/responsive_preview/js/responsive-preview.js
+++ b/core/modules/responsive_preview/js/responsive-preview.js
@@ -21,6 +21,8 @@
     height: null // The height of the device to preview.
   };
   var edgeTolerance = 60;
+  // Take RTL text direction into account.
+  var dir = document.getElementsByTagName('html')[0].getAttribute('dir');
   var parentWindow;
 
   /**
@@ -42,12 +44,15 @@
         $(window.document.body).once('responsive-preview');
         // Retain a reference to the parent window.
         parentWindow = window;
-        // Append the selector to the preview container.
+        // Assign behaviors to the toolbar tab.
         $toolbarTab = $('.responsive-preview-toolbar-tab')
+          .on('click.responsivePreview', toggleConfigurationOptions)
           .on('click.responsivePreview', '#responsive-preview', toggleConfigurationOptions)
-          .on('mouseleave.responsivePreview', '.responsive-preview-options', {open: false}, toggleConfigurationOptions)
+          .on('mouseleave.responsivePreview', {open: false}, toggleConfigurationOptions)
           .on('click.responsivePreview', '.responsive-preview-options .responsive-preview-device', {open: false}, toggleConfigurationOptions)
           .on('click.responsivePreview', '.responsive-preview-device', loadDevicePreview);
+        // Hide layout options that are wider than the current screen
+        prunePreviewChoices.call($toolbarTab.find('.responsive-preview-device'), edgeTolerance);
         // Register a handler on window resize to reposition the tab dropdown.
         $(window)
           .on('resize.responsivePreview.tab', handleWindowToolbarResize);
@@ -69,13 +74,14 @@
   /**
    * Toggles the list of devices available to preview from the toolbar tab.
    *
-   * @param {Object} event
+   * @param Object event
    *   jQuery Event object.
    */
   function toggleConfigurationOptions (event) {
     event.preventDefault();
+    event.stopPropagation();
     var open = (event.data && typeof event.data.open === 'boolean') ? event.data.open : undefined;
-    var $list = $(event.delegateTarget)
+    var $list = $toolbarTab
       // Set an open class on the tab wrapper.
       .toggleClass('open', open)
       .find('.responsive-preview-options');
@@ -89,10 +95,10 @@
    * When first toggled on, the layout preview component is built. All
    * subsequent toggles hide or show the built component.
    *
-   * @param {Object} event
+   * @param Object event
    *   jQuery Event object.
    *
-   * @param {Boolean} activate
+   * @param Boolean activate
    *   A boolean that forces the preview to show (true) or to hide (false).
    */
   function toggleLayoutPreview (event, activate) {
@@ -113,7 +119,7 @@
   /**
    * Assembles a layout preview.
    */
-  function buildpreview (window) {
+  function buildpreview () {
     $(parentWindow.document.body).once('responsive-preview-container', function (index, element) {
       $container = $(Drupal.theme('layoutContainer'));
 
@@ -153,10 +159,10 @@
   /**
    * Updates the dimension variables of the preview components.
    *
-   * @param {Object} dimensions
+   * @param Object dimensions
    *   An object with the following properties:
-   *    - {Number} width: The width the preview should be set to.
-   *    - {Number} height (optional): The height the preview should be set to.
+   *    - Number width: The width the preview should be set to.
+   *    - Number height (optional): The height the preview should be set to.
    *
    * @todo dimensions.height is not yet being used.
    */
@@ -182,7 +188,7 @@
   /**
    * Handles refreshing the layout toolbar tab positioning.
    *
-   * @param {Object} event
+   * @param Object event
    *   jQuery Event object.
    */
   function handleWindowToolbarResize (event) {
@@ -200,7 +206,7 @@
   /**
    * Resizes the preview iframe to the configured dimensions of a device.
    *
-   * @param {Object} event
+   * @param Object event
    *   A jQuery event object.
    */
   function loadDevicePreview (event) {
@@ -216,12 +222,10 @@
   /**
    * Redraws the layout preview component based on the stored dimensions.
    *
-   * @param {Object} event
+   * @param Object event
    *   A jQuery event object.
    */
   function refreshPreviewSizing (event) {
-    // Take RTL text direction into account.
-    var dir = document.getElementsByTagName('html')[0].getAttribute('dir');
     var edge = (dir === 'rtl') ? 'right' : 'left';
     var options = {
       width: size
@@ -238,10 +242,10 @@
   /**
    * Get the total displacement of given region.
    *
-   * @param {String} region
+   * @param String region
    *   Region name. Either "top" or "bottom".
    *
-   * @return {Number}
+   * @return Number
    *   The total displacement of given region in pixels.
    */
   function getDisplacement (region) {
@@ -263,74 +267,18 @@
    * correctEdgeCollisions.call($('div'));
    */
   function correctEdgeCollisions () {
-    // Clear any previous corrections.
-    clearStyling.call(this, ['top', 'right', 'bottom', 'left']);
+    // The position of the dropdown depends on the language direction.
+    var edge = (dir === 'rtl') ? 'left' : 'right';
     // Go through each element and correct edge collisions.
     return this.each(function (index, element) {
-      var $this = $(this);
-      var width = $this.width();
-      var height = $this.height();
-      var clientW = document.documentElement.clientWidth;
-      var clientH = document.documentElement.clientHeight;
-      var collisions = {
-        'top': null,
-        'right': null,
-        'bottom': null,
-        'left': null
-      };
-      // Determine if the element is too big for the document. Resize to fit.
-      if (width > clientW) {
-        $this.width(clientW);
-        // If the element is too wide, it will collide on both left and right.
-        collisions.left = true;
-        collisions.right = true;
-      }
-      if (height > clientH) {
-        $this.height(clientH);
-        // If the element is too high, it will collide on both top and bottom.
-        collisions.top = true;
-        collisions.bottom = true;
-      }
-      // Check each edge for a collision.
-      if (!collisions.top && $this.position().top < 0) {
-        collisions.top = true;
-      }
-      if (!collisions.right && (($this.offset().left + width) > clientW)) {
-        collisions.right = true;
-      }
-      if (!collisions.bottom && (($this.position().top + height) > clientH)) {
-        collisions.bottom = true;
-      }
-      if (!collisions.left && $this.offset().left < 0) {
-        collisions.left = true;
-      }
-      // Set the offset to zero for any collision on an edge.
-      for (var edge in collisions) {
-        if (collisions.hasOwnProperty(edge)) {
-          if (collisions[edge]) {
-            $this.css(edge, 0);
-          }
-        }
-      }
-    });
-  }
-
-  /**
-   * Clears any previous styling.
-   *
-   * This should be invoked against a jQuery set like this:
-   * clearStyling.call($('div'), ['left','right']);
-   *
-   * @param {Array} styles
-   *   An array of strings where each string is the name of a CSS property.
-   */
-  function clearStyling (styles) {
-    return this.each(function (index, element) {
-      for (var i = 0; i < styles.length; i++) {
-        if ('style' in this && styles[i] in this.style) {
-          this.style[styles[i]] = "";
-        }
-      }
+      $(this)
+        // Invoke jQuery UI position on the device options.
+        .position({
+          'my': edge +' top',
+          'at': edge + ' bottom',
+          'of': $toolbarTab,
+          'collision': 'flip fit'
+        });
     });
   }
 
@@ -340,7 +288,7 @@
    * This should be invoked against a jQuery set like this:
    * prunePreviewChoices.call($('div'), 20);
    *
-   * @param {Number} tolerance
+   * @param Number tolerance
    *   The distance from the edge of the window that a device cannot exceed
    *   or it will be pruned from the list.
    */
diff --git a/core/modules/responsive_preview/responsive_preview.module b/core/modules/responsive_preview/responsive_preview.module
index f4fbf75..43abbeb 100644
--- a/core/modules/responsive_preview/responsive_preview.module
+++ b/core/modules/responsive_preview/responsive_preview.module
@@ -6,6 +6,22 @@
  */
 
 /**
+ * Implements hook_help().
+ */
+function responsive_preview_help($path, $arg) {
+
+  switch ($path) {
+    case 'admin/help#responsive_preview':
+      $output = '<h3>' . t('About') . '</h3>';
+      $output .= '<p>' . t('The Responsive Preview module provides a quick way to preview a page on your site within the dimensions of many popular device and screen sizes.') . '</p>';
+      $output .= '<h3>' . t('Uses') . '</h3>';
+      $output .= '<p>' . t('To launch a preview, first click the toolbar tab with the small device icon. The tab has the title "@title". A list of devices will appear. Selecting a device name will launch a preview of the current page within the dimensions of that device.', array('@title' => t('Preview page layout'))) . '</p>';
+      $output .= '<p>' . t('To close the preview, click the close button signified visually by an x.') . '</p>';
+      return $output;
+  }
+}
+
+/**
  * Returns a list of devices and their properties from configuration.
  */
 function responsive_preview_get_devices_list() {
@@ -109,6 +125,7 @@ function responsive_preview_library_info() {
     'dependencies' => array(
       array('system', 'jquery'),
       array('system', 'drupal'),
+      array('system', 'jquery.ui.position'),
     ),
   );