From b63decdfe18f61cd786d8463d696798201f93f1e Mon Sep 17 00:00:00 2001
From: luchaos <luchaos@gmail.com>
Date: Wed, 26 Jul 2023 01:24:04 +0200
Subject: [PATCH 1/2] fix(layout): prevent layout shift with sidebars

Apply `lg:grid grid-cols-[1fr_340px] gap-4` in top brand, nav, and main content areas.
Prevents layout shift and works with wide layouts (see /demo).
---
 app/Helpers/render/layout.php                     |  2 +-
 resources/css/legacy.css                          | 15 ---------------
 resources/css/search.css                          |  1 -
 resources/views/components/menu/main.blade.php    |  2 +-
 .../views/components/user/top-card.blade.php      |  2 +-
 .../views/layouts/components/brand-top.blade.php  |  4 ++--
 resources/views/layouts/components/main.blade.php | 10 +++++-----
 7 files changed, 10 insertions(+), 26 deletions(-)

diff --git a/app/Helpers/render/layout.php b/app/Helpers/render/layout.php
index 5392d3ded9..cb683d27ec 100644
--- a/app/Helpers/render/layout.php
+++ b/app/Helpers/render/layout.php
@@ -107,7 +107,7 @@ function RenderToolbar(): void
 
         ],
     ];
-    echo "<ul class='flex-1'>";
+    echo "<ul>";
     echo "<li><a href='#'>Games</a>";
     echo "<div>";
     foreach ($menuSystemsList as $column) {
diff --git a/resources/css/legacy.css b/resources/css/legacy.css
index 261f429127..78d9bbc282 100644
--- a/resources/css/legacy.css
+++ b/resources/css/legacy.css
@@ -23,13 +23,9 @@
   margin-bottom: 10px;
   border: 2px solid var(--embed-color);
   border-radius: 4px;
-  align-self: start;
-  grid-column: span 2;
-  flex-grow: 1;
   background: var(--box-bg-color);
   background: linear-gradient(180deg, var(--box-bg-color) 0%, var(--bg-color) 100%);
   overflow: auto; /* 1 */
-  grid-column: 1 / -1;
 }
 
 /*
@@ -41,7 +37,6 @@
   display: block;
   border: 2px solid var(--embed-color);
   border-radius: 4px;
-  align-self: start;
   background: var(--box-bg-color);
   background: linear-gradient(180deg, var(--box-bg-color) 0%, var(--bg-color) 100%);
   overflow: auto; /* 1 */
@@ -52,19 +47,9 @@
   margin-bottom: 10px;
   border: 2px solid var(--embed-color);
   border-radius: 4px;
-  align-self: start;
   background: var(--box-bg-color);
   background: linear-gradient(0deg, var(--box-bg-color) 0%, var(--bg-color) 100%);
   overflow: auto; /* 1 */
-  width: 100%;
-}
-
-@media only screen and (min-width: 1024px) {
-  #rightcontainer, aside {
-    width: 340px;
-    max-width: 340px;
-    min-width: 340px;
-  }
 }
 
 /* TODO replace with sections */
diff --git a/resources/css/search.css b/resources/css/search.css
index c54801803c..f929ff56a0 100644
--- a/resources/css/search.css
+++ b/resources/css/search.css
@@ -15,7 +15,6 @@
 .searchbox-top {
   background-color: var(--embed-color);
   border-radius: 4px;
-  width: 340px;
 }
 
 .searchbox-top .searchboxinput {
diff --git a/resources/views/components/menu/main.blade.php b/resources/views/components/menu/main.blade.php
index 6e7b12b72e..af246dde48 100644
--- a/resources/views/components/menu/main.blade.php
+++ b/resources/views/components/menu/main.blade.php
@@ -13,6 +13,6 @@
         <x-nav-item :link="route('tool.index')">{{ __('Tools') }}</x-nav-item>
     @endif
 </ul>--}}
-<div class="lg:flex gap-4 justify-between items-center" id="innermenu">
+<div class="lg:grid grid-cols-[1fr_340px] gap-4" id="innermenu">
     <?php RenderToolbar() ?>
 </div>
diff --git a/resources/views/components/user/top-card.blade.php b/resources/views/components/user/top-card.blade.php
index 808689716f..137d583447 100644
--- a/resources/views/components/user/top-card.blade.php
+++ b/resources/views/components/user/top-card.blade.php
@@ -8,7 +8,7 @@
 /** @var ?User $user */
 $user = request()->user();
 ?>
-<div class="bg-embedded rounded lg:w-[340px] lg:my-4 p-[1.125rem]">
+<div class="bg-embedded rounded lg:my-4 p-[1.125rem]">
     @guest
         <form class="flex gap-[1.125rem]" action="/request/auth/login.php" method="post">
             @csrf
diff --git a/resources/views/layouts/components/brand-top.blade.php b/resources/views/layouts/components/brand-top.blade.php
index 3738b2a41f..ccb006cc3e 100644
--- a/resources/views/layouts/components/brand-top.blade.php
+++ b/resources/views/layouts/components/brand-top.blade.php
@@ -1,7 +1,7 @@
 <x-section class="brand-top">
     <x-container>
         {{--<div class="hidden lg:flex gap-4 justify-between items-center">--}}
-        <div class="lg:flex gap-4 justify-between items-center">
+        <div class="lg:grid grid-cols-[1fr_340px] gap-4 items-center">
             {{-- TODO re-build settings page for logo --}}
             {{--@if(request()->cookie('logo') === 'retro')
                 <div class="logo-container lg:flex justify-start items-center pr-4 pt-4">
@@ -30,7 +30,7 @@
                     </a>
                 </div>
             @endif--}}
-            <div class="p-4 flex-1 text-center">
+            <div class="p-4 text-center">
                 <a href="{{ route('home') }}"><img style="max-width:550px;width:100%" src="{{ asset('assets/images/ra-logo-sm.webp') }}" alt="RetroAchievements logo"></a>
             </div>
             <x-user.top-card/>
diff --git a/resources/views/layouts/components/main.blade.php b/resources/views/layouts/components/main.blade.php
index 501aa65bf5..b363752439 100644
--- a/resources/views/layouts/components/main.blade.php
+++ b/resources/views/layouts/components/main.blade.php
@@ -1,13 +1,13 @@
 <x-container :fluid="$fluid ?? false">
     <main class="{{ $class ?? 'mb-5' }}" data-scroll-target>
         @if(trim($sidebar ?? false))
-            <div class="lg:grid grid-flow-col gap-4">
-                <aside class="lg:col-span-1 {{ $sidebarPosition === 'right' ? 'order-2' : 'order-1'}}">
-                    {{ $sidebar }}
-                </aside>
-                <article class="lg:col-span-2 mb-3 {{ $sidebarPosition === 'right' ? 'order-1' : 'order-2'}}">
+            <div class="lg:grid grid-cols-[1fr_340px] gap-4">
+                <article class="{{ $sidebarPosition === 'right' ? 'order-2' : 'order-1'}}">
                     {{ $slot }}
                 </article>
+                <aside class="{{ $sidebarPosition === 'right' ? 'order-2' : 'order-1'}}">
+                    {{ $sidebar }}
+                </aside>
             </div>
         @else
             <article>

From 8b75a85dbb897dce06e30ecf353256667b1365a1 Mon Sep 17 00:00:00 2001
From: luchaos <luchaos@gmail.com>
Date: Mon, 31 Jul 2023 00:05:03 +0200
Subject: [PATCH 2/2] Add back `align-self: start;`

---
 resources/css/legacy.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/resources/css/legacy.css b/resources/css/legacy.css
index 78d9bbc282..cd8d8622eb 100644
--- a/resources/css/legacy.css
+++ b/resources/css/legacy.css
@@ -23,6 +23,7 @@
   margin-bottom: 10px;
   border: 2px solid var(--embed-color);
   border-radius: 4px;
+  align-self: start;
   background: var(--box-bg-color);
   background: linear-gradient(180deg, var(--box-bg-color) 0%, var(--bg-color) 100%);
   overflow: auto; /* 1 */
@@ -47,6 +48,7 @@
   margin-bottom: 10px;
   border: 2px solid var(--embed-color);
   border-radius: 4px;
+  align-self: start;
   background: var(--box-bg-color);
   background: linear-gradient(0deg, var(--box-bg-color) 0%, var(--bg-color) 100%);
   overflow: auto; /* 1 */