diff --git a/src/app/app.html b/src/app/app.html
index 45423e3..5d3198e 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -3,7 +3,7 @@
 <div class="container">
   <h1>AEF Component Test</h1>
 
-  <section id="switch-test">
+  <section id="switch-test" class="test-container">
     <h2>Switch Component</h2>
     <switch [(isActive)]="isToggled" (toggle)="handleToggle($event)"></switch>
     <p>Switch is: {{ isToggled() ? 'ON' : 'OFF' }}</p>
@@ -12,7 +12,7 @@
   <section id="dropdown-test">
     <h2>Dropdown Component</h2>
     <div style="display: flex; flex-direction: column; gap: 40px; align-items: flex-start;">
-      <div>
+      <div class="test-container">
         <h3>Object Options</h3>
         <dropdown
           [options]="dropdownOptions"
@@ -24,7 +24,7 @@
         <p>Selected Value: {{ selectedDropdownValue() }}</p>
       </div>
 
-      <div>
+      <div class="test-container">
         <h3>String Options (Simple)</h3>
         <dropdown
           [options]="['Small', 'Medium', 'Large']"
diff --git a/src/app/app.scss b/src/app/app.scss
index 1d0e81e..7a30e9f 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -33,3 +33,7 @@ section#dropdown-test {
     width: 324px;
   }
 }
+
+.test-container {
+  max-width: 100%;
+}
diff --git a/src/app/components/dropdown/dropdown.scss b/src/app/components/dropdown/dropdown.scss
index 8b3f4e6..576e92b 100644
--- a/src/app/components/dropdown/dropdown.scss
+++ b/src/app/components/dropdown/dropdown.scss
@@ -26,6 +26,8 @@ $dropdown_animation_duration: 0.2s;
   outline: none;
   cursor: pointer;
 
+  max-width: 100%;
+
   &:focus-visible {
     box-shadow: 0 0 0 1px $dropdown_border_color inset, 0 0 0 2px white, 0 0 0 4px $dropdown_accent;
   }