From 09080646883d8afec878fc96c4c23dda09780f99 Mon Sep 17 00:00:00 2001
From: copecone <controld3785@gmail.com>
Date: Tue, 5 May 2026 16:19:31 +0900
Subject: [PATCH] Adjust Brand Accent & Dropdown

---
 src/app/app.scss                              |  4 ++++
 src/app/components/dropdown/dropdown.scss     |  2 +-
 src/app/components/level-card/level-card.scss |  3 ++-
 src/app/pages/main/main.html                  |  4 ++--
 src/app/pages/main/main.scss                  | 24 ++++++++++++++-----
 src/styles.scss                               |  2 ++
 6 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/app/app.scss b/src/app/app.scss
index 475477e..76b5e2f 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -1,3 +1,7 @@
+:host {
+  min-height: 100dvh;
+}
+
 main:focus-visible {
   outline: none;
 }
diff --git a/src/app/components/dropdown/dropdown.scss b/src/app/components/dropdown/dropdown.scss
index dc70705..07debf5 100644
--- a/src/app/components/dropdown/dropdown.scss
+++ b/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;
diff --git a/src/app/components/level-card/level-card.scss b/src/app/components/level-card/level-card.scss
index 5f12d22..b7b4d78 100644
--- a/src/app/components/level-card/level-card.scss
+++ b/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;
diff --git a/src/app/pages/main/main.html b/src/app/pages/main/main.html
index b5e221a..8bd4f9f 100644
--- a/src/app/pages/main/main.html
+++ b/src/app/pages/main/main.html
@@ -1,6 +1,6 @@
-<div class="container">
-  <brand-accent></brand-accent>
+<brand-accent></brand-accent>
 
+<div class="container">
   <h1>Component Test</h1>
 
   <section id="switch-test" class="feature-block">
diff --git a/src/app/pages/main/main.scss b/src/app/pages/main/main.scss
index da436b0..d352ff2 100644
--- a/src/app/pages/main/main.scss
+++ b/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;
 }
diff --git a/src/styles.scss b/src/styles.scss
index 0abf5cd..4732508 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -39,6 +39,8 @@ body {
   margin: 0;
   overscroll-behavior-x: none;
   background-color: white;
+
+  min-height: 100dvh;
 }
 
 .icon-24 {