JSON formatting for view no longer working on SharePoint List. Please help!

Question

Hi everyone,
I modified this view from Github for an FAQ list. It was working great for months but now recent SharePoint List updates seem to have ruined it.

It looks like this now:

Both the question and answer boxes used to be the same length but now the question box is really short and wraps so many times. Please help me!! Is there something in my code I can change?

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "hideListHeader": true,
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "attributes": {
        "class": "sp-row-card"
      },
      "style": {
        "color": "black",
        "background-color": "#FAF9F9",
        "flex-grow": "1",
        "display": "flex",
        "flex-direction": "row",
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "border-radius": "6px",
        "align-items": "center",
        "flex-wrap": "nowrap",
        "overflow": "auto",
        "margin": "1px 4px 4px 1px"
      },
      "children": [
        {
          "elmType": "img",
          "style": {
            "max-width": "24px",
            "max-height": "24px",
            "margin-top": "2px",
            "border-radius": "2px"
          }
        },
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "span",
              "style": {
                "padding": "5px 5px 5px 5px",
                "font-weight": "500",
                "font-size": "15px"
              },
              "txtContent": "@group.fieldData.displayValue"
            }
          ]
        },
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "flex-direction": "column",
                "justify-content": "center"
              }
            }
          ]
        }
      ]
    }
  },
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "ms-bgColor-themeLighterAlt"
    },
    "style": {
      "justify-content": "start",
      "color": "ms-fontColor-Primary",
      "display": "flex",
      "padding": "1px 8px 5px 20px",
      "border-radius": "6px",
      "max-width": "905px",
      "margin": "1px 4px 4px 60px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "text-align": "left",
          "font-weight": "400",
          "font-size": "15px"
        },
        "children": [
          {
            "elmType": "span",
            "style": {
              "margin-top": "8px",
              "padding-left": "1px",
              "color": "black"
            },
            "attributes": {
              "class": "ms-fontSize-m",
              "iconName": "Lightbulb"
            }
          },
          {
            "elmType": "span",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "Answer",
            "style": {
              "font-weight": "500",
              "color": "black",
              "padding-left": "4px"
            }
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "[$Answer]",
            "style": {
              "flex-grow": "1",
              "display": "flex",
              "flex-direction": "column",
              "flex-wrap": "nowrap",
              "align-items": "center",
              "max-width": "900px",
              "min-width": "205px",
              "margin-top": "8px",
              "margin-bottom": "8px"
            }
          },
          {
            "elmType": "a",
            "attributes": {
              "class": "sp-row-button",
              "href": "[$LinkURL1]",
              "target": "_blank"
            },
            "style": {
              "display": "=if([$LinkURL1] != '', 'block', 'none')",
              "margin-top": "9px",
              "padding": "9px 3px 1px 6px",
              "color": "white",
              "background-color": "#932227",
              "border": "none",
              "text-align": "center",
              "text-decoration": "none",
              "border-radius": "5px",
              "font-weight": "bold",
              "line-height": "normal",
              "vertical-align": "bottom"
            },
            "txtContent": "= 'Go to ' + [$LinkTitle1]"
          },
          {
            "elmType": "a",
            "attributes": {
              "class": "sp-row-button",
              "href": "[$LinkURL2]",
              "target": "_blank"
            },
            "style": {
              "display": "=if([$LinkURL2] != '', 'block', 'none')",
              "margin-top": "9px",
              "padding": "9px 3px 1px 6px",
              "color": "white",
              "background-color": "#932227",
              "border": "none",
              "text-align": "center",
              "text-decoration": "none",
              "border-radius": "5px",
              "font-weight": "bold",
              "line-height": "normal",
              "vertical-align": "bottom"
            },
            "txtContent": "= 'Go to ' + [$LinkTitle20]"
          },
          {
            "elmType": "a",
            "attributes": {
              "class": "sp-row-button",
              "href": "[$LinkURL3]",
              "target": "_blank"
            },
            "style": {
              "display": "=if([$LinkURL3] != '', 'block', 'none')",
              "margin-top": "9px",
              "padding": "9px 3px 1px 6px",
              "color": "white",
              "background-color": "#932227",
              "border": "none",
              "text-align": "center",
              "text-decoration": "none",
              "border-radius": "5px",
              "font-weight": "bold",
              "line-height": "normal",
              "vertical-align": "bottom"
            },
            "txtContent": "= 'Go to ' + [$LinkTitle3]"
          }
        ]
      }
    ]
  }
}

Answer 1

Hi @Tara Fraser-Kelly,

Added "width": "1000px", to this section:

      "style": {
        "width": "1000px",
        "color": "black",
        "background-color": "#FAF9F9",
        "flex-grow": "10",
        "display": "flex",
        "flex-direction": "row",
        "box-sizing": "content-box",
        "padding": "4px 8px 5px 8px",
        "border-radius": "6px",
        "align-items": "center",
        "flex-wrap": "nowrap",
        "overflow": "auto",
        "margin": "1px 4px 4px 1px"
      },

It works great as per my test.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

I can't edit my post because it's saying I'm not authenticated. Slight update -

The question box used to span the length of the question and would only wrap at the same width of the answer but now the question box is really short and wraps so many times. Please help me!! Is there something in my code I can change?****