From 5bed42eea094104c5cd0e5860eca779bbf7cc396 Mon Sep 17 00:00:00 2001
From: Sven van de Scheur <svenvandescheur@gmail.com>
Date: Fri, 18 Oct 2024 12:20:51 +0200
Subject: [PATCH] :lipstick: - style: fix styling issues with Dropdown
 component

---
 src/components/dropdown/dropdown.scss | 52 ++++++++++++++-------------
 src/components/layout/page/page.scss  |  2 ++
 2 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/components/dropdown/dropdown.scss b/src/components/dropdown/dropdown.scss
index 657376f2..44ead503 100644
--- a/src/components/dropdown/dropdown.scss
+++ b/src/components/dropdown/dropdown.scss
@@ -9,37 +9,39 @@
     outline: 1px solid var(--page-color-primary);
   }
 
-  .mykn-a,
-  .mykn-button,
-  .mykn-dropdown {
-    width: 100%;
-  }
+  @at-root {
+    &__dropdown {
+      width: fit-content;
+      border: 1px solid var(--page-color-primary);
+      border-radius: var(--border-radius-l);
+      box-sizing: border-box;
+      padding: 2px;
+      z-index: 1000;
 
-  &__dropdown {
-    width: fit-content;
-    border: 1px solid var(--page-color-primary);
-    border-radius: var(--border-radius-l);
-    box-sizing: border-box;
-    padding: 2px;
-    z-index: 1000;
-  }
+      .mykn-a,
+      .mykn-button,
+      .mykn-dropdown {
+        width: 100%;
+      }
+    }
 
-  @media screen and (max-width: constants.$breakpoint-desktop - 1px) {
-    &__dropdown {
-      width: 100%; // Fallback.
-      width: min(100%, max(calc(100vw - 2 * var(--spacing-h)), 100cqw));
+    @media screen and (max-width: constants.$breakpoint-desktop - 1px) {
+      &__dropdown {
+        width: 100%; // Fallback.
+        width: min(100%, max(calc(100vw - 2 * var(--spacing-h)), 100cqw));
+      }
     }
-  }
 
-  @media screen and (min-width: constants.$breakpoint-desktop) {
-    &__dropdown .mykn-toolbar--direction-horizontal {
-      width: min-content;
+    @media screen and (min-width: constants.$breakpoint-desktop) {
+      &__dropdown .mykn-toolbar--direction-horizontal {
+        width: min-content;
+      }
     }
-  }
 
-  @media screen and (min-width: constants.$breakpoint-desktop) {
-    &__dropdown .mykn-toolbar--direction-vertical {
-      width: max-content;
+    @media screen and (min-width: constants.$breakpoint-desktop) {
+      &__dropdown .mykn-toolbar--direction-vertical {
+        width: max-content;
+      }
     }
   }
 }
diff --git a/src/components/layout/page/page.scss b/src/components/layout/page/page.scss
index a37ce6a3..df21baef 100644
--- a/src/components/layout/page/page.scss
+++ b/src/components/layout/page/page.scss
@@ -1,6 +1,8 @@
 @use "../../../settings/constants";
 
 .mykn-page {
+  align-items: start;
+  justify-content: start;
   background-color: var(--page-color-background);
   container-name: page;
   display: flex;