Update actions page and edit actions page with better alignment

[PankajBhojwani]

Summary of the Pull Request

• Actions page: entries now stretch across the screen horizontally (to a max of 1000) to be consistent with other settings pages
• Edit action page:
• Keybindings and Additional arguments are now top-aligned headers
• All arg templates now also stretch across the screen horizontally or are right-aligned to match how expanders look in the rest of the settings UI (the one exception being the color picker - this one looks weird right-aligned)

Validation Steps Performed

Everything still works. Screenshots below.

PR Checklist

• Closes #xxx
• Tests added/passed
• Documentation updated
  • If checked, please file a pull request on our docs repo and link it here: #xxx
• Schema updated (if necessary)

[PankajBhojwani]

narrow:

[carlos-zamora]

I like the new layout. The headers look nice and make it clear that there's different sections.

I think the spacing needs to be adjusted a little bit though. Here's some notes:

• Spacing:
  • spacing beneath headers (i.e. "Command details", "Keybindings", and "Additional arguments") is a little too large. Looks like it's ~40 for "command details" and "additional arguments", but ~24 for "Keybindings".
    • I recommend ~12 (WinUI 3 gallery says "12 - between control + header, surface and edge text, text sections")
  • Spacing between keybinding and "Additional arguments" is ~26.
    • I recommend ~16 (WinUI 3 gallery says "16 - used in list styles, cards")
  • Spacing between "action name" and "action type" (and repeat for spacing between keybindings and each arg) is currently ~16 (~8 for keybindings and additional args)
    • I recommend ~8 consistently. I think keybindings and additional args look good as-is, so I'm kinda getting inspiration from there.
• Alignment:
  • delete button for keybindings feels really far away haha
    • recommendation: left align them. Maybe have it be a grid with 2 columns (key chords vs delete buttons) so that the delete buttons themselves are aligned with each other
  • nit: "action name" and "action type" controls are aligned (nice), but they don't align with the ones in "additional arguments". Might be nice if they did?
  • consider aligning the checkbox action args to the left. They feel a bit far away too haha.
• Order:
  • Consider moving the "add keybinding" button to after the key chords (instead of before).

All that said, I'm not a designer haha. I think these might be a good starting point though and you can adjust them from there?

I found a few resources that may be helpful:

• WinUI 3 Gallery > Spacing page
• https://learn.microsoft.com/en-us/windows/apps/design/basics/content-basics

Hope this all helps!