Put all header content in one row (if it can fit)

eeb992ced3b4b19b6b09746f614c9e75f8cacf60

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

Put all header content in one row (if it can fit)

Also wraps all if it in a div.col, instead of having the navbar
and theme selector being in different columns. (They are still in
different columns inside of a nested row now, but there is an overall
.col that they are in.) This should make future styling easier.
js_templates/common/commonPage.ts:18
Before
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
            m('div', {class: "row"}, [
              m('div', {class: "col"}, [
                opts.navbarContent || null,
              ]),
              m('div', {class: "col-auto pt-2"}, [
                m('div', {class: "dropdown"}, [
                  m('button', {class: "dropdown-toggle btn btn-bg", id: "dark-mode-switch", type: "button", 'data-bs-toggle': "dropdown", 'aria-expanded': 'false'},
                    m('span', m.trust('&#xFE0F;'))
                  ),
                  m('ul', {class: "dropdown-menu"}, [
                    m('li',
                      m('button', {class: "btn shadow-none", 'data-theme-pref': "light", onclick: "toggleDarkMode(this)"}, [
                        m('span', {class: "me-1"}, m.trust('&#x1F31E;')),
                        'Light'
                    ),
                    m('li',
                      m('button', {class: "btn shadow-none", 'data-theme-pref': "dark", onclick: "toggleDarkMode(this)"}, [
                        m('span', {class: "me-1"}, m.trust('&#x1F319;')),
                        'Dark'
                      ])
                    ),
                    m('li',
                      m('button', {class: "btn shadow-none", 'data-theme-pref': "auto", onclick: "toggleDarkMode(this)"}, [
                        m('span', {class: "me-1"}, m.trust('&#x1F5A5;&#xFE0F;')),
                        'Match OS'
                      ])
                    )
                ])
              ])
After
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
            m('div', {class: "row mb-1"}, [
              m('div', {class: "col"},
                m('div', {class: "row"},
                  m('div', {class: "col"}, [
                    opts.navbarContent || null,
                  ]),
                  m('div', {class: "col-auto pt-2"}, [
                    m('div', {class: "dropdown"}, [
                      m('button', {class: "dropdown-toggle btn btn-bg", id: "dark-mode-switch", type: "button", 'data-bs-toggle': "dropdown", 'aria-expanded': 'false'},
                        m('span', m.trust('&#xFE0F;'))
                      ),
                      m('ul', {class: "dropdown-menu"}, [
                        m('li',
                          m('button', {class: "btn shadow-none", 'data-theme-pref': "light", onclick: "toggleDarkMode(this)"}, [
                            m('span', {class: "me-1"}, m.trust('&#x1F31E;')),
                            'Light'
                          ])
                        ),
                        m('li',
                          m('button', {class: "btn shadow-none", 'data-theme-pref': "dark", onclick: "toggleDarkMode(this)"}, [
                            m('span', {class: "me-1"}, m.trust('&#x1F319;')),
                            'Dark'
                          ])
                        ),
                        m('li',
                          m('button', {class: "btn shadow-none", 'data-theme-pref': "auto", onclick: "toggleDarkMode(this)"}, [
                            m('span', {class: "me-1"}, m.trust('&#x1F5A5;&#xFE0F;')),
                            'Match OS'
                          ])
                        )
                    ])
                )
              )
js_templates/common/htmlPage.ts:41
Before
41
42
    navbarContent: m('nav', {class: "navbar navbar-expand"}, [
          }, m.trust('&#10094; Repos'))
After
41
42
    navbarContent: m('nav', {class: "navbar navbar-expand flex-wrap"}, [
          }, m.trust('&#10094; repos'))
js_templates/common/htmlPage.ts:55
Before
55
56
        m('li', {class: "nav-item"}, [
          m('span', {class: "nav-link d-inline-block"}, 'Branch:'),
After
55
56
        m('li', {class: "nav-item me-4 mb-1"}, [
          m('span', {class: "nav-link d-inline-block"}, 'ref:'),
js_templates/common/htmlPage.ts:75
Before
75
76
                      m('input', {class: "form-check-input sort-filter", type: "radio", name: "branchSort", value: 'date', id: "branchSortByDate", checked: true}),
                      m('input', {class: "form-check-input sort-filter", type: "radio", name: "branchSort", value: 'name', id: "branchSortByName"}),
After
75
76
                      m('input', {class: "form-check-input sort-filter me-1", type: "radio", name: "branchSort", value: 'date', id: "branchSortByDate", checked: true}),
                      m('input', {class: "form-check-input sort-filter me-1", type: "radio", name: "branchSort", value: 'name', id: "branchSortByName"}),
js_templates/common/htmlPage.ts:91
Before
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
      ])
      m('div', {class: "row"},
        m('div', {class: "col"},
          m('nav', {class: "navbar navbar-expand"},
            m('ul', {class: "main-nav navbar-nav flex-wrap"}, [
              m('li', {class: "nav-item"},
                m('a', {class: `nav-link ${data.navTab === 'home' ? 'active' : ''}`, 'aria-current': "page", href: nav.repoCurrentBranchHome()}, 'Home')
              ),
              m('li', {class: "nav-item"},
                m('a', {class: `nav-link ${data.navTab === 'files' ? 'active' : ''}`, href: nav.repoCurrentBranchFiles()}, 'Files')
              ),
              m('li', {class: "nav-item"},
                m('a', {class: `nav-link ${data.navTab === 'commits' ? 'active' : ''}`, href: nav.repoCurrentBranchCommits()}, 'Commits')
              ),
              m('li', {class: "nav-item"},
                m('a', {class: `nav-link ${data.navTab === 'branches' ? 'active' : ''}`, href: nav.repoCurrentBranchBranches()}, 'Branches')
              )
            ])
          )
        )
      ),
After
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
        ]),
        m('ul', {class: "main-nav navbar-nav flex-wrap"}, [
          m('li', {class: "nav-item"},
            m('a', {class: `nav-link ${data.navTab === 'home' ? 'active' : ''}`, 'aria-current': "page", href: nav.repoCurrentBranchHome()}, 'Home')
          ),
          m('li', {class: "nav-item"},
            m('a', {class: `nav-link ${data.navTab === 'files' ? 'active' : ''}`, href: nav.repoCurrentBranchFiles()}, 'Files')
          ),
          m('li', {class: "nav-item"},
            m('a', {class: `nav-link ${data.navTab === 'commits' ? 'active' : ''}`, href: nav.repoCurrentBranchCommits()}, 'Commits')
          ),
          m('li', {class: "nav-item"},
            m('a', {class: `nav-link ${data.navTab === 'branches' ? 'active' : ''}`, href: nav.repoCurrentBranchBranches()}, 'Branches')
          )
      ]),
js_templates/index.ts:10
Before
10
11
12
13
14
    m('div', {class: "row"},
      m('div', {class: "col d-flex flex-wrap"},
        data.repos.map((repo) => {
          return (
            m('div', {class: "m-2 card bezel-gray flex-grow-1", style: "flex-basis: 20rem;"},
After
10
11
12
13
14
    m('div', {class: "row d-flex flex-wrap"},
      data.repos.map((repo) => {
        return (
          m('div', {class: "col", style: "flex-basis: 50%; max-width: 50%;"},
            m('div', {class: "my-2 card bezel-gray flex-grow-1"},
js_templates/index.ts:40
Before
40
41
        })
      )
After
40
41
        )
      })
src/repos.ts:14
Before
14
const branchesForReposMap: Map<string, Array<{name: string, description?: string, compareTO?: string}>> = new Map()
After
14
const branchesForReposMap: Map<string, Array<{name: string, description?: string, compareTo?: string}>> = new Map()