Skip to content

border in incorrect place when on history tab  #592

Open
@ianhi

Description

@ianhi

Description

The border for the Changes and History tab is always on the right which causes the tabs to be aligned differently depending on which tab is selected. Here you can see how there is no border between the tabs when history is selected and the right edge of the history tab is misaligned with the rest of the UI:
See the how the right side of the history tab aligns with the black above it.
image
image
I think that these lines are the culprits:

export const tabsClass = style({
minHeight: '36px!important',
$nest: {
'button:last-of-type': {
borderRight: 'none'
}
}
});

export const tabClass = style({
width: '50%',
minWidth: '0!important',
maxWidth: '50%!important',
minHeight: '36px!important',
backgroundColor: 'var(--jp-layout-color2)!important',
borderBottom:
'var(--jp-border-width) solid var(--jp-border-color2)!important',
borderRight: 'var(--jp-border-width) solid var(--jp-border-color2)!important',

As well the tab indicator overflows into this border region:
image

A pretty simple 'fix' is to just remove the borderRight

diff --git a/src/style/GitPanel.ts b/src/style/GitPanel.ts
index 685cd83..270373c 100644
--- a/src/style/GitPanel.ts
+++ b/src/style/GitPanel.ts
@@ -38,7 +38,6 @@ export const tabClass = style({
 
   borderBottom:
     'var(--jp-border-width) solid var(--jp-border-color2)!important',
-  borderRight: 'var(--jp-border-width) solid var(--jp-border-color2)!important',
 
   $nest: {
     span: {

image

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions