snek height fix (#1284)

* snek height fix

* close button to od welcome plus snek reposition

* remove console logs

Co-authored-by: Drew Ansbacher <drew@start9labs.com>
Co-authored-by: Matt Hill <matthewonthemoon@gmail.com>

frontend/projects/ui/src/app/app.component.html

@@ -68,8 +68,8 @@
               cursor: pointer;
               position: absolute;
               bottom: 90px;
-              right: 20px;
-              width: 25px;
+              left: 20px;
+              width: 20px;
             "
             src="assets/img/icons/snek.png"
           />

frontend/projects/ui/src/app/app.component.ts

@@ -257,6 +257,7 @@ export class AppComponent {
       const modal = await this.modalCtrl.create({
         component: OSWelcomePage,
         presentingElement: await this.modalCtrl.getTop(),
+        backdropDismiss: false,
         componentProps: {
           version: this.config.version,
         },

frontend/projects/ui/src/app/modals/os-welcome/os-welcome.page.html

@@ -1,6 +1,11 @@
 <ion-header>
   <ion-toolbar>
     <ion-title>{{ version }} Release Notes</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="dismiss()">
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 

frontend/projects/ui/src/app/modals/snake/snake.page.html

@@ -6,7 +6,7 @@
 </ion-header>
 
 <ion-content class="ion-padding">
-  <div class="canvas-center" style="width: 100%">
+  <div class="canvas-center" style="width: 100%; height: 100%">
     <canvas id="game"> </canvas>
   </div>
 </ion-content>

frontend/projects/ui/src/app/modals/snake/snake.page.ts

@@ -80,7 +80,10 @@ export class SnakePage {
     this.canvas.style.border = '1px solid #e0e0e0'
     this.context = this.canvas.getContext('2d')
     const container = document.getElementsByClassName('canvas-center')[0]
-    this.grid = Math.floor(container.clientWidth / this.width)
+    this.grid = Math.min(
+      Math.floor(container.clientWidth / this.width),
+      Math.floor(container.clientHeight / this.height),
+    )
     this.snake = {
       x: this.grid * (Math.floor(this.width / 2) - this.startingLength),
       y: this.grid * Math.floor(this.height / 2),

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace.service.ts

@@ -37,7 +37,6 @@ export class MarketplaceService {
   init(): Subscription {
     return this.patch.watch$('ui', 'marketplace').subscribe(marketplace => {
       if (!marketplace || !marketplace['selected-id']) {
-        console.log('**MARKETPLACE', this.config)
         this.marketplace = this.config.marketplace
       } else {
         this.marketplace =