fix(menu): remove app dir from safe area padding

core/src/components/menu/menu.scss

@@ -59,15 +59,73 @@
 }
 
 :host(.menu-side-start) .menu-inner {
+  /**
+    * Menu does not cover the whole screen so we need to set the safe area for the
+    * side that touches the screen edge only. Since safe area is not logical, it
+    * needs to be applied to the correct side depending on the language direction.
+    * Otherwise, the content will have less space on both sides.
+    *
+    * LTR:
+    * The left side of the menu touches the screen edge. The safe area padding has
+    * already been set in the core styles, so there's no need to set it again.
+    * The right side of the menu is not touching the screen edge. Padding is not
+    * applied to the right side of the menu. A value of 0 is set.
+    */
   --ion-safe-area-right: 0px;
 
   @include position(0, auto, 0, 0);
+
+  @include rtl() {
+    /**
+      * Menu does not cover the whole screen so we need to set the safe area for the
+      * side that touches the screen edge only. Since safe area is not logical, it
+      * needs to be applied to the correct side depending on the language direction.
+      * Otherwise, the content will have less space on both sides.
+      *
+      * RTL:
+      * The right side of the menu touches the screen edge. The safe area padding has
+      * already been set in the core styles, so there's no need to set it again.
+      * The left side of the menu is not touching the screen edge. Padding is not
+      * applied to the left side of the menu. A value of 0 is set.
+      */
+    --ion-safe-area-right: env(safe-area-inset-right);
+    --ion-safe-area-left: 0px;
+  }
 }
 
 :host(.menu-side-end) .menu-inner {
+  /**
+    * Menu does not cover the whole screen so we need to set the safe area for the
+    * side that touches the screen edge only. Since safe area is not logical, it
+    * needs to be applied to the correct side depending on the language direction.
+    * Otherwise, the content will have less space on both sides.
+    *
+    * LTR:
+    * The right side of the menu touches the screen edge. The safe area padding has
+    * already been set in the core styles, so there's no need to set it again.
+    * The left side of the menu is not touching the screen edge. Padding is not
+    * applied to the left side of the menu. A value of 0 is set.
+    */
   --ion-safe-area-left: 0px;
 
   @include position(0, 0, 0, auto);
+
+  @include rtl() {
+    /**
+      * Menu does not cover the whole screen so we need to set the safe area for the
+      * side that touches the screen edge only. Since safe area is not logical, it
+      * needs to be applied to the correct side depending on the language direction.
+      * Otherwise, the content will have less space on both sides.
+      *
+      * RTL:
+      * The left side of the menu touches the screen edge. The safe area padding has
+      * already been set in the core styles, so there's no need to set it again.
+      * The right side of the menu is not touching the screen edge. Padding is not
+      * applied to the right side of the menu. A value of 0 is set.
+      */
+    --ion-safe-area-left: env(safe-area-inset-left);
+    --ion-safe-area-right: 0px;
+  }
 }
 
 ion-backdrop {

core/src/components/toolbar/toolbar.scss

@@ -28,14 +28,18 @@
   --opacity-scale: 1;
 
   @include font-smoothing();
-  @include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));
 
   display: block;
 
   position: relative;
 
   width: 100%;
 
+  // stylelint-disable-next-line property-disallowed-list
+  padding-right: var(--ion-safe-area-right);
+  // stylelint-disable-next-line property-disallowed-list
+  padding-left: var(--ion-safe-area-left);
+
   color: var(--color);
 
   font-family: $font-family-base;