Change breakpoints to keep header in two columns more of the time

b41ce67af6ee9ef98e0ad56316f00a384f2a2daa

Tucker McKnight <tmcknight@instructure.com> | Wed Feb 11 2026

Change breakpoints to keep header in two columns more of the time
js_templates/common/htmlPage.ts:42
Before
41
42
43
44
45
46
          <link rel="stylesheet" id="prism-theme" type="text/css" href="${data.reposPath}/vendor/prism.css" />
        </head>
        <body>
          <div class="container">
            <div class="row">
              <div class="col">
                <nav class="navbar navbar-expand">
After
41
42
43
44
45
46
          <link rel="stylesheet" id="prism-theme" type="text/css" href="${data.reposPath}/vendor/prism.css" />
        </head>
        <body>
          <div class="container-fluid container-lg">
            <div class="row">
              <div class="col">
                <nav class="navbar navbar-expand">
js_templates/file.ts:23
Before
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
        ])
      )
    ),
    m('div', {class: "directory-buttons row my-2"},
      m('div', {class: "col"},
        m('h3', [
          m('span', {class: "bezel-gray p-1"},
            m('a', {href: `${data.reposPath}/${data.fileInfo.repoName}/branches/${data.fileInfo.branchName}/files`}, './')
          ),
          data.fileInfo.file.split('/').map((dir, index, arr) => {
            if (index === arr.length - 1) {
              return m('span', {class: "px-2"}, dir)
            }
            else {
              return m('span', {class: "bezel-gray p-1"}, [
                m('a', {
                  href: `${data.reposPath}/${data.fileInfo.repoName}/branches/${data.fileInfo.branchName}/files/${arr.slice(0, index + 1).map((part) => slugify(part)).join('/')}.html`}, `${dir}/`)
              ])
After
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
        ])
      )
    ),
    m('div', {class: "directory-buttons row"},
      m('div', {class: "col"},
        m('h3', [
          m('span', {class: "bezel-gray p-1 my-1 d-inline-block"},
            m('a', {href: `${data.reposPath}/${data.fileInfo.repoName}/branches/${data.fileInfo.branchName}/files`}, './')
          ),
          data.fileInfo.file.split('/').map((dir, index, arr) => {
            if (index === arr.length - 1) {
              return m('span', {class: "px-2 my-1 d-inline-block"}, dir)
            }
            else {
              return m('span', {class: "bezel-gray p-1 my-1 d-inline-block"}, [
                m('a', {
                  href: `${data.reposPath}/${data.fileInfo.repoName}/branches/${data.fileInfo.branchName}/files/${arr.slice(0, index + 1).map((part) => slugify(part)).join('/')}.html`}, `${dir}/`)
              ])
js_templates/repo.ts:50
Before
49
50
51
52
53
54
      m('div', {class: "col"}, [
        m('div', {class: "px-4 pt-3 bezel-header"}, [
          m('div', {class: "row"}, [
            m('div', {class: "col-12 col-xl-6"}, [
              m('h1', {class: "display-3 text-white"},
                m('em', repo.name)
              ),
After
49
50
51
52
53
54
      m('div', {class: "col"}, [
        m('div', {class: "px-4 pt-3 bezel-header"}, [
          m('div', {class: "row"}, [
            m('div', {class: "col-12 col-lg-6"}, [
              m('h1', {class: "display-3 text-white"},
                m('em', repo.name)
              ),
js_templates/repo.ts:58
Before
57
58
59
60
61
62
                ? m('p', {class: "text-white fs-4 fw-light"}, repo.description)
                : null
            ]),
            m('div', {class: "col-12 col-xl-6 d-flex flex-column justify-content-around"}, [
              m('div', {class: "row flex-grow-1 align-items-stretch language-percent-row"}, [
                m('div', {class: "col-12 d-flex align-items-stretch"}, [
                  m('div', {class: "language-cols d-flex flex-grow-1 flex-nowrap"}, topLanguagePercentages.map((percentTuple) => {
After
57
58
59
60
61
62
                ? m('p', {class: "text-white fs-4 fw-light"}, repo.description)
                : null
            ]),
            m('div', {class: "col-12 col-lg-6 d-flex flex-column justify-content-around"}, [
              m('div', {class: "row flex-grow-1 align-items-stretch language-percent-row"}, [
                m('div', {class: "col-12 d-flex align-items-stretch"}, [
                  m('div', {class: "language-cols d-flex flex-grow-1 flex-nowrap"}, topLanguagePercentages.map((percentTuple) => {