fix: repair nx cloud footer styling

nrwl · Dec 27, 2022 · 864468f · 864468f
1 parent ee12bfb
commit 864468f
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 17 deletions.
diff --git a/libs/vscode/nx-cloud-view/src/lib/nx-cloud-webview-provider.ts b/libs/vscode/nx-cloud-view/src/lib/nx-cloud-webview-provider.ts
@@ -103,9 +103,12 @@ export class NxCloudWebviewProvider implements WebviewViewProvider {
 
         <style>
         html {
-          height: 100%;
+          min-height: 100%;
         }
         body {
+          height: 100vh;
+        }
+        root-element {
           height: 100%;
         }
         </style>

diff --git a/libs/vscode/nx-cloud-view/src/webview/components/run-list.ts b/libs/vscode/nx-cloud-view/src/webview/components/run-list.ts
@@ -5,9 +5,6 @@ import type { RunDetails } from '../../lib/nx-cloud-service/models';
 @customElement('run-list-element')
 export class RunList extends LitElement {
   static styles = css`
-    vscode-panel-view {
-      min-height: 200px;
-    }
     vscode-progress-ring {
       padding-top: 5rem;
       margin: auto;

diff --git a/libs/vscode/nx-cloud-view/src/webview/components/ui/logo.ts b/libs/vscode/nx-cloud-view/src/webview/components/ui/logo.ts
@@ -7,6 +7,7 @@ export class Logo extends LitElement {
     :host {
       color: var(--vscode-input-placeholderForeground);
       font-size: 0.75rem;
+      padding: 0.5rem;
     }
     .nx-cloud-icon {
       height: 1rem;
@@ -18,10 +19,6 @@ export class Logo extends LitElement {
       stroke: var(--vscode-input-placeholderForeground);
     }
     .logo {
-      position: sticky;
-      bottom: 0;
-      right: 0;
-      padding: 0.5rem;
       display: flex;
       align-items: center;
       justify-content: end;

diff --git a/libs/vscode/nx-cloud-view/src/webview/main.ts b/libs/vscode/nx-cloud-view/src/webview/main.ts
@@ -21,16 +21,26 @@ import './all-components';
 export class Root extends LitElement {
   static styles = css`
     .container {
-      display: flex;
+      min-height: 100%;
+      position: relative;
+      display: inline-flex;
       flex-direction: column;
-      height: 100%;
+    }
+    .content {
+      padding-bottom: 1.5rem;
     }
     vscode-divider {
       margin: 1.5rem 0 1rem 0;
     }
     steps-element {
       height: 100%;
     }
+    logo-element {
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      right: 0;
+    }
   `;
   @state()
   private state: WebviewState | undefined = undefined;
@@ -42,13 +52,15 @@ export class Root extends LitElement {
       <div class="container">
         <status-labels-element .state=${this.state}></status-labels-element>
         <vscode-divider role="seperator"></vscode-divider>
-        <claim-callout-element
-          ?isusingcloudrunner=${this.state?.isUsingCloudRunner}
-          ?hasloaded=${this.state?.hasLoadedWorkspaceDetails}
-          ?isclaimed=${this.state?.isCloudWorkspaceClaimed}
-          ?isauthenticated=${this.state?.isAuthenticated}
-        ></claim-callout-element>
-        <steps-element .state=${this.state}></steps-element>
+        <div class="content">
+          <claim-callout-element
+            ?isusingcloudrunner=${this.state?.isUsingCloudRunner}
+            ?hasloaded=${this.state?.hasLoadedWorkspaceDetails}
+            ?isclaimed=${this.state?.isCloudWorkspaceClaimed}
+            ?isauthenticated=${this.state?.isAuthenticated}
+          ></claim-callout-element>
+          <steps-element .state=${this.state}></steps-element>
+        </div>
         <logo-element></logo-element>
       </div>
     `;