restore some CSS specificity

so we don't break existing side panel grid item...

Author: adumesny

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 */

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)

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%;
 }