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">
-      <div class="test-container">
+      <switch [(isActive)]="isToggled" (toggle)="handleToggle($event)"></switch>
-        <switch [(isActive)]="isToggled" (toggle)="handleToggle($event)"></switch>
+      <p>Switch is: {{ isToggled() ? 'ON' : 'OFF' }}</p>
-        <p>Switch is: {{ isToggled() ? 'ON' : 'OFF' }}</p>
-      </div>
     </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 {

src/styles.scss

@@ -29,21 +29,28 @@ strong {
   font-weight: 900;
 }
 
+h1, h2, h3 {
+  margin: 0;
+}
+
 h1 {
-  margin-bottom: 40px;
+  font-size: 48px;
   text-align: center;
 }
 
 h2 {
-  margin-top: 0;
+  font-size: 24px;
-  margin-bottom: 20px;
-  font-size: 1.2rem;
   color: oklch(0.5103 0 0); // #666
 }
 
+h3 {
+  font-size: 18px;
+}
+
 p {
-  margin-top: 15px;
+  margin-top: 0; margin-bottom: 0;
   font-weight: 500;
+  font-size: 16px;
 }
 
 .container {
@@ -65,7 +72,10 @@ p {
 }
 
 section.feature-block {
-  margin-bottom: 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
   padding: 20px;
   border: 2px solid oklch(0 0 0 / 20%); // rgba(0, 0, 0, 0.2)
   border-radius: 8px;