List view formatting issue with grouped column - no longer wraps properly

[corriespondent]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

Declarative list formatting

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

No response

Describe the bug / error

We have been using a grouped view with list formatting applied to create an FAQ view with expandable/collapsible headers. Since the new Microsoft List updates in SharePoint lists, the list views are no longer responsive when the list web part is added to a page. A horizontal scrollbar gets added.

Updated to add - this is better than what it was before, where the header was showing like this:

The suggested fix at pnp/List-Formatting#839 was to add a min-width: max-content; I forgot I still had that in my demo code before, so I've updated to remove it. I can see that the cf-group-header element now has this min-width style applied, but it means that the content isn't responsive.

Steps to reproduce

1. Create a SharePoint list with the following columns: Title (single line of text), Answer (multiple lines of plain text), Category (Choice with options e.g. HR, IT, Marketing), Link (hyperlink)
2. Create a list view which shows only Answer and Link columns, is sorted by Title, and is grouped by Title
3. Format the view with code below.
4. Add the list web part to a page and configure to point to the FAQ list and the formatted view.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "txtContent": "@group.fieldData",
      "attributes": {
        "class": "sp-row-title ms-fontSize-xl"
      }
    }
  },
  "additionalRowClass": "ms-font-l ms-fontColor-neutralPrimary ms-bgColor-white--hover",
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "block",
      "margin-left": "36px",
      "padding": "10px"
    },
    "children": [
      {
        "elmType": "p",
        "attributes": {
          "class": "ms-fontColor-neutralPrimary"
        },
        "txtContent": "[$Answer]"
      },
      {
        "elmType": "p",
        "attributes": {
          "class": "ms-fontColor-neutralPrimary"
        },
        "style": {
          "margin-bottom": "1em"
        },
        "children": [
          {
            "elmType": "a",
            "attributes": {
              "href": "[$Link]",
              "class": "ms-fontColor-themePrimary"
            },
            "txtContent": "[$Link]",
            "style": {
              "font-size": "16px"
            }
          }
        ]
      }
  
    ]
  }
}

Expected behavior

The list view on a page used to work perfectly for this application, with the view being responsive. I would expect the view to be responsive for grouped headers.

[corriespondent]

@thechriskent - hopefully I submitted this in the correct category - here's what I was talking about from the community call (June 26 2025)

[Amey-MSFT]

Hello @corriespondent,
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[Amey-MSFT]

Hello @corriespondent,
We were able to reproduce the issue, and we are investigating it. We have logged this as a bug, and our engineering team will look into it.
Thank you!