fix: overflow in right popover

Author: peterpeterparker

studio/src/app/popovers/editor/app-code/app-code.scss

@@ -1,6 +1,10 @@
 app-code {
   @import "../../../../global/theme/editor/editor-info";
 
+  ion-toolbar {
+    padding: 16px;
+  }
+
   ion-list.list-ios {
     margin-bottom: 0;
     padding-top: 8px;

studio/src/app/popovers/editor/app-code/app-code.tsx

@@ -332,7 +332,7 @@ export class AppCode {
     }
 
     render() {
-        return [<ion-toolbar class="ion-margin ion-padding-end">
+        return [<ion-toolbar>
                 <h2>Code attributes</h2>
                 <ion-router-link slot="end" onClick={() => this.closePopover()}><ion-icon name="close"></ion-icon></ion-router-link>
             </ion-toolbar>,

studio/src/app/popovers/editor/app-color/app-color.scss

@@ -1,5 +1,9 @@
 app-color {
 
+  ion-toolbar {
+    padding: 16px;
+  }
+
   ion-list.list-ios {
     margin-bottom: 0;
     padding-top: 8px;

studio/src/app/popovers/editor/app-color/app-color.tsx

@@ -165,7 +165,7 @@ export class AppColor {
     };
 
     render() {
-        return [<ion-toolbar class="ion-margin ion-padding-end">
+        return [<ion-toolbar>
                 <h2>Color</h2>
                 <ion-router-link slot="end" onClick={() => this.closePopover()}><ion-icon name="close"></ion-icon></ion-router-link>
             </ion-toolbar>,

studio/src/app/popovers/editor/app-image/app-image.scss

@@ -1,6 +1,10 @@
 app-image {
   @import "../../../../global/theme/editor/editor-info";
 
+  ion-toolbar {
+    padding: 16px;
+  }
+
   ion-list.list-ios {
     margin-bottom: 0;
     padding-top: 8px;

studio/src/app/popovers/editor/app-image/app-image.tsx

@@ -100,7 +100,7 @@ export class AppImage {
     }
 
     render() {
-        return [<ion-toolbar class="ion-margin ion-padding-end">
+        return [<ion-toolbar>
                 <h2>{this.deckOrSlide ? 'Background' : 'Image'}</h2>
                 <ion-router-link slot="end" onClick={() => this.closePopoverWithoutResults()}><ion-icon name="close"></ion-icon></ion-router-link>
             </ion-toolbar>,

studio/src/app/popovers/editor/app-slide-type/app-slide-type.scss

@@ -1,4 +1,8 @@
 app-slide-type {
+  ion-toolbar {
+    padding: 16px;
+  }
+
   div.container {
     display: flex;
     flex-direction: column;

studio/src/app/popovers/editor/app-slide-type/app-slide-type.tsx

@@ -50,7 +50,7 @@ export class AppSlideType {
     }
 
     render() {
-        return [<ion-toolbar class="ion-margin ion-padding-end">
+        return [<ion-toolbar>
                 <h2>Add a slide</h2>
                 <ion-router-link slot="end" onClick={() => this.closePopoverWithoutResults()}><ion-icon name="close"></ion-icon></ion-router-link>
             </ion-toolbar>,

studio/src/app/popovers/editor/app-slot-type/app-slot-type.scss

@@ -1,4 +1,8 @@
 app-slot-type {
+  ion-toolbar {
+    padding: 16px;
+  }
+
   div {
     h2 {
       color: var(--ion-color-primary);

studio/src/app/popovers/editor/app-slot-type/app-slot-type.tsx

@@ -29,7 +29,7 @@ export class AppSlideAdd {
     }
 
     render() {
-        return [<ion-toolbar class="ion-margin ion-padding-end">
+        return [<ion-toolbar>
                 <h2>Toggle section</h2>
                 <ion-router-link slot="end" onClick={() => this.closePopover()}><ion-icon name="close"></ion-icon></ion-router-link>
             </ion-toolbar>,