fix: use page-layout with fullsize viewport

Signed-off-by: Roman <ixrock@gmail.com>

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 {

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 (
-      <WizardLayout className="Extensions" infoPanel={this.renderInfo()}>
-        <h2><Trans>Extensions</Trans></h2>
-        <Input
-          autoFocus
-          theme="round-black"
-          className="SearchInput"
-          placeholder={_i18n._(t`Search extensions`)}
-          value={this.search}
-          onChange={(value) => this.search = value}
-        />
-        <div className="extension-list flex column gaps">
-          {this.renderExtensions()}
-        </div>
-      </WizardLayout>
+      <PageLayout showOnTop className="Extensions" header={<h2>Extensions</h2>}>
+        <WizardLayout infoPanel={this.renderInfo()}>
+          <Input
+            autoFocus
+            theme="round-black"
+            className="SearchInput"
+            placeholder={_i18n._(t`Search extensions`)}
+            value={this.search}
+            onChange={(value) => this.search = value}
+          />
+          <div className="extension-list flex column gaps">
+            {this.renderExtensions()}
+          </div>
+        </WizardLayout>
+      </PageLayout>
     );
   }
 }

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);
     }
   }