From 4569f53fd0049bf6f623fb52f27ccc166ecea92f Mon Sep 17 00:00:00 2001
From: Manuel Ruwe <manuel.ruwe@bluewin.ch>
Date: Wed, 11 Jan 2023 12:57:45 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=20Hide=20wrappers=20with=20no?=
 =?UTF-8?q?=20tiles=20inside?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx | 5 ++++-
 src/styles/global.scss                                | 5 +++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx b/src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx
index ab8d92319..21491e9c1 100644
--- a/src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx
+++ b/src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx
@@ -1,4 +1,5 @@
 import { WrapperType } from '../../../../types/wrapper';
+import { useEditModeStore } from '../../Views/useEditModeStore';
 import { useGridstack } from '../gridstack/use-gridstack';
 import { WrapperContent } from '../WrapperContent';
 
@@ -8,10 +9,12 @@ interface DashboardWrapperProps {
 
 export const DashboardWrapper = ({ wrapper }: DashboardWrapperProps) => {
   const { refs, apps, widgets } = useGridstack('wrapper', wrapper.id);
+  const isEditMode = useEditModeStore((x) => x.enabled);
+  const defaultClasses = 'grid-stack grid-stack-wrapper min-row';
 
   return (
     <div
-      className="grid-stack grid-stack-wrapper"
+      className={apps.length > 0 || isEditMode ? defaultClasses : `${defaultClasses} gridstack-empty-wrapper`}
       style={{ transitionDuration: '0s' }}
       data-wrapper={wrapper.id}
       ref={refs.wrapper}
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 0c1fe9d34..d99f2f6b6 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -87,3 +87,8 @@
 .grid-stack.grid-stack-animate {
   transition: none;
 }
+
+.gridstack-empty-wrapper {
+  height: 0px;
+  min-height: 0px !important;
+}
\ No newline at end of file