prettify layer browser & menuicon side bar

src/ui/layerbrowser/layerbrowser.style.css

@@ -16,11 +16,6 @@ div[body]
   background-color:rgba(0, 0, 0, 0.1);
 }
 
-.muted-text
-{
-  text-decoration: line-through;
-}
-
 .layerContainer
 {
   display: flex;

src/ui/layerbrowser/layerbrowser.template.html

 <ng-container *ngIf="nonBaseNgLayers$ | async as nonBaseNgLayers; else noLayerPlaceHolder">
-  <ng-container *ngIf="nonBaseNgLayers.length > 0; else noLayerPlaceHolder">
-    <div
-      class="layerContainer overflow-hidden"
-      *ngFor = "let ngLayer of nonBaseNgLayers">
-    
+  <mat-list *ngIf="nonBaseNgLayers.length > 0; else noLayerPlaceHolder">
+    <mat-list-item *ngFor="let ngLayer of nonBaseNgLayers">
+
       <!-- toggle visibility -->
       
       <button
@@ -49,8 +47,8 @@
         [class]="((darktheme$ | async) ? 'text-light' : 'text-dark') + ' text-truncate'">
         {{ ngLayer.name | getFilenamePipe | getFileExtension }}
       </div>
-    </div>
-  </ng-container>
+    </mat-list-item>
+  </mat-list>
 </ng-container>
 
 <!-- fall back when no layers are showing -->

src/ui/menuicons/menuicons.template.html

@@ -16,7 +16,8 @@
         <i class="fas fa-layer-group"></i>
       </button>
     </div>
-    <div class="d-flex flex-row align-items-center soh-row pe-none"
+    <div
+      class="d-flex flex-row align-items-center soh-row"
       sleight-of-hand-back>
 
       <button
@@ -28,15 +29,32 @@
         <i class="fas fa-layer-group"></i>
       </button>
 
-      <div [class]="((darktheme$ | async) ? 'bg-dark' : 'bg-light') + ' card pe-all'">
-        <layer-browser #layerBrowser [showPlaceholder]="false">
-        </layer-browser>
+      <div class="position-relative">
+
+        <div [ngClass]="{'invisible pe-none': (layerBrowser.nonBaseNgLayers$ | async).length === 0}" class="position-absolute">
+          <mat-card>
+            <layer-browser #layerBrowser>
+            </layer-browser>
+          </mat-card>
+        </div>
+
+        <ng-container *ngIf="(layerBrowser.nonBaseNgLayers$ | async).length === 0" #noNonBaseNgLayerTemplate>
+          <small [class]="((darktheme$ | async) ? 'bg-dark text-light' : 'bg-light text-dark') + ' muted pl-2 pr-2 p-1 text-nowrap'">
+            No additional layers added
+          </small>
+        </ng-container>
+
+        <!-- invisible button to prop up the size of parent block -->
+        <!-- otherwise, sibling block position will be wonky -->
+        <button
+          color="primary"
+          class="invisible pe-none"
+          mat-icon-button>
+          <i class="fas fa-layer-group"></i>
+        </button>
+
       </div>
-      <ng-container *ngIf="(layerBrowser.nonBaseNgLayers$ | async).length === 0" #noNonBaseNgLayerTemplate>
-        <small [class]="((darktheme$ | async) ? 'bg-dark text-light' : 'bg-light text-dark') + ' muted pl-2 pr-2 p-1 text-nowrap'">
-          No additional layers added
-        </small>
-      </ng-container>
+
     </div>
   </sleight-of-hand>