Fix reflow problem

Author: Mateus Medeiros

src/webapp/src/app/home/home.component.html

@@ -19,20 +19,20 @@ <h1 class="hero-headline text-display">
 
         <!-- Value chips -->
         <div class="value-chips">
-          <mat-chip-listbox aria-label="Key features">
-            <mat-chip-option disabled>
-              <mat-icon>newspaper</mat-icon>
-              Daily news
-            </mat-chip-option>
-            <mat-chip-option disabled>
-              <mat-icon>flash_on</mat-icon>
-              Instant feedback
-            </mat-chip-option>
-            <mat-chip-option disabled>
-              <mat-icon>trending_up</mat-icon>
-              Beginner → Advanced
-            </mat-chip-option>
-          </mat-chip-listbox>
+          <ul class="value-chip-list" aria-label="Key features">
+            <li class="value-chip" aria-disabled="true">
+              <mat-icon aria-hidden="true">newspaper</mat-icon>
+              <span>Daily news</span>
+            </li>
+            <li class="value-chip" aria-disabled="true">
+              <mat-icon aria-hidden="true">flash_on</mat-icon>
+              <span>Instant feedback</span>
+            </li>
+            <li class="value-chip" aria-disabled="true">
+              <mat-icon aria-hidden="true">trending_up</mat-icon>
+              <span>Beginner → Advanced</span>
+            </li>
+          </ul>
         </div>
 
         <!-- Mini stats row -->

src/webapp/src/app/home/home.component.scss

@@ -93,34 +93,42 @@
 // Value chips
 .value-chips {
   margin-top: 0.5rem;
+}
 
-  mat-chip-listbox {
-    display: flex;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-    pointer-events: none;
+.value-chip-list {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+@media (max-width: 600px) {
+  .value-chip-list {
+    justify-content: center;
   }
+}
 
-  mat-chip-option {
-    pointer-events: none;
-    background-color: rgba(58, 125, 255, 0.1) !important;
-    color: vars.$color-primary !important;
-    border: 1px solid rgba(58, 125, 255, 0.2);
-    font-weight: 500;
-    padding: 0.5rem 1rem;
-    display: inline-flex !important;
-    align-items: center !important;
-    gap: 0.35rem;
-    line-height: 1.125rem;
+.value-chip {
+  background-color: rgba(58, 125, 255, 0.1);
+  color: vars.$color-primary;
+  border: 1px solid rgba(58, 125, 255, 0.2);
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  line-height: 1.125rem;
+  border-radius: 999px;
 
-    mat-icon {
-      font-size: 1.125rem;
-      width: 1.125rem;
-      height: 1.125rem;
-      line-height: 1.125rem;
-      vertical-align: middle;
-      margin-top: -0.125rem;
-    }
+  mat-icon {
+    font-size: 1.125rem;
+    width: 1.125rem;
+    height: 1.125rem;
+    line-height: 1.125rem;
+    vertical-align: middle;
+    margin-top: -0.125rem;
   }
 }
 

src/webapp/src/app/home/home.component.ts

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatChipsModule } from '@angular/material/chips';
 import { MatCardModule } from '@angular/material/card';
 import { ExerciseGridComponent } from '../shared/exercise-grid/exercise-grid.component';
 import { BrowserService } from '../core/services/browser.service';
@@ -17,7 +16,6 @@ import { SeoService } from '../core/services/seo.service';
     RouterLink,
     MatButtonModule,
     MatIconModule,
-    MatChipsModule,
     MatCardModule,
     ExerciseGridComponent,
   ],