💄 - style: fix styling issues with Dropdown component

maykinmedia · Oct 18, 2024 · 5bed42e · 5bed42e
1 parent c21d6c9
commit 5bed42e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 25 deletions.
diff --git 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
@@ -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;