diff --git a/src/renderer/components/+extensions/extensions.scss b/src/renderer/components/+extensions/extensions.scss index 5e5ae50cee..8e9256c201 100644 --- a/src/renderer/components/+extensions/extensions.scss +++ b/src/renderer/components/+extensions/extensions.scss @@ -1,4 +1,7 @@ .Extensions { + --width: 100%; + --max-width: auto; + .extension { --flex-gap: $padding / 3; padding: $padding $padding * 2; @@ -10,9 +13,13 @@ word-break: break-all; } - .info-col { - flex: 0.6; - align-self: flex-start; + .WizardLayout { + padding: 0; + + .info-col { + flex: 0.6; + align-self: flex-start; + } } .SearchInput { diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx index 58dbe56ac3..7dc5f55726 100644 --- a/src/renderer/components/+extensions/extensions.tsx +++ b/src/renderer/components/+extensions/extensions.tsx @@ -9,6 +9,7 @@ import { Button } from "../button"; import { WizardLayout } from "../layout/wizard-layout"; import { Input } from "../input"; import { Icon } from "../icon"; +import { PageLayout } from "../layout/page-layout"; import { extensionLoader } from "../../../extensions/extension-loader"; import { extensionManager } from "../../../extensions/extension-manager"; @@ -91,20 +92,21 @@ export class Extensions extends React.Component { render() { return ( - - Extensions - this.search = value} - /> - - {this.renderExtensions()} - - + Extensions}> + + this.search = value} + /> + + {this.renderExtensions()} + + + ); } } \ No newline at end of file diff --git a/src/renderer/components/layout/page-layout.scss b/src/renderer/components/layout/page-layout.scss index 53268f948f..0ae6f54139 100644 --- a/src/renderer/components/layout/page-layout.scss +++ b/src/renderer/components/layout/page-layout.scss @@ -1,5 +1,8 @@ .PageLayout { $spacing: $padding * 2; + --width: 60%; + --max-width: 1000px; + --min-width: 570px; position: relative; height: 100%; @@ -26,12 +29,15 @@ > .content-wrapper { @include custom-scrollbar-themed; padding: $spacing * 2; + display: flex; + flex-direction: column; > .content { + flex: 1; margin: 0 auto; - width: 60%; - min-width: 570px; - max-width: 1000px; + width: var(--width); + min-width: var(--min-width); + max-width: var(--max-width); } }