fix bugs, make first grid column collapse to fit content

src/app/notebook/formatted-notebook.component.ts

@@ -57,6 +57,7 @@ export class FormattedNotebookComponent implements OnChanges {
                 console.log('Exception formatting notebook');
                 console.log(e.message);
               }
+              this.displayError = false;
               return;
             }
           }

src/app/workflow/workflow.component.html

@@ -245,14 +245,16 @@ <h3>
           </mat-tab>
           <div *ngIf="entryType === EntryType.Notebook">
             <mat-tab id="codeTab" label="Code">
-              <div class="mt-4 ml-4 mr-4">
-                <app-formatted-notebook
-                  *ngIf="workflow && selectedVersion"
-                  [workflow]="workflow"
-                  [version]="selectedVersion"
-                  [baseUrl]="workflow.providerUrl | baseUrl: selectedVersion.name"
-                ></app-formatted-notebook>
-              </div>
+              <ng-template matTabContent>
+                <div class="mt-4 ml-4 mr-4">
+                  <app-formatted-notebook
+                    *ngIf="workflow && selectedVersion && (extendedWorkflow$ | async)"
+                    [workflow]="workflow"
+                    [version]="selectedVersion"
+                    [baseUrl]="(extendedWorkflow$ | async).providerUrl | baseUrl: selectedVersion.name"
+                  ></app-formatted-notebook>
+                </div>
+              </ng-template>
             </mat-tab>
           </div>
           <div *ngIf="entryType === EntryType.BioWorkflow || entryType === EntryType.Tool">

src/styles.scss

@@ -1390,7 +1390,7 @@ div.mat-menu-panel {
 // see https://stackoverflow.com/questions/56265483/angular-how-to-style-dynamically-generated-html
 .notebook {
   display: grid;
-  grid-template-columns: 6em auto;
+  grid-template-columns: fit-content(7em) auto;
   grid-template-rows: auto;
   grid-auto-flow: row;
   padding: 1em 1.5em 1em 1em;