From 4ba2da3670e2d871ffe41767ca2d2a03dc01399f Mon Sep 17 00:00:00 2001
From: Igor Zinken <730069+igorski@users.noreply.github.com>
Date: Tue, 18 Feb 2025 20:39:01 +0100
Subject: [PATCH] Fixed broken modal and panel stylings after SASS migration

---
 src/components/layer-filters/layer-filters.vue |  3 +--
 src/components/layer-panel/layer-panel.vue     |  2 +-
 src/components/modal/modal.vue                 | 13 +++++++------
 src/styles/panel.scss                          | 12 ++++++------
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/layer-filters/layer-filters.vue b/src/components/layer-filters/layer-filters.vue
index 299636f..fdf97d6 100644
--- a/src/components/layer-filters/layer-filters.vue
+++ b/src/components/layer-filters/layer-filters.vue
@@ -335,8 +335,7 @@ export default {
         display: flex;
         flex-direction: column;
 
-        .component__content {
-            padding: variables.$spacing-small 0;
+        :deep(.component__content) {
             @include mixins.boxSize();
             @include mixins.truncate();
             border-bottom: 1px solid colors.$color-lines;
diff --git a/src/components/layer-panel/layer-panel.vue b/src/components/layer-panel/layer-panel.vue
index fbffe70..5ade941 100644
--- a/src/components/layer-panel/layer-panel.vue
+++ b/src/components/layer-panel/layer-panel.vue
@@ -409,7 +409,7 @@ export default {
             outline: none;
         }
 
-        .component__content.form {
+        :deep(.component__content) {
             padding: 0;
         }
 
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 8642564..3987f2b 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -81,36 +81,37 @@ export default {
         background-image: colors.$color-window-bg;
         $headerHeight: 48px;
 
-        .component__header {
+        :deep(.component__header) {
             height: $headerHeight;
             padding: #{variables.$spacing-xsmall + variables.$spacing-small} variables.$spacing-medium 0 #{variables.$spacing-medium + variables.$spacing-small};
             border: none;
         }
 
-        .component__title {
+        :deep(.component__title) {
             @include typography.customFont();
             color: #FFF;
+            padding-left: 0;
         }
 
-        .component__header-button {
+        :deep(.component__header-button) {
             @include ui.closeButton();
             top: #{variables.$spacing-xsmall + variables.$spacing-small};
             right: #{variables.$spacing-medium + variables.$spacing-small};
         }
 
-        .component__content {
+        :deep(.component__content) {
             position: relative;
             height: calc(100% - #{$headerHeight});
             padding: variables.$spacing-medium #{variables.$spacing-medium + variables.$spacing-small};
         }
 
-        .component__content-wrapper {
+        :deep(.component__content-wrapper) {
             overflow-x: hidden;
             overflow-y: auto;
             height: inherit;
         }
 
-        .component__actions {
+        :deep(.component__actions) {
             @include ui.actionsFooter();
         }
     }
diff --git a/src/styles/panel.scss b/src/styles/panel.scss
index b95509e..03886b4 100644
--- a/src/styles/panel.scss
+++ b/src/styles/panel.scss
@@ -13,14 +13,14 @@ $collapsed-panel-height: 40px; // mobile view
         height: 100%;
         overflow: hidden;
 
-        .component__content {
+        :deep(.component__content) {
             padding: variables.$spacing-small variables.$spacing-medium variables.$spacing-medium;
             overflow-x: hidden;
             overflow-y: auto;
         }
 
         @include mixins.mobile() {
-            .component__content {
+            :deep(.component__content) {
                 max-height: calc(100% - #{variables.$heading-height});
                 overflow-x: hidden;
                 overflow-y: auto;
@@ -29,7 +29,7 @@ $collapsed-panel-height: 40px; // mobile view
         }
 
         // overrides component mixin
-        .component__header-button {
+        :deep(.component__header-button) {
             top: variables.$spacing-small - variables.$spacing-xxsmall;
             right: variables.$spacing-small;
             width: 36px;
@@ -41,7 +41,7 @@ $collapsed-panel-height: 40px; // mobile view
             }
         }
 
-        .component__actions {
+        :deep(.component__actions) {
             margin: variables.$spacing-small 0;
             padding: 0 variables.$spacing-medium;
             box-sizing: border-box;
@@ -57,11 +57,11 @@ $collapsed-panel-height: 40px; // mobile view
             @include mixins.large() {
                 width: $collapsed-panel-width;
 
-                .component__title {
+                :deep(.component__title) {
                     display: none;
                 }
             }
-            .component__header-button {
+            :deep(.component__header-button) {
                 right: variables.$spacing-xxsmall;
             }
         }