WTH why does saving automations from the frontend strip all formatting from automations.yaml

I try not to, but sometimes it accidentally happens: I save an automation in the front end without thinking. I keep a backup in txt files to be able to reset everything for this exact reason.

I’ll show the problem. This is my nicely formatted automations.yaml BEFORE I save a random automation:

- id: roborock_working_hours
  alias: Roborock working hours
  description: Daily cleaning rounds
  mode: queued
  trigger:
  - platform: time
    at: 
    - '08:30:00'
  action:
  - delay: '00:30:00'
  - service: mqtt.publish
    data:
      topic: valetudo/Roborock/MapSegmentationCapability/clean/set
      payload: |
        {
          "action": "start_segment_action",
          "segment_ids": [
            "16",
            "19",
            "21",
            "17"
          ],
          "iterations": 2,
          "customOrder": true
        }

Now this is the same thing, AFTER I accidentally saved a random automation in the frontend:

- id: roborock_working_hours
  alias: Roborock working hours
  description: Daily cleaning rounds
  triggers:
  - at:
    - 08:30:00
    trigger: time
  actions:
  - delay: 00:30:00
  - data:
      topic: valetudo/Roborock/MapSegmentationCapability/clean/set
      payload: "{\n  \"action\": \"start_segment_action\",\n  \"segment_ids\": [\n
        \   \"16\",\n    \"19\",\n    \"21\",\n    \"17\"\n  ],\n  \"iterations\":
        2,\n  \"customOrder\": true\n}\n"
    action: mqtt.publish

This gets even worse if there’s comments or larger code blocks. Comments get discarded completely. Why??

Check out this WTH: WTH comments disappear from yaml editor?

Closed as a duplicate. Comment and vote at the link above. Please search the WTH category before posing in future.