From 41eeb8650c77bd05086bbf2a9e56bfd405ad8ca3 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sun, 31 Aug 2025 13:53:05 +0200
Subject: [PATCH] Fix SCSS syntax error in BentoGrid component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fixed :deep() selector usage with parent selectors
- Separated each modifier class into its own :deep() selector
- Resolves build error with Sass compilation

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/dashboard/BentoGrid.vue | 130 ++++++++++++++---------------
 1 file changed, 65 insertions(+), 65 deletions(-)

diff --git a/components/dashboard/BentoGrid.vue b/components/dashboard/BentoGrid.vue
index f0b0ceb..1e163dd 100644
--- a/components/dashboard/BentoGrid.vue
+++ b/components/dashboard/BentoGrid.vue
@@ -87,78 +87,78 @@ const gridClass = computed(() => {
 // Global Bento Item Classes
 :deep(.bento-item) {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  
-  // Size variants
-  &--small {
+}
+
+// Size variants
+:deep(.bento-item--small) {
+  grid-column: span 3;
+}
+
+:deep(.bento-item--medium) {
+  grid-column: span 4;
+}
+
+:deep(.bento-item--large) {
+  grid-column: span 6;
+}
+
+:deep(.bento-item--xlarge) {
+  grid-column: span 8;
+}
+
+:deep(.bento-item--full) {
+  grid-column: span 12;
+}
+
+// Height variants
+:deep(.bento-item--tall) {
+  grid-row: span 2;
+}
+
+:deep(.bento-item--xtall) {
+  grid-row: span 3;
+}
+
+// Responsive overrides
+@media (max-width: 640px) {
+  :deep(.bento-item--small),
+  :deep(.bento-item--medium),
+  :deep(.bento-item--large),
+  :deep(.bento-item--xlarge) {
+    grid-column: span 12;
+  }
+}
+
+@media (min-width: 641px) and (max-width: 768px) {
+  :deep(.bento-item--small) {
     grid-column: span 3;
   }
   
-  &--medium {
-    grid-column: span 4;
-  }
-  
-  &--large {
+  :deep(.bento-item--medium),
+  :deep(.bento-item--large) {
     grid-column: span 6;
   }
   
-  &--xlarge {
+  :deep(.bento-item--xlarge) {
+    grid-column: span 6;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  :deep(.bento-item--small) {
+    grid-column: span 3;
+  }
+  
+  :deep(.bento-item--medium) {
+    grid-column: span 4;
+  }
+  
+  :deep(.bento-item--large) {
+    grid-column: span 6;
+  }
+  
+  :deep(.bento-item--xlarge) {
     grid-column: span 8;
   }
-  
-  &--full {
-    grid-column: span 12;
-  }
-  
-  // Height variants
-  &--tall {
-    grid-row: span 2;
-  }
-  
-  &--xtall {
-    grid-row: span 3;
-  }
-  
-  // Responsive overrides
-  @media (max-width: 640px) {
-    &--small,
-    &--medium,
-    &--large,
-    &--xlarge {
-      grid-column: span 12;
-    }
-  }
-  
-  @media (min-width: 641px) and (max-width: 768px) {
-    &--small {
-      grid-column: span 3;
-    }
-    
-    &--medium,
-    &--large {
-      grid-column: span 6;
-    }
-    
-    &--xlarge {
-      grid-column: span 6;
-    }
-  }
-  
-  @media (min-width: 769px) and (max-width: 1024px) {
-    &--small {
-      grid-column: span 3;
-    }
-    
-    &--medium {
-      grid-column: span 4;
-    }
-    
-    &--large {
-      grid-column: span 6;
-    }
-    
-    &--xlarge {
-      grid-column: span 8;
-    }
-  }
 }
 </style>
\ No newline at end of file