From bd3cfab5fdc16b5811f0d134d4e68f826a675c53 Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <ccorvo@hashicorp.com>
Date: Wed, 8 Mar 2023 11:39:47 -0800
Subject: [PATCH] Add media query to layour-sidebar, add grid gap and areas

---
 ui/admin/app/styles/app.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 9bbe06c90..f57df4d86 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -690,6 +690,9 @@
 .layout-sidebar {
   display: grid;
   grid-template-areas: 'body body sidebar';
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: auto 1fr;
+  gap: 1em;
 
   .layout-sidebar-body {
     grid-area: body;
@@ -699,3 +702,12 @@
     grid-area: sidebar;
   }
 }
+
+@media (max-width: media.width(large)) {
+  .layout-sidebar {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'body'
+      'sidebar';
+  }
+}