From 80f35de9044fc514c2d2f62382b362c1975257fa Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alaind831+github@gmail.com>
Date: Mon, 1 May 2023 06:54:11 -0700
Subject: [PATCH] restore some CSS specificity

so we don't break existing side panel grid item...
---
 demo/demo.css      | 10 ++++++----
 doc/CHANGES.md     |  1 +
 src/gridstack.scss | 22 +++++++++++++---------
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/demo/demo.css b/demo/demo.css
index 66f47a3e1..2bfcff2b0 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -44,18 +44,20 @@ h1 {
   background: rgba(0, 255, 0, 0.1);
   padding: 25px 0;
   height: 100px;
+  text-align: center;
 }
 .sidebar .grid-stack-item {
-  display: inline-block;
-  position: relative;
   width: 120px;
   height: 50px;
+  border: 2px dashed green;
   text-align: center;
   line-height: 35px;
+  background: rgba(0, 255, 0, 0.1);
+  cursor: default;
+  display: inline-block;
 }
 .sidebar .grid-stack-item .grid-stack-item-content {
-  width: 100%;
-  height: 100%;
+  background: none;
 }
 
 /* make nested grid have slightly darker bg take almost all space (need some to tell them apart) so items inside can have similar to external size+margin */
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 1c3886696..286bb54f1 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -5,6 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
+- [8.0.2 TBD](#802-tbd)
 - [8.0.1 (2023-04-29)](#801-2023-04-29)
 - [8.0.0 (2023-04-29)](#800-2023-04-29)
 - [7.3.0 (2023-04-01)](#730-2023-04-01)
diff --git a/src/gridstack.scss b/src/gridstack.scss
index 5cd1f1e06..3daa03e1d 100644
--- a/src/gridstack.scss
+++ b/src/gridstack.scss
@@ -37,18 +37,21 @@ $animation_speed: .3s !default;
   z-index: 0 !important;
 }
 
-.grid-stack-item-content {
-  margin: 0;
+// make those more unique as to not conflict with side panel items
+.grid-stack > .grid-stack-item {
   position: absolute;
-  width: auto;
-  overflow-x: hidden;
-  overflow-y: auto;
+  padding: 0;
+
+  > .grid-stack-item-content {
+    margin: 0;
+    position: absolute;
+    width: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
 }
 
 .grid-stack-item {
-  position: absolute;
-  padding: 0;
-
   > .ui-resizable-handle {
     position: absolute;
     font-size: 0.1px;
@@ -129,7 +132,8 @@ $animation_speed: .3s !default;
   @include vendor(transition, left 0s, top 0s, height 0s, width 0s);
 }
 
-.grid-stack-item[gs-x="0"] {
+// make those more unique as to not conflict with side panel items
+.grid-stack > .grid-stack-item[gs-x="0"] {
   left: 0%;
 }