Homepage: Made much nicer at ipad-like widths

Updated default homepage layout to be much nicer at ipad-like widths by
switching to css-column approach at those breakpoints.
Also neated top actions by switching to simpler flexbox layout.

Fixes #4596

Author: ssddanbrown

resources/sass/_blocks.scss

@@ -6,6 +6,7 @@
   @include lightDark(background-color, #FFF, #222);
   box-shadow: $bs-card;
   border-radius: 3px;
+  break-inside: avoid;
   .body, p.empty-text {
     padding: $-m;
   }

resources/sass/styles.scss

@@ -184,6 +184,14 @@ $loadingSize: 10px;
   z-index: 150;
 }
 
+@include between($s, $m) {
+  #home-default > .grid.third {
+    display: block;
+    columns: 2;
+    column-gap: $-l !important;
+  }
+}
+
 .list-sort-container {
   display: inline-block;
   form {

resources/views/home/default.blade.php

@@ -2,23 +2,19 @@
 
 @section('body')
 
-    <div class="container px-xl py-s">
-        <div class="grid half">
-            <div>
-                <div class="icon-list inline block">
-                    @include('home.parts.expand-toggle', ['classes' => 'text-muted text-link', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
-                </div>
-            </div>
-            <div class="text-m-right">
-                <div class="icon-list inline block">
-                    @include('common.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-link'])
-                </div>
+    <div class="container px-xl py-s flex-container-row gap-l wrap justify-space-between">
+        <div class="icon-list inline block">
+            @include('home.parts.expand-toggle', ['classes' => 'text-muted text-link', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
+        </div>
+        <div>
+            <div class="icon-list inline block">
+                @include('common.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-link'])
             </div>
         </div>
     </div>
 
     <div class="container" id="home-default">
-        <div class="grid third gap-xxl no-row-gap" >
+        <div class="grid third gap-x-xxl no-row-gap">
             <div>
                 @if(count($draftPages) > 0)
                     <div id="recent-drafts" class="card mb-xl">