refactor: Mobile layout api reference

Fix mobile layout shift in API reference

fix angular#67650

Author: aparzi

adev/src/app/features/references/api-reference-list/api-reference-list.component.scss

@@ -28,10 +28,11 @@
     -webkit-tap-highlight-color: transparent;
 
     .adev-reference-list-type-filter-label {
-      margin-block: 2.5rem 1rem;
+      margin-block: 1rem;
     }
 
     .adev-reference-list-type-filter {
+      box-sizing: border-box;
       display: grid;
       grid-template-columns: repeat(6, 1fr);
       margin-block: 0;
@@ -45,6 +46,7 @@
       }
       @container api-ref-page (max-width: 600px) {
         grid-template-columns: repeat(4, 1fr);
+        max-width: 500px;
       }
       @container api-ref-page (max-width: 500px) {
         grid-template-columns: repeat(3, 1fr);
@@ -88,16 +90,70 @@
 
     .adev-reference-list-query-filter {
       display: flex;
-      gap: 1.5rem;
+      gap: 1rem;
       flex-wrap: wrap;
+      align-items: center;
       justify-content: space-between;
+
+      * {
+        box-sizing: border-box;
+      }
+
+      docs-text-field,
+      docs-select {
+        width: 100%;
+        max-width: 350px;
+      }
+
+      @container api-ref-page (max-width: 600px) {
+        flex-direction: column;
+        align-items: stretch;
+
+        docs-text-field,
+        docs-select {
+          width: 100%;
+          max-width: 500px;
+        }
+      }
+    }
+
+    .adev-reference-list-status {
+      display: flex;
       align-items: center;
+      margin-top: 1rem;
+
+      ::ng-deep .mat-mdc-chip-listbox {
+        @container api-ref-page (max-width: 600px) {
+          width: 100%;
+          max-width: 500px;
+
+          .mdc-evolution-chip-set__chips {
+            display: grid !important;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 8px;
+            margin-left: 0;
+          }
+
+          .mat-mdc-chip-option {
+            min-width: 0;
+            width: 100%;
+            margin: 0;
+          }
+        }
+
+        @container api-ref-page (max-width: 350px) {
+          .mdc-evolution-chip-set__chips {
+            grid-template-columns: 1fr;
+          }
+        }
+      }
     }
   }
 
   .adev-reference-list-empty {
     text-align: center;
     margin-block-start: 2rem;
+    flex-basis: 100%;
 
     p {
       font-size: 1rem;
@@ -108,28 +164,3 @@
     width: 100%;
   }
 }
-
-.adev-reference-list-empty {
-  flex-basis: 100%;
-  p {
-    font-size: 1rem;
-  }
-}
-
-.docs-api-item-label-full {
-  white-space: nowrap;
-}
-
-.map-chip-option {
-  min-width: 190px;
-}
-
-.adev-reference-list-status {
-  display: flex;
-  align-items: center;
-  margin-top: 12px;
-
-  label {
-    margin-right: 8px;
-  }
-}