From 9243692217240c6f0b91497861a61ae600eb5942 Mon Sep 17 00:00:00 2001
From: Ross Mountjoy <ross.mountjoy@gmail.com>
Date: Thu, 21 May 2020 15:19:23 -0400
Subject: [PATCH] - fixed issue where expanding cards were breaking grid

---
 dashmachine/static/css/global/dashmachine.css |  2 ++
 dashmachine/static/js/main/home.js            | 18 +++++++++++++++---
 dashmachine/templates/main/cards.html         |  2 +-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/dashmachine/static/css/global/dashmachine.css b/dashmachine/static/css/global/dashmachine.css
index a0f6a48..6d283c3 100644
--- a/dashmachine/static/css/global/dashmachine.css
+++ b/dashmachine/static/css/global/dashmachine.css
@@ -882,6 +882,7 @@ span.badge.new {
 /* MODULE SIDENAVS */
 #card-editor-sidenav, #settings-editor-sidenav {
     width: 25%;
+    z-index: 8000;
 }
 @media only screen and (min-width: 1901px) {
     #card-editor-sidenav, #settings-editor-sidenav {
@@ -906,6 +907,7 @@ span.badge.new {
 
 #config-editor-sidenav {
     width: 100vw;
+    z-index: 7999;
 }
 
 #card-editor-sidenav table, #settings-editor-sidenav table {
diff --git a/dashmachine/static/js/main/home.js b/dashmachine/static/js/main/home.js
index 192c61b..418f861 100644
--- a/dashmachine/static/js/main/home.js
+++ b/dashmachine/static/js/main/home.js
@@ -39,9 +39,14 @@ function init_home_cards(){
         $(".expandable-card").addClass('scrollbar');
     } else {
         $(".expandable-card").on('mouseenter', function(e) {
+            var tag_row = $(this).closest('.tag-apps-row');
+            tag_row.css("min-height", tag_row.height());
+
+            var column = $(this).closest('.col')
+            column.css('min-width', column.width());
+            column.css('min-height', column.height());
+
             var width = $(this).width();
-            var avail_space = $(window).height() - $(this).offset().top + $(this).height();
-            console.log(avail_space)
             $(this).css("position", "absolute");
             $(this).css("max-height", "unset");
             $(this).css("overflow", "auto");
@@ -50,12 +55,19 @@ function init_home_cards(){
             $(this).css("z-index", 888);
         });
         $(".expandable-card").on('mouseleave', function(e) {
+            var tag_row = $(this).closest('.tag-apps-row');
+            tag_row.css("min-height", "unset");
+
+            var column = $(this).closest('.col');
+            column.css('min-width', "unset");
+            column.css('min-height', "unset");
+
             var width = $(this).width()
             $(this).css("position", "relative");
             $(this).css("max-height", "146px");
             $(this).css("overflow", "hidden");
             $(this).css("height", "146px");
-            $(this).css("width", width);
+            $(this).css("width", "unset");
             $(this).css("z-index", 1);
         });
     }
diff --git a/dashmachine/templates/main/cards.html b/dashmachine/templates/main/cards.html
index f4bef57..7857aec 100644
--- a/dashmachine/templates/main/cards.html
+++ b/dashmachine/templates/main/cards.html
@@ -21,7 +21,7 @@
                         </div>
                     </div>
                 {% endif %}
-                <div class="row tag-apps-row" style="min-height: 161px">
+                <div class="row tag-apps-row">
                     {% for app in tag.apps %}
                         {% if app.type == "app" %}
                             {{ App(app) }}