From 87dc5da17ba1fd4ac6cf70d2301ca0ac6af7412c Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne@forem.com>
Date: Tue, 5 Apr 2022 13:14:50 +0100
Subject: [PATCH] tweak crayons layout for admin section (#17122)

---
 app/assets/stylesheets/base/layout.scss | 11 +++++++++++
 app/views/layouts/admin.html.erb        |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/base/layout.scss b/app/assets/stylesheets/base/layout.scss
index 8802fd019..300e131bd 100644
--- a/app/assets/stylesheets/base/layout.scss
+++ b/app/assets/stylesheets/base/layout.scss
@@ -192,6 +192,17 @@
   }
 }
 
+// Unlike the main app, in the admin area we only break into 2 side-by-side columns at large breakpoint,
+// to allow more real estate for data tables
+.crayons-layout--admin-2-cols {
+  @media (min-width: $breakpoint-l) {
+    --layout: var(--layout-sidebar-left-width) var(--layout-content-width);
+    --layout-sidebar-left-width: 240px;
+    --layout-content-width: 1fr;
+    --layout-gap: var(--su-4);
+  }
+}
+
 // Temporary solution for sidebar on mobile
 .crayons-layout__sidebar-left,
 .crayons-layout__sidebar-right {
diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb
index 7e55dae30..1ddecba2c 100644
--- a/app/views/layouts/admin.html.erb
+++ b/app/views/layouts/admin.html.erb
@@ -59,7 +59,7 @@
     </div>
   </header>
 
-  <div class="crayons-layout crayons-layout--2-cols">
+  <div class="crayons-layout crayons-layout--admin-2-cols">
     <div class="admin__left-sidebar crayons-layout__left-sidebar" data-controller="sidebar" data-action="load@window->sidebar#disableCurrentNavItem">
       <%= render "admin/shared/nested_sidebar", menu_items: AdminMenu.navigation_items %>
     </div>