[WIP] add a checkbox for word wrapping on commits page

668771aa91252ebf3af8cf2b83ddba8cb554dc2a

Tucker McKnight <tmcknight@instructure.com> | Sun Mar 22 2026

[WIP] add a checkbox for word wrapping on commits page

Also a css class that will make diffs wrap. This should be set on
the diffs when the checkbox is selected.
js_templates/commit.ts:27
Before
26
27
28
29
30
31
    ),
    m('div', {class: "row my-4"},
      m('div', {class: "col-auto"}, [
        m('div', {class: "form-check"}, [
          m('input', {
            class: "form-check-input",
            type: "radio",
After
26
27
28
29
30
31
    ),
    m('div', {class: "row my-4"},
      m('div', {class: "col-auto"}, [
        m('div', {class: "form-check form-check-inline"}, [
          m('input', {
            class: "form-check-input",
            type: "radio",
js_templates/commit.ts:39
Before
38
39
40
41
42
43
          }),
          m('label', {class: "form-check-label", for: "splitModeSwitch"}, 'Side-by-side'),
        ]),
        m('div', {class: "form-check"}, [
          m('input', {
            class: "form-check-input",
            type: "radio",
After
38
39
40
41
42
43
          }),
          m('label', {class: "form-check-label", for: "splitModeSwitch"}, 'Side-by-side'),
        ]),
        m('div', {class: "form-check form-check-inline"}, [
          m('input', {
            class: "form-check-input",
            type: "radio",
js_templates/commit.ts:49
Before
48
49
50
51











52
            onchange: "toggleUnifiedMode(this)",
          }),
          m('label', {class: "form-check-label", for: "unifiedModeSwitch"}, 'Stacked')
        ])
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
      ])
    ),
After
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
            onchange: "toggleUnifiedMode(this)",
          }),
          m('label', {class: "form-check-label", for: "unifiedModeSwitch"}, 'Stacked')
        ]),
        m('div', {class: "form-check"}, [
          m('input', {
            class: "form-check-input",
            type: "checkbox",
            name: "wrap",
            id: "wrapCheckbox",
            value: "wrap",
            onchange: "todo",
          }),
          m('label', {class: "form-check-label", for: "wrapCheckbox"}, 'Wrap long lines')
        ])
      ])
    ),
scss/design-board.scss:270
Before
269
270
271




272
273
  padding: 0
}

⁣
⁣
⁣
⁣
/* commits list page */
.commit-hash {
  word-break: break-all; /* for mobile widths, allow SHA to wrap */
After
269
270
271
272
273
274
275
276
277
  padding: 0
}

code .wrap {
  white-space: pre-wrap;
}

/* commits list page */
.commit-hash {
  word-break: break-all; /* for mobile widths, allow SHA to wrap */