1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

More layout fixes

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-03-15 11:21:46 +03:00
parent a9466a84ac
commit ff76538645
3 changed files with 9 additions and 11 deletions

View File

@ -10,6 +10,7 @@
.content { .content {
margin: unset; margin: unset;
max-width: unset; max-width: unset;
height: 100%;
} }
} }
} }

View File

@ -19,8 +19,8 @@
grid-template-columns: var(--nav-column-width) 1fr; grid-template-columns: var(--nav-column-width) 1fr;
> .content { > .content-wrapper {
> * { > .content {
width: 100%; width: 100%;
padding-left: 1px; // Fix visual content crop padding-left: 1px; // Fix visual content crop
padding-right: calc(var(--nav-column-width) - var(--nav-width)); padding-right: calc(var(--nav-column-width) - var(--nav-width));
@ -53,13 +53,13 @@
height: var(--header-height); height: var(--header-height);
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 4; grid-column-end: 4;
margin-bottom: 24px;
} }
> .content-navigation { > .content-navigation {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
overflow-y: auto; overflow-y: auto;
margin-top: 32px;
ul.TreeView { ul.TreeView {
width: var(--nav-width); width: var(--nav-width);
@ -67,13 +67,13 @@
} }
} }
> .content { > .content-wrapper {
padding: 32px;
overflow: auto; overflow: auto;
> * { > .content {
width: var(--width); width: var(--width);
margin: 0 auto; margin: 0 auto;
padding-bottom: 24px;
} }
} }

View File

@ -80,11 +80,8 @@ export class PageLayout extends React.Component<PageLayoutProps> {
<RecursiveTreeView data={navigation}/> <RecursiveTreeView data={navigation}/>
</nav> </nav>
)} )}
<div <div className="content-wrapper" id="ScrollSpyRoot">
className={cssNames("content", contentClass)} <div className={cssNames("content", contentClass, contentGaps && "flex column gaps")}>
id="ScrollSpyRoot"
>
<div className={cssNames(contentGaps && "flex column gaps")}>
{children} {children}
</div> </div>
</div> </div>