Improve UI Structure Consistency

src/app/pages/known-issues/known-issues.scss

@@ -1,3 +1,11 @@
+:host > .container {
+  display: flex;
+  width: 600px;
+
+  flex-direction: column;
+  gap: 40px;
+}
+
 section {
   p {
     line-height: 1.4;
@@ -12,6 +20,8 @@ section {
     font-weight: bold;
     text-transform: uppercase;
 
+    width: fit-content;
+
     &.reported {
       background-color: oklch(0.786 0.1379 18.69);
     }

src/app/pages/main/main.html

@@ -5,17 +5,15 @@
 
   <section id="switch-test" class="feature-block">
     <h2>Switch Component</h2>
-    <div style="display: flex; flex-direction: column; gap: 40px; align-items: flex-start;">
-      <div class="test-container">
-        <switch [(isActive)]="isToggled" (toggle)="handleToggle($event)"></switch>
-        <p>Switch is: {{ isToggled() ? 'ON' : 'OFF' }}</p>
-      </div>
+    <div class="test-container">
+      <switch [(isActive)]="isToggled" (toggle)="handleToggle($event)"></switch>
+      <p>Switch is: {{ isToggled() ? 'ON' : 'OFF' }}</p>
     </div>
   </section>
 
   <section id="dropdown-test" class="feature-block">
     <h2>Dropdown Component</h2>
-    <div style="display: flex; flex-direction: column; gap: 40px; align-items: flex-start;">
+    <div class="test-group">
       <div class="test-container">
         <h3>Object Options</h3>
         <dropdown

src/app/pages/main/main.scss

@@ -1,11 +1,35 @@
+:host > .container {
+  display: flex;
+  width: 600px;
+
+  flex-direction: column;
+  gap: 40px;
+}
+
 section#dropdown-test {
   dropdown {
     width: 324px;
   }
 }
 
+div.test-group {
+  display: flex;
+  flex-direction: column;
+  gap: 36px;
+
+  padding-top: 24px;
+}
+
 div.test-container {
   max-width: 100%;
+
+  h3 {
+    margin-bottom: 6px;
+  }
+
+  p {
+    margin-top: 6px;
+  }
 }
 
 brand-accent {