refactor: Mobile layout api reference

aparzi · aparzi · commit 079f9c307a2f · 2026-03-16T18:57:17.000+01:00
Fix mobile layout shift in API reference fix #67650
diff --git a/adev/shared-docs/styles/_media-queries.scss b/adev/shared-docs/styles/_media-queries.scss
@@ -88,3 +88,31 @@ $screen-xxl: 1800px;
     @content;
   }
 }
+
+@mixin filter-api-smartphone-tablet-layout {
+  @container api-ref-page (max-width: 580px) {
+    .adev-reference-list-status ::ng-deep .mat-mdc-chip-listbox {
+      width: 100%;
+
+      .mdc-evolution-chip-set__chips {
+        display: grid !important;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 8px;
+      }
+
+      .mat-mdc-chip-option {
+        min-width: 0;
+        width: 100%;
+        margin: 0;
+      }
+    }
+  }
+
+  @container api-ref-page (max-width: 350px) {
+    .adev-reference-list-status ::ng-deep .mat-mdc-chip-listbox {
+      .mdc-evolution-chip-set__chips {
+        grid-template-columns: 1fr;
+      }
+    }
+  }
+}
diff --git a/adev/src/app/features/references/api-reference-list/api-reference-list.component.scss b/adev/src/app/features/references/api-reference-list/api-reference-list.component.scss
@@ -1,3 +1,5 @@
+@use '@angular/docs/styles/media-queries' as mq;
+
 :host {
   padding: var(--layout-padding);
   display: block;
@@ -128,8 +130,6 @@
   display: flex;
   align-items: center;
   margin-top: 12px;
-
-  label {
-    margin-right: 8px;
-  }
 }
+
+@include mq.filter-api-smartphone-tablet-layout;
