docs(docs-infra): change API reference list items order to top-down (#58655)

Change the order from left-right to top-down (columns) and additionally make columns equal width.

PR Close #58655

adev/shared-docs/styles/_api-item-label.scss

@@ -17,6 +17,7 @@
     &:not(.full) {
       height: 22px;
       width: 22px;
+      flex: 0 0 22px;
     }
 
     &.full {

adev/src/app/features/references/api-items-section/api-items-section.component.html

@@ -26,7 +26,7 @@
           class="docs-api-item-label"
           aria-hidden="true"
         />
-        <span class="adev-item-title">{{ apiItem.title }}</span>
+        <span class="adev-item-title" [attr.title]="apiItem.title">{{ apiItem.title }}</span>
       </a>
       @if (apiItem.isDeprecated) {
         <span class="docs-deprecated"> &lt;!&gt; </span>

adev/src/app/features/references/api-items-section/api-items-section.component.scss

@@ -28,33 +28,39 @@
 }
 
 .adev-api-items-section-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  column-count: 3;
+  column-gap: 0.5rem;
   padding: 0;
 
   @container api-ref-page (max-width: 798px) {
-    grid-template-columns: 1fr 1fr;
+    column-count: 2;
   }
   @container api-ref-page (max-width: 600px) {
-    grid-template-columns: 1fr;
+    column-count: 1;
   }
 
   li {
-    display: flex;
+    display: inline-flex;
     align-items: center;
     border-inline-start: 1px solid var(--senary-contrast);
     padding: 0.3rem;
     padding-inline-start: 0.75rem;
     font-size: 0.875rem;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
+    width: 100%;
 
     a {
       color: var(--quaternary-contrast);
       display: flex;
       align-items: center;
+      overflow: hidden;
+      padding-block: 2px;
     }
 
     .adev-item-title {
-      margin-block-start: 3px;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     &:hover {

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

@@ -79,6 +79,10 @@
           border: 1px solid var(--quinary-contrast);
           color: var(--primary-contrast);
         }
+
+        .docs-api-item-label-full {
+          white-space: nowrap;
+        }
       }
     }
 
@@ -100,7 +104,7 @@
     }
   }
 
-  .docs-api-item-label-full {
-    white-space: nowrap;
+  adev-api-items-section {
+    width: 100%;
   }
 }