diff --git a/core/modules/block/css/block.admin.css b/core/modules/block/css/block.admin.css
index edfacaa..7cd9233 100644
--- a/core/modules/block/css/block.admin.css
+++ b/core/modules/block/css/block.admin.css
@@ -37,26 +37,10 @@ a.block-demo-backlink:hover {
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
-.block-list-left {
-  float: left; /* LTR */
-  padding-right: 2em; /* LTR */
-  width: 75%;
-}
-[dir="rtl"] .block-list-left {
-  float: right;
-  padding-left: 2em;
-  padding-right: 0;
-}
 .block-list-right {
   border: 1px solid #bfbfbf;
   border-bottom-width: 0;
-  float: right; /* LTR */
-  width: 25%;
-}
-[dir="rtl"] .block-list-right {
-  float: left;
 }
-
 .block-list {
   padding: 0 0.75em;
   margin: 0;
@@ -71,3 +55,63 @@ a.block-demo-backlink:hover {
 .block-list-right .form-type-search {
   padding: 0 1em;
 }
+
+/* Wide screens */
+@media
+screen and (min-width: 780px),
+(orientation: landscape) and (min-device-height: 780px) {
+
+  .block-list-left {
+    float: left; /* LTR */
+    width: 75%;
+    padding-right: 2em;
+  }
+  [dir="rtl"] .block-list-left {
+    float: right;
+    padding-left: 2em;
+    padding-right: 0;
+  }
+
+  .block-list-right {
+    float: right; /* LTR */
+    width: 25%;
+  }
+  [dir="rtl"] .block-list-right {
+    float: left;
+  }
+
+  /* @todo File an issue to add a standard class to all text-like inputs */
+  .block-list-right .form-autocomplete,
+  .block-list-right .form-text,
+  .block-list-right .form-tel,
+  .block-list-right .form-email,
+  .block-list-right .form-url,
+  .block-list-right .form-search,
+  .block-list-right .form-number,
+  .block-list-right .form-color,
+  .block-list-right textarea {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing:    border-box;
+    box-sizing:         border-box;
+    width: 100%;
+    max-width: 100%;
+  }
+}
+
+/**
+ * The vertical toolbar mode gets triggered for narrow screens, which throws off
+ * the intent of media queries written for the viewport width. When the vertical
+ * toolbar is on, we need to suppress layout for the original media width + the
+ * toolbar width (240px). In this case, 240px + 780px.
+ */
+@media
+screen and (max-width: 1020px),
+(orientation: landscape) and (max-device-height: 1020px) {
+
+  .toolbar-vertical .block-list-left,
+  .toolbar-vertical .block-list-right {
+    float: none;
+    width: auto;
+    padding-right: 0;
+  }
+}
diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css
index 7acd76f..3987549 100644
--- a/core/themes/seven/style.css
+++ b/core/themes/seven/style.css
@@ -1698,6 +1698,7 @@ details.fieldset-no-legend {
     border-top: 1px solid #bfbfbf;
   }
 
+  .block-list-right,
   .layout-region-node-secondary {
     /**
      * 1. Applies the Position Is Everything technique for equal-height columns;
@@ -1767,11 +1768,7 @@ details.fieldset-no-legend {
   screen and (max-width: 1020px),
   (orientation: landscape) and (max-device-height: 1020px) {
 
-  .toolbar-vertical .layout-region-node-secondary {
-    margin-bottom: 0;
-    padding-bottom: 0;
-    display: block;
-  }
+  .toolbar-vertical .block-list-right,
   .toolbar-vertical .layout-region-node-secondary {
     margin-bottom: 0;
     padding-bottom: 0;