diff --git a/core/misc/ajax.js b/core/misc/ajax.js
index fefe9f3..f72100b 100644
--- a/core/misc/ajax.js
+++ b/core/misc/ajax.js
@@ -64,6 +64,7 @@
           element_settings.event = 'click';
         }
         element_settings.dialogType = $(this).data('dialog-type');
+        element_settings.dialogRenderer = $(this).data('dialog-renderer');
         element_settings.dialog = $(this).data('dialog-options');
         element_settings.base = $(this).attr('id');
         element_settings.element = this;
@@ -312,6 +313,8 @@
    *   Options for {@link Drupal.dialog}.
    * @prop {string} [dialogType]
    *   One of `'modal'` or `'dialog'`.
+   * @prop {string} [dialogRenderer]
+   *   The Drupal renderer for the dialog.
    * @prop {string} [prevent]
    *   List of events on which to stop default action and stop propagation.
    */
@@ -526,7 +529,12 @@
     else {
       ajax.options.url += '&';
     }
-    ajax.options.url += Drupal.ajax.WRAPPER_FORMAT + '=drupal_' + (element_settings.dialogType || 'ajax');
+    var wrapper_format = 'drupal_' + (element_settings.dialogType || 'ajax');
+    if (element_settings.dialogRenderer) {
+      wrapper_format += '_' + element_settings.dialogRenderer;
+    }
+    ajax.options.url += Drupal.ajax.WRAPPER_FORMAT + '=' + wrapper_format;
+
 
     // Bind the ajaxSubmit function to the element event.
     $(ajax.element).on(element_settings.event, function (event) {
diff --git a/core/misc/dialog/dialog.ajax.js b/core/misc/dialog/dialog.ajax.js
index 3f1b0c2..c73be9a 100644
--- a/core/misc/dialog/dialog.ajax.js
+++ b/core/misc/dialog/dialog.ajax.js
@@ -130,7 +130,7 @@
     ajax.commands.insert(ajax, response, status);
 
     // Move the buttons to the jQuery UI dialog buttons area.
-    if (!response.dialogOptions.buttons) {
+    if (!response.dialogOptions.buttons && response.dialogOptions.drupalAutoButtons !== false) {
       response.dialogOptions.drupalAutoButtons = true;
       response.dialogOptions.buttons = Drupal.behaviors.dialog.prepareDialogButtons($dialog);
     }
diff --git a/core/modules/outside_in/js/offcanvas.js b/core/modules/outside_in/js/offcanvas.js
index 0f5ae08..1048105 100644
--- a/core/modules/outside_in/js/offcanvas.js
+++ b/core/modules/outside_in/js/offcanvas.js
@@ -7,6 +7,9 @@
 
   'use strict';
 
+
+  return;
+
   // Set the initial state of the off-canvas element.
   // If the state has been set previously, use it.
   Drupal.offCanvas = {
diff --git a/core/modules/outside_in/js/outside_in.js b/core/modules/outside_in/js/outside_in.js
index f67fa9d..2f84076 100644
--- a/core/modules/outside_in/js/outside_in.js
+++ b/core/modules/outside_in/js/outside_in.js
@@ -3,7 +3,7 @@
  * Drupal's Outside-In library.
  */
 
-(function ($, Drupal) {
+(function ($, Drupal, debounce, displace) {
 
   'use strict';
 
@@ -63,6 +63,7 @@
       }
       element_settings.dialogType = $(this).data('dialog-type');
       element_settings.dialog = $(this).data('dialog-options');
+      element_settings.dialogRenderer = $(this).data('dialog-renderer');
       element_settings.base = $(this).attr('id');
       element_settings.element = this;
       Drupal.ajax(element_settings);
@@ -144,4 +145,89 @@
     }
   };
 
-})(jQuery, Drupal);
+
+
+  function resetSize(event) {
+    var offsets = displace.offsets;
+    var $element = event.data.$element;
+    var $widget = $element.dialog('widget');
+
+    var adjustedOptions = {
+      position: {
+        my: 'right top',
+        at: 'right top' + (offsets.top !== 0 ? '+' + offsets.top : ''),
+        of: window
+      }
+    };
+
+    $widget.css({
+      position: 'fixed',
+      height: ($(window).height() - (offsets.top + offsets.bottom)) + 'px'
+    });
+
+    $element
+      .dialog('option', adjustedOptions)
+      .trigger('dialogContentResize.outsidein');
+  }
+
+  function handleDialogResize(event) {
+    var $element = event.data.$element;
+    var $widget = $element.dialog('widget');
+
+    var $offsets = $widget.find('> :not(#drupal-outsidein, .ui-resizable-handle)');
+    var offset = 0;
+    var modalHeight;
+
+    // Let scroll element take all the height available.
+    $element.css({overflow: 'visible', height: 'auto'});
+    modalHeight = $widget.height();
+    $offsets.each(function () { offset += $(this).outerHeight(); });
+
+    // Take internal padding into account.
+    var scrollOffset = $element.outerHeight() - $element.height();
+    $element.height(modalHeight - offset - scrollOffset);
+  }
+
+  function bodyPadding(event) {
+    var $element = event.data.$element;
+    var $widget = $element.dialog('widget');
+    var $body = $('body');
+
+    var width = $widget.outerWidth();
+    var bodyPadding = $body.css('padding-right');
+    if (width !== bodyPadding) {
+      $body.css('padding-right', width + 'px');
+      $widget.attr('data-offset-right', width);
+      Drupal.displace();
+    }
+  }
+
+
+  $(window).on({
+    'dialog:aftercreate': function (event, dialog, $element, settings) {
+      if ($element.is('#drupal-outsidein')) {
+        var eventData = {settings: settings, $element: $element};
+
+        $element
+          .on('dialogresize.outsidein', eventData, debounce(bodyPadding, 100))
+          .on('dialogContentResize.outsidein', eventData, handleDialogResize)
+          .trigger('dialogresize.outsidein');
+
+        $element.dialog('widget').attr('data-offset-right', '');
+
+        $(window)
+          .on('resize.outsidein scroll.outsidein', eventData, debounce(resetSize, 100))
+          .trigger('resize.outsidein');
+
+        //$(document).on('drupalViewportOffsetChange.outsidein', eventData, autoResize);
+      }
+    },
+    'dialog:beforeclose': function (event, dialog, $element) {
+      $(document).off('.outsidein');
+      $(window).off('.outsidein');
+      $('body').css('padding-right', 0);
+    }
+  });
+
+
+})(jQuery, Drupal, Drupal.debounce, Drupal.displace);
diff --git a/core/modules/outside_in/outside_in.module b/core/modules/outside_in/outside_in.module
index 2822e24..3ff6b4e 100644
--- a/core/modules/outside_in/outside_in.module
+++ b/core/modules/outside_in/outside_in.module
@@ -32,7 +32,8 @@ function outside_in_contextual_links_view_alter(&$element, $items) {
   if (isset($element['#links']['outside-inblock-configure'])) {
     $element['#links']['outside-inblock-configure']['attributes'] = [
       'class' => ['use-ajax'],
-      'data-dialog-type' => 'offcanvas',
+      'data-dialog-type' => 'dialog',
+      'data-dialog-renderer' => 'offcanvas',
     ];
 
     $element['#attached']['library'][] = 'outside_in/drupal.off_canvas';
@@ -52,26 +53,6 @@ function outside_in_block_view_alter(array &$build) {
 }
 
 /**
- * Implements hook_element_info_alter().
- */
-function outside_in_element_info_alter(&$type) {
-  if (isset($type['page'])) {
-    $type['page']['#theme_wrappers']['outside_in_page_wrapper'] = ['#weight' => -1000];
-  }
-}
-
-/**
- * Implements hook_theme().
- */
-function outside_in_theme() {
-  return [
-    'outside_in_page_wrapper' => [
-      'variables' => ['children' => NULL],
-    ],
-  ];
-}
-
-/**
  * Implements hook_entity_type_build().
  */
 function outside_in_entity_type_build(array &$entity_types) {
diff --git a/core/modules/outside_in/outside_in.services.yml b/core/modules/outside_in/outside_in.services.yml
index 9ac920a..48f5824 100644
--- a/core/modules/outside_in/outside_in.services.yml
+++ b/core/modules/outside_in/outside_in.services.yml
@@ -3,7 +3,7 @@ services:
     class: Drupal\outside_in\Render\MainContent\OffCanvasRender
     arguments: ['@title_resolver', '@renderer']
     tags:
-      - { name: render.main_content_renderer, format: drupal_offcanvas }
+      - { name: render.main_content_renderer, format: drupal_dialog_offcanvas }
 
   outside_in.manager:
     class: Drupal\outside_in\OutsideInManager
diff --git a/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php b/core/modules/outside_in/src/Ajax/OpenOutsideinDialogCommand.php
similarity index 77%
rename from core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php
rename to core/modules/outside_in/src/Ajax/OpenOutsideinDialogCommand.php
index 7a49505..2c67e13 100644
--- a/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php
+++ b/core/modules/outside_in/src/Ajax/OpenOutsideinDialogCommand.php
@@ -9,7 +9,7 @@
  *
  * @ingroup ajax
  */
-class OpenOffCanvasDialogCommand extends OpenDialogCommand {
+class OpenOutsideinDialogCommand extends OpenDialogCommand {
 
   /**
    * Constructs an OpenOffCanvasDialogCommand object.
@@ -31,18 +31,21 @@ class OpenOffCanvasDialogCommand extends OpenDialogCommand {
    *   populated automatically from the current request.
    */
   public function __construct($title, $content, array $dialog_options = [], $settings = NULL) {
-    $dialog_options['modal'] = FALSE;
-    parent::__construct('#drupal-offcanvas', $title, $content, $dialog_options, $settings);
+    parent::__construct('#drupal-outsidein', $title, $content, $dialog_options, $settings);
+    $this->dialogOptions['modal'] = FALSE;
+    $this->dialogOptions['autoResize'] = FALSE;
+    $this->dialogOptions['resizable'] = 'w';
+    $this->dialogOptions['draggable'] = FALSE;
+    $this->dialogOptions['drupalAutoButtons'] = FALSE;
   }
 
   /**
    * {@inheritdoc}
    */
   public function render() {
-    $this->dialogOptions['modal'] = FALSE;
     return [
-      'command' => 'openOffCanvas',
-      'selector' => $this->selector,
+      'command' => 'openDialog',
+      'selector' => '#drupal-outsidein',
       'settings' => $this->settings,
       'data' => $this->getRenderedContent(),
       'dialogOptions' => $this->dialogOptions,
diff --git a/core/modules/outside_in/src/Render/MainContent/OffCanvasRender.php b/core/modules/outside_in/src/Render/MainContent/OffCanvasRender.php
index 5d24c09..f391e2e 100644
--- a/core/modules/outside_in/src/Render/MainContent/OffCanvasRender.php
+++ b/core/modules/outside_in/src/Render/MainContent/OffCanvasRender.php
@@ -7,7 +7,7 @@
 use Drupal\Core\Render\MainContent\DialogRenderer;
 use Drupal\Core\Render\RendererInterface;
 use Drupal\Core\Routing\RouteMatchInterface;
-use Drupal\outside_in\Ajax\OpenOffCanvasDialogCommand;
+use Drupal\outside_in\Ajax\OpenOutsideinDialogCommand;
 use Symfony\Component\HttpFoundation\Request;
 
 /**
@@ -56,7 +56,7 @@ public function renderResponse(array $main_content, Request $request, RouteMatch
     // otherwise get it from the routing information.
     $options = $request->request->get('dialogOptions', []);
 
-    $response->addCommand(new OpenOffCanvasDialogCommand($title, $content, $options));
+    $response->addCommand(new OpenOutsideinDialogCommand($title, $content, $options));
     return $response;
   }
 
diff --git a/core/modules/outside_in/templates/outside-in-page-wrapper.html.twig b/core/modules/outside_in/templates/outside-in-page-wrapper.html.twig
deleted file mode 100644
index 76ff5ce..0000000
--- a/core/modules/outside_in/templates/outside-in-page-wrapper.html.twig
+++ /dev/null
@@ -1,22 +0,0 @@
-{#
-/**
- * @file
- * Default theme implementation for a page wrapper.
- *
- * For consistent wrapping to {{ page }} render in all themes.
- *
- * Available variables:
- * - children: Contains the child elements of the page.
- *
- * @ingroup themeable
- */
-#}
-{% if children %}
-  {% spaceless %}
-    <div id="main-canvas-wrapper">
-      <div id="main-canvas">
-        {{ children }}
-      </div>
-    </div>
-  {% endspaceless %}
-{% endif %}