Adjust Brand Accent & Dropdown

src/app/app.scss

@@ -1,3 +1,7 @@
+:host {
+  min-height: 100dvh;
+}
+
 main:focus-visible {
   outline: none;
 }

src/app/components/dropdown/dropdown.scss

@@ -121,7 +121,7 @@ $default_animation_duration: 0.2s;
   background-color: light-dark(oklch(1 0 0), oklch(0 0 0));
   border-radius: $border_radius;
   z-index: 1000;
-  max-height: 240px;
+  max-height: 200px;
   overflow-y: hidden;
   box-shadow: 0 4px 12px oklch(0 0 0 / 10%); // rgba(0, 0, 0, 0.1)
   animation: slideIn var(--animation-duration) $animation_timing;

src/app/components/level-card/level-card.scss

@@ -8,7 +8,8 @@ $default_animation_duration: 0.2s;
 }
 
 :host {
-  width: 400px;
+  width: 100%;
+  max-width: 400px;
   height: 160px;
 
   display: flex;

src/app/pages/main/main.html

@@ -1,6 +1,6 @@
-<div class="container">
 <brand-accent></brand-accent>
 
+<div class="container">
   <h1>Component Test</h1>
 
   <section id="switch-test" class="feature-block">

src/app/pages/main/main.scss

@@ -1,6 +1,16 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  width: 100%;
+}
+
 :host > .container {
   display: flex;
-  width: 600px;
+  width: 100%;
+  max-width: 600px;
+  box-sizing: border-box;
 
   flex-direction: column;
   gap: 40px;
@@ -8,7 +18,8 @@
 
 section#dropdown-test {
   dropdown {
-    width: 324px;
+    width: 100%;
+    max-width: 324px;
   }
 }
 
@@ -35,11 +46,12 @@ div.test-container {
 brand-accent {
   position: absolute;
 
-  width: 100%;
-  height: 100%;
-
-  top: 0;
+  top: -64px;
   left: 0;
 
+  width: 100%;
+  min-width: 100dvw;
+  height: calc(100% + 64px);
+  min-height: 100dvh;
   z-index: -999999;
 }

src/styles.scss

@@ -39,6 +39,8 @@ body {
   margin: 0;
   overscroll-behavior-x: none;
   background-color: white;
+
+  min-height: 100dvh;
 }
 
 .icon-24 {