Restore bubble styling for sidenavs

src/app/app.component.html

@@ -31,7 +31,10 @@
     [opened]="leftSideOpen()"
     (closed)="leftSideOpen.set(false)"
   >
-    <app-file-tree (fileSelected)="fileSelected($event)"></app-file-tree>
+    <app-file-tree
+      class="bubble-sidenav"
+      (fileSelected)="fileSelected($event)"
+    ></app-file-tree>
   </mat-sidenav>
   <mat-sidenav
     [opened]="rightSideOpen()"
@@ -40,6 +43,7 @@
     (closed)="rightSideOpen.set(false)"
   >
     <app-proto-definition-selector
+      class="bubble-sidenav"
       (messageSelected)="selectMessage($event)"
     ></app-proto-definition-selector>
   </mat-sidenav>

src/app/app.component.scss

@@ -33,3 +33,9 @@ app-editor {
 .mat-icon.filled {
   font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
 }
+
+.bubble-sidenav {
+  background-color: var(--mat-sys-secondary-container);
+  border-radius: 1rem;
+  padding: 1rem;
+}

src/styles.scss

@@ -20,7 +20,6 @@ html {
   @include mat.sidenav-overrides(
     (
       container-shape: 1rem,
-      container-background-color: var(--mat-sys-secondary-container),
     )
   );
 }