style changes; background color, font size, scrollbar margin on commit page

f8e00db919cac1ff32c949755549c3efb00084fb

Tucker McKnight <tmcknight@instructure.com> | Wed Jan 28 2026

style changes; background color, font size, scrollbar margin on commit page
js_templates/commit.ts:70
Before
69
70
71
72
73
74
                }).join('\n'))
              ),
              m('div', {class: "col overflow-scroll"},
                m('pre', {class: "mb-0", 'data-start': hunk.lineNumber}, m('code', {'data-type': 'before', class: `line-numbers language-${languageExtension(hunk.fileName, data.patchInfo.repoName)}`}, m.trust(hunk.beforeText)))
              )
            ])
          ]),
After
69
70
71
72
73
74
                }).join('\n'))
              ),
              m('div', {class: "col overflow-scroll"},
                m('pre', {class: "mb-0", 'data-start': hunk.lineNumber}, m('code', {'data-type': 'before', class: `code-diff line-numbers language-${languageExtension(hunk.fileName, data.patchInfo.repoName)}`}, m.trust(hunk.beforeText)))
              )
            ])
          ]),
js_templates/repo.ts:115
Before
114
115
116
117
118
119
      ])
    ]),
    m('div', {class: "row my-4 mx-1"},
      m('div', {class: "col"}, m.trust(readmeContent))
    )
  ])
}
After
114
115
116
117
118
119
      ])
    ]),
    m('div', {class: "row my-4 mx-1"},
      m('div', {class: "col readme"}, m.trust(readmeContent))
    )
  ])
}
scss/design-board.scss:27
Before
26
27
28


29
30




31
32
$border-color: $lightblue;
$border-width: 2px;

⁣
⁣
@import "../node_modules/bootstrap/scss/bootstrap";

⁣
⁣
⁣
⁣
.list-group {
  --bs-list-group-border-width: 1px;
  --bs-list-group-border-color: #BAC1CA;
After
26
27
28
29
30
31
32
33
34
35
36
37
38
$border-color: $lightblue;
$border-width: 2px;

$body-bg-dark: #262120;

@import "../node_modules/bootstrap/scss/bootstrap";

.readme {
  font-size: 1.1rem;
}

.list-group {
  --bs-list-group-border-width: 1px;
  --bs-list-group-border-color: #BAC1CA;
scss/design-board.scss:83
Before
82
83
84
85
86
87
88
89
90
91
  }

  .bezel-gray {
    background-color: color.adjust($body-bg-dark, $lightness: 10%);
    border-top: 6px solid color.adjust($body-bg-dark, $lightness: 15%);
    border-left: 6px solid color.adjust($body-bg-dark, $lightness: 13%);
    border-bottom: 6px solid color.adjust($body-bg-dark, $lightness: -5%);
    border-right: 6px solid color.adjust($body-bg-dark, $lightness: -9%);
  }
}
After
82
83
84
85
86
87
88
89
90
91
  }

  .bezel-gray {
    background-color: color.adjust($body-bg-dark, $lightness: 4%);
    border-top: 6px solid color.adjust($body-bg-dark, $lightness: 10%);
    border-left: 6px solid color.adjust($body-bg-dark, $lightness: 7%);
    border-bottom: 6px solid color.adjust($body-bg-dark, $lightness: -3%);
    border-right: 6px solid color.adjust($body-bg-dark, $lightness: -5%);
  }
}
scss/design-board.scss:199
Before
198
199
200
201
202
203







204
205



  .btn {
    flex: 1;
    flex-basis: 200px;
    margin: 10px 10px;
  }
⁣
⁣
⁣
⁣
⁣
⁣
⁣
}

⁣
⁣
/* Commit page */
After
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214

  .btn {
    flex: 1;
    flex-basis: 29%;
    margin: 10px 10px;
  }
  a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    span {
      margin: 0.5rem;
    }
  }
}

/* Commit page */
scss/design-board.scss:236
Before
235
236
237





238
239
  color: $white;
}

⁣
⁣
⁣
⁣
⁣
/* commits list page */
.commit-hash {
  word-break: break-all; /* for mobile widths, allow SHA to wrap */
After
235
236
237
238
239
240
241
242
243
244
  color: $white;
}

.code-diff {
  display: inline-block;
  min-height: 2rem;
}

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