LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix layout shift

Browse source
This commit is contained in:
Rafael 2022-03-18 09:04:09 -03:00 committed by Thomas Zarebczan
parent 36a63e27c1
commit 6d362b19c8
2 changed files with 22 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
ui/scss/component/_main.scss
View file

@ -105,17 +105,31 @@ body {
.main--file-page { .main--file-page {
width: 100%; width: 100%;
max-width: var(--page-max-width--filepage); max-width: var(--page-max-width--filepage);
margin-left: auto;
margin-right: auto;
margin-top: var(--spacing-m); margin-top: var(--spacing-m);
padding: 0 var(--spacing-m); padding: 0 var(--spacing-m);
display: flex;
flex-direction: row;
align-items: flex-start;
position: relative; position: relative;
> :first-child { @media (min-width: $breakpoint-medium) {
flex-grow: 2; $recommended-width: calc(var(--recommended-content-width) - var(--spacing-l) * 3 - var(--spacing-m) * 2);
display: grid;
grid-template-columns: 1fr $recommended-width;
justify-content: space-between;
gap: var(--spacing-l);
.file-page__recommended {
margin: 0 !important;
height: 100% !important;
width: 100% !important;
}
}
@media (max-width: $breakpoint-medium) {
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: row;
align-items: flex-start;
} }
.file-page__secondary-content { .file-page__secondary-content {

1
ui/scss/init/_vars.scss
View file

@ -53,6 +53,7 @@
--mobile: 600px; --mobile: 600px;
--side-nav-width: 230px; --side-nav-width: 230px;
--side-nav-width--micro: 93px; --side-nav-width--micro: 93px;
--recommended-content-width: 32rem;
--spacing-main-padding: var(--spacing-xl); --spacing-main-padding: var(--spacing-xl);
--floating-viewer-width: 32rem; --floating-viewer-width: 32rem;