prehistoric-systems/Gitako
1
1
Fork 0
mirror of https://github.com/EnixCoda/Gitako.git synced 2026-03-11 08:54:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: sidebar content shifts after reducing window height

Browse source
This commit is contained in:
EnixCoda 2021-11-01 18:36:51 +08:00
parent 8a662b1314
commit 29b647d6c5
2 changed files with 21 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/FileExplorer.tsx
View file

@ -167,13 +167,15 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
)}
<SizeObserver className={'files'}>
{({ width = 0, height = 0 }) => (
<ListView
height={height}
width={width}
renderNodeContext={renderNodeContext}
expandTo={expandTo}
metaData={metaData}
/>
<div className={'magic-size-container'}>
<ListView
height={height}
width={width}
renderNodeContext={renderNodeContext}
expandTo={expandTo}
metaData={metaData}
/>
</div>
)}
</SizeObserver>

18
src/styles/index.scss
View file

@ -395,7 +395,6 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
}
.gitako-side-bar-body-wrapper-content {
width: var(--gitako-width);
}
}
.#{$name}-resize-handler {
@ -425,7 +424,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
.#{$name}-side-bar-body {
$button-size: 32px;
position: relative;
width: 100%;
width: var(--gitako-width);
height: 100%;
display: flex;
flex-direction: column;
@ -616,9 +615,16 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
}
.files {
position: relative;
flex: 1;
overflow: auto;
overflow-x: hidden; // prevent x-scroll bar show up while sizing
overflow: hidden;
// Put this inside files will help files to get proper size derived from parents, regardless of its content size
.magic-size-container {
position: absolute;
width: 100%;
height: 100%;
}
}
.node-item {
@ -633,14 +639,14 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
@include interactive-background(
var(--gitako-canvas-subtle),
var(--gitako-canvas-subtle),
var(--gitako-canvas-inset),
var(--gitako-canvas-inset)
);
}
@include interactive-background(
var(--gitako-canvas-default),
var(--gitako-canvas-subtle),
var(--gitako-canvas-inset),
var(--gitako-canvas-inset)
);
&.disabled {