Use nav helper in file breadcrumbs

f726b2e743a9d23fd4c502e42cb99098632ddad2

Tucker McKnight <tmcknight@instructure.com> | Sun Aug 09 2026

Use nav helper in file breadcrumbs

Also some style tweaks on commits page
js_templates/commits.ts:148
Before
147
148
149
150
151
152
153
          ]),
          m('div', {class: 'col-12 col-md-auto'}, [
            m('div', {class: "input-group mb-2 flex-nowrap"}, [
              m('span', {class: "font-monospace input-group-text border-info overflow-scroll"}, commit.hash.slice(0, 6)),
              m('button', {'data-copy-text': commit.hash, class: "btn btn-sm btn-info shadow-none copy-button"}, 'Copy')
            ])
          ]),
        ]),
After
147
148
149
150
151
152
153
          ]),
          m('div', {class: 'col-12 col-md-auto'}, [
            m('div', {class: "input-group mb-2 flex-nowrap"}, [
              m('span', {class: "font-monospace input-group-text border-primary overflow-scroll"}, commit.hash.slice(0, 6)),
              m('button', {'data-copy-text': commit.hash, class: "btn btn-sm btn-primary shadow-none copy-button text-white"}, 'Copy')
            ])
          ]),
        ]),
js_templates/file.ts:40
Before
39
40
41
42
43
44
      m('div', {class: "col"},
        m('h3', [
          m('span', {class: "bezel-gray p-1 my-1 d-inline-block"},
            m('a', {href: `${data.reposPath}/${slugify(fileInfo.repoName)}/${fileInfo.type}/${slugify(fileInfo.refName)}/files`}, './')
          ),
          fileInfo.file.split('/').map((dir, index, arr) => {
            if (index === arr.length - 1) {
After
39
40
41
42
43
44
      m('div', {class: "col"},
        m('h3', [
          m('span', {class: "bezel-gray p-1 my-1 d-inline-block"},
            m('a', {href: nav.files()}, './')
          ),
          fileInfo.file.split('/').map((dir, index, arr) => {
            if (index === arr.length - 1) {
js_templates/file.ts:49
Before
48
49
50

51
52
53
            else {
              return m('span', {class: "bezel-gray p-1 my-1 d-inline-block"}, [
                m('a', {
⁣
                  href: `${data.reposPath}/${slugify(fileInfo.repoName)}/${fileInfo.type}/${slugify(fileInfo.refName)}/files/${arr.slice(0, index + 1).map((part) => slugify(part)).join('/')}`}, `${dir}/`)
              ])
            }
          })
After
48
49
50
51
52
53
54
            else {
              return m('span', {class: "bezel-gray p-1 my-1 d-inline-block"}, [
                m('a', {
                  href: nav.file(arr.slice(0, index + 1).join('/'))
                }, `${dir}/`)
              ])
            }
          })
scss/design-board.scss:101
Before
100
101
102
103
104
105

  .clone-text-group {
    label.input-group-text {
      background-color: color.adjust($blue, $lightness: 3%);
    }
  }
After
100
101
102
103
104
105

  .clone-text-group {
    label.input-group-text {
      background-color: color.adjust($blue, $lightness: 5%);
    }
  }