Idea for having the language bar be horizontal on the repo page

ff7586844b4ad387a5728e23e43f87f772aaedfe

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

Idea for having the language bar be horizontal on the repo page

Not sure if I actually like this. Also, it doesn't really save space
compared to how it was before.
js_templates/repo.ts:72
Before
71
72
73
74
75
76
      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)
              ),
After
71
72
73
74
75
76
      m('div', {class: "col"}, [
        m('div', {class: "px-4 pt-3 bezel-header"}, [
          m('div', {class: "row"}, [
            m('div', {class: "col-12 col-md-6"}, [
              m('h1', {class: "display-3 text-white"},
                m('em', repo.name)
              ),
js_templates/repo.ts:80
Before
79
80
81
82
83
84
85
86
87
88
                ? 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'}, [
                m('div', {class: "col-12 col-sm-6"}, [
                  m('div', {class: "row"}, [
                    m('div', {class: "col-6 col-lg-12 pb-0 pb-lg-2"}, [
                      m('div', {class: "text-white d-inline-block"}, [
                        m('div', {class: "latest-commit fs-6 fw-light"}, [
                          m('span', {class: 'me-1'}, `Latest in ${ref.name}`),
After
79
80
81
82
83
84
85
86
87
88
                ? m('p', {class: "text-white fs-4 fw-light"}, repo.description)
                : null
            ]),
            m('div', {class: "col-12 col-md-6 d-flex flex-column justify-content-around"}, [
              m('div', {class: 'row'}, [
                m('div', {class: "col-12"}, [
                  m('div', {class: "row"}, [
                    m('div', {class: "col-6"}, [
                      m('div', {class: "text-white d-inline-block"}, [
                        m('div', {class: "latest-commit fs-6 fw-light"}, [
                          m('span', {class: 'me-1'}, `Latest in ${ref.name}`),
js_templates/repo.ts:103
Before
102
103
104
105
106
107
                        ]),
                      ])
                    ]),
                    m('div', {class: "col-6 col-lg-12 pb-3 pb-lg-0"}, [
                      m('div', {class: "text-white d-inline-block"}, [
                        m('div', {class: "latest-commit fs-6 fw-light"}, 'Latest overall'),
                        m('div', {class: "font-monospace"}, [
After
102
103
104
105
106
107
                        ]),
                      ])
                    ]),
                    m('div', {class: "col-6"}, [
                      m('div', {class: "text-white d-inline-block"}, [
                        m('div', {class: "latest-commit fs-6 fw-light"}, 'Latest overall'),
                        m('div', {class: "font-monospace"}, [
js_templates/repo.ts:127
Before
126
127
128
129
130
131


132
133
134

135
136
137
138


139
140
141
142
143
144
145
146
147
148
149
150


151
152
                    ])
                  ])
                ]),
                m('div', {class: "col-12 col-sm-6 d-flex"}, [
                  m('div', {class: "d-flex flex-column"}, [
                    topLanguagePercentages.map((percentTuple) => {
⁣
⁣
                      return m('div', {class: 'language-name me-1 d-flex justify-content-end align-items-end small text-white font-monospace flex-grow-1'}, percentTuple[0])
                    }),
                    otherLanguagePercent > 0
⁣
                    ? m('div', {class: 'language-name me-1 d-flex justify-content-end align-items-end small text-white font-monospace flex-grow-1'}, 'other')
                    : null
                  ]),
                  m('div', {class: "flex-grow-1 d-flex flex-column"}, [
⁣
⁣
                    topLanguagePercentages.map((percentTuple, index) => {
                      const color = colors[index % (colors.length - 1)].light
                      return m('div', {
                        class: 'language-col flex-grow-1',
                        style: `width: ${percentTuple[1] / largestPercent * 100}%; background-color: ${color};`
                      })
                    }),
                    otherLanguagePercent > 0
                      ? m('div', {
                        class: 'language-col flex-grow-1',
                        style: `width: ${otherLanguagePercent / largestPercent * 100}%; background-color: ${colors[colors.length - 1].light};`
                      })
⁣
⁣
                      : null
                  ])
                ]),
After
126
127
128
129
130
131
132
133
134

135
136
137
138
139
140
141
142
143

144




145
146
147
148
149
150
151
152
153
                    ])
                  ])
                ]),
                m('div', {class: "col-12 d-flex mt-4"}, [
                  m('div', {class: "flex-grow-1 d-flex"}, [
                    topLanguagePercentages.map((percentTuple, index) => {
                      const color = colors[index % (colors.length - 1)].light
                      return m('div', {
                        style: `flex-grow: ${percentTuple[1] / largestPercent};`
⁣
                      }, [
                        m('div', {
                          class: 'language-col',
                          style: `background-color: ${color};`
                        }),
                        m('div', { class: 'pe-1 font-monospace small text-white' }, percentTuple[0]),
                      ])
                    }),
                    otherLanguagePercent > 0
⁣
                      ? m('div', {
⁣
⁣
⁣
⁣
                          style: `flex-grow: ${otherLanguagePercent / largestPercent};`}, [
                          m('div', {
                            class: 'language-col flex-grow-1',
                            style: `background-color: ${colors[colors.length - 1].light};`
                          }),
                          m('div', { class: 'font-monospace small text-white' }, 'other')
                      ])
                      : null
                  ])
                ]),
scss/design-board.scss:159
Before
158
159
160
161
162
163
  background: black;
  display: flex;
  align-items: end;
  max-height: 2rem;
  margin-top: 1px;
  margin-bottom: 1px;
}
After
158
159
160
161
162
163
  background: black;
  display: flex;
  align-items: end;
  height: 1rem;
  margin-top: 1px;
  margin-bottom: 1px;
}