From bb35df43b98f3cc660573e46f599c35c5174b8e5 Mon Sep 17 00:00:00 2001
From: hawkgs <hawk.dvp@gmail.com>
Date: Thu, 14 Nov 2024 13:22:51 +0200
Subject: [PATCH] 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   |  1 +
 .../api-items-section.component.html           |  2 +-
 .../api-items-section.component.scss           | 18 ++++++++++++------
 .../api-reference-list.component.scss          |  8 ++++++--
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/adev/shared-docs/styles/_api-item-label.scss b/adev/shared-docs/styles/_api-item-label.scss
index 9373a8c4025..23ce9df532e 100644
--- a/adev/shared-docs/styles/_api-item-label.scss
+++ b/adev/shared-docs/styles/_api-item-label.scss
@@ -17,6 +17,7 @@
     &:not(.full) {
       height: 22px;
       width: 22px;
+      flex: 0 0 22px;
     }
 
     &.full {
diff --git a/adev/src/app/features/references/api-items-section/api-items-section.component.html b/adev/src/app/features/references/api-items-section/api-items-section.component.html
index 3b0ec811cfb..45c2a24f5b8 100644
--- a/adev/src/app/features/references/api-items-section/api-items-section.component.html
+++ b/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>
diff --git a/adev/src/app/features/references/api-items-section/api-items-section.component.scss b/adev/src/app/features/references/api-items-section/api-items-section.component.scss
index dec2b9080fc..6790c0c65f4 100644
--- a/adev/src/app/features/references/api-items-section/api-items-section.component.scss
+++ b/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 {
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
index f66c591508d..374b16b8972 100644
--- 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
@@ -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%;
   }
 }