From ccb3c2516a38f7582aa8ac0097b5cb7837cb7e01 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sat, 7 Oct 2023 12:38:54 +0100
Subject: [PATCH] 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
---
 resources/sass/_blocks.scss            |  1 +
 resources/sass/styles.scss             |  8 ++++++++
 resources/views/home/default.blade.php | 20 ++++++++------------
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/resources/sass/_blocks.scss b/resources/sass/_blocks.scss
index 54c509ef9..ca6efbbe1 100644
--- a/resources/sass/_blocks.scss
+++ b/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;
   }
diff --git a/resources/sass/styles.scss b/resources/sass/styles.scss
index b4691bc4d..f52b61992 100644
--- a/resources/sass/styles.scss
+++ b/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 {
diff --git a/resources/views/home/default.blade.php b/resources/views/home/default.blade.php
index 46015354d..2d71e37f6 100644
--- a/resources/views/home/default.blade.php
+++ b/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">