handle single horizontal list section items

canonical · Dec 17, 2024 · 93575e1 · 93575e1
1 parent 297a7e0
commit 93575e1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/scss/_patterns_lists.scss b/scss/_patterns_lists.scss
@@ -226,14 +226,18 @@ $list-step-bullet-margin: $sph--x-large;
       @include vf-list-item-icon-divisor-offset;
       @include vf-list-item-horizontal-section;
 
-      grid-column-end: span $grid-8-columns-small;
+      // Only apply custom grid colspans if there is more than one list item.
+      // If there's only one list item, it will span the full row width.
+      &:not(:only-child) {
+        grid-column-end: span $grid-8-columns-small;
 
-      @media (min-width: $threshold-4-6-col) {
-        grid-column-end: span $grid-8-columns-medium / 2;
-      }
+        @media (min-width: $threshold-4-6-col) {
+          grid-column-end: span $grid-8-columns-medium / 2;
+        }
 
-      @media (min-width: $threshold-6-12-col) {
-        grid-column-end: span $grid-8-columns / 4;
+        @media (min-width: $threshold-6-12-col) {
+          grid-column-end: span $grid-8-columns / 4;
+        }
       }
     }
   }

diff --git a/templates/docs/patterns/lists/index.md b/templates/docs/patterns/lists/index.md
@@ -169,13 +169,19 @@ To display a list of items that flow horizontally in a grid, use `.p-list--horiz
 
 By default, the horizontal splits items 25/25/25/25 on large, 50/50 on medium and 100% on small screens.
 
+For optimal behaviour, you should make sure you have enough list items to fit at least row on large screen size (4 items).
+
 <div class="embedded-example"><a href="/docs/examples/patterns/lists/lists-horizontal-section-responsive-ticked/" class="js-example">
 View example of the default horizontal list pattern
 </a></div>
 
+### 25/75 Horizontal section
+
 You can also add the `.is-25-75` modifier to reserve 25% space at the start of the list and place the remaining items in the remaining 75% space.
 This is especially effective when a section heading precedes the list.
 
+For optimal behaviour, you should make sure you have enough list items to fit at least row on large screen size (3 items).
+
 <div class="embedded-example"><a href="/docs/examples/patterns/lists/lists-horizontal-section-25-75-responsive-ticked/" class="js-example">
 View example of the horizontal list pattern in a 25/75 split
 </a></div>