Bugzilla

So the core issue at GitHub here is:
 (1) They specify the font using the `blob-code-inner` class:
```
.blob-code-inner {
    overflow: visible;
    font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
    font-size: 12px;
    color: var(--color-fg-default);
    word-wrap: normal;
    white-space: pre;
}
```
 (2) For the manually-expanded contextual lines of code (gray background), they correctly specify that class on the block container, which is the `td` element:
```html
<td class="blob-code blob-code-inner blob-code-marker" data-code-marker=" ">
```
 (3) BUT, for the main diff section (white/green/red background), they specify that class on a `span` instead:
```html
<td class="blob-code blob-code-addition">
  [...]
   <span class="blob-code-inner blob-code-marker" data-code-marker="+">
```

So for reasons discussed in comment 4 here, that means that tab characters render with inconsistent width between those two sections.

The fix here would be for them to address (3) by specifying the `font` on the diff-section's `td` element instead of (or as well as) on the `span`.  If I make that change in devtools (just adding `font-family` and `font-size` decls on the `td` element), then that fixes the issue on my end.

So the core issue at GitHub here is:
 (1) They specify the font using the `blob-code-inner` class:
```
css
.blob-code-inner {
    overflow: visible;
    font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
    font-size: 12px;
    color: var(--color-fg-default);
    word-wrap: normal;
    white-space: pre;
}
```
 (2) For the manually-expanded contextual lines of code (gray background), they correctly specify that class on the block container, which is the `td` element:
```html
<td class="blob-code blob-code-inner blob-code-marker" data-code-marker=" ">
```
 (3) **BUT, for the main diff section (white/green/red background), they specify that class on a `span` instead:**
```html
<td class="blob-code blob-code-addition">
  [...]
   <span class="blob-code-inner blob-code-marker" data-code-marker="+">
```

So for reasons discussed in comment 4 here, that means that tab characters render with inconsistent width between those two sections.

The fix here would be for them to address (3) by specifying the `font` on the diff-section's `td` element instead of (or as well as) on the `span`.  If I make that change in devtools (just adding `font-family` and `font-size` decls on the `td` element), then that fixes the issue on my end.

So the core issue at GitHub here is:
 (1) They specify the font using the `blob-code-inner` class:
```
css
.blob-code-inner {
    overflow: visible;
    font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
    font-size: 12px;
    color: var(--color-fg-default);
    word-wrap: normal;
    white-space: pre;
}
```
 (2) For the manually-expanded contextual lines of code (gray background), they apply that `class` on the block container, which is the `td` element:
```html
<td class="blob-code blob-code-inner blob-code-marker" data-code-marker=" ">
```
 (3) BUT, for the main diff section (white/green/red background), they apply that `class` on a `span` instead (and **they don't specify any particular font on the block container, i.e. the `td`**):
```html
<td class="blob-code blob-code-addition">
  [...]
   <span class="blob-code-inner blob-code-marker" data-code-marker="+">
```

So for reasons discussed in comment 4 here, that means that tab characters render with inconsistent width between those two sections.

The fix here would be for them to address (3) by specifying the `font` on the diff-section's `td` element instead of (or as well as) on the `span`.  If I make that change in devtools (just adding `font-family` and `font-size` decls on the `td` element), then that fixes the issue on my end.

So the core issue at GitHub here is:
 (1) They specify the font using the `blob-code-inner` class:
```css
.blob-code-inner {
    overflow: visible;
    font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
    font-size: 12px;
    color: var(--color-fg-default);
    word-wrap: normal;
    white-space: pre;
}
```
 (2) For the manually-expanded contextual lines of code (gray background), they apply that `class` on the block container, which is the `td` element:
```html
<td class="blob-code blob-code-inner blob-code-marker" data-code-marker=" ">
```
 (3) BUT, for the main diff section (white/green/red background), they apply that `class` on a `span` instead (and **they don't specify any particular font on the block container, i.e. the `td`**):
```html
<td class="blob-code blob-code-addition">
  [...]
   <span class="blob-code-inner blob-code-marker" data-code-marker="+">
```

So for reasons discussed in comment 4 here, that means that tab characters render with inconsistent width between those two sections.

The fix here would be for them to address (3) by specifying the `font` on the diff-section's `td` element instead of (or as well as) on the `span`.  If I make that change in devtools (just adding `font-family` and `font-size` decls on the `td` element), then that fixes the issue on my end.