From c2c7757846ff7c165109d72de5d03786be3aac5d Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 5 Sep 2023 14:42:52 -0700 Subject: [PATCH 1/3] fix(menu): remove app dir from safe area padding --- core/src/components/menu/menu.scss | 34 ++++++++++++++++++++++++ core/src/components/toolbar/toolbar.scss | 6 ++++- 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss index c2a99e1fd85..f25344b48fa 100644 --- a/core/src/components/menu/menu.scss +++ b/core/src/components/menu/menu.scss @@ -59,15 +59,49 @@ } :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. Padding is applied to the + * left side of the menu. + * The right side of the menu is not touching the screen edge. Padding is not + * applied to the right side of the menu. + */ --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. Padding is applied to the + * right side of the menu. + * The left side of the menu is not touching the screen edge. Padding is not + * applied to the left side of the menu. + */ + --ion-safe-area-right: env(safe-area-inset-right); + --ion-safe-area-left: 0px; + } } :host(.menu-side-end) .menu-inner { --ion-safe-area-left: 0px; @include position(0, 0, 0, auto); + + @include rtl() { + --ion-safe-area-left: env(safe-area-inset-left); + --ion-safe-area-right: 0px; + } } ion-backdrop { diff --git a/core/src/components/toolbar/toolbar.scss b/core/src/components/toolbar/toolbar.scss index bd286d3662c..92cf570651b 100644 --- a/core/src/components/toolbar/toolbar.scss +++ b/core/src/components/toolbar/toolbar.scss @@ -28,7 +28,6 @@ --opacity-scale: 1; @include font-smoothing(); - @include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right)); display: block; @@ -36,6 +35,11 @@ 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; From ba28967dc67e326e107d2760770ac014e70692ac Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 6 Sep 2023 11:03:45 -0700 Subject: [PATCH 2/3] fix(menu): add detailed comments --- core/src/components/menu/menu.scss | 33 +++++++++++++++++++++++++----- 1 file changed, 28 insertions(+), 5 deletions(-) diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss index f25344b48fa..816edc891bd 100644 --- a/core/src/components/menu/menu.scss +++ b/core/src/components/menu/menu.scss @@ -67,9 +67,9 @@ * * LTR: * The left side of the menu touches the screen edge. Padding is applied to the - * left side of the menu. + * left side of the menu. No changes are needed since the value has been set. * The right side of the menu is not touching the screen edge. Padding is not - * applied to the right side of the menu. + * applied to the right side of the menu. A value of 0 is set. */ --ion-safe-area-right: 0px; @@ -83,10 +83,9 @@ * Otherwise, the content will have less space on both sides. * * RTL: - * The right side of the menu touches the screen edge. Padding is applied to the - * right side of the menu. + * The right side of the menu touches the screen edge. Padding is applied to the right side of the menu. The original value is set. * The left side of the menu is not touching the screen edge. Padding is not - * applied to the left side of the menu. + * 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; @@ -94,11 +93,35 @@ } :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. Padding is applied to the + * right side of the menu. No changes are needed since the value has been set. + * 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. Padding is applied to the + * left side of the menu. The original value is set. + * 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; } From 28798655b852fea911a52501e8b1572a2d68a7aa Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 7 Sep 2023 09:08:28 -0700 Subject: [PATCH 3/3] fix(menu): requested changes for comments --- core/src/components/menu/menu.scss | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss index 816edc891bd..4a1a09e84b5 100644 --- a/core/src/components/menu/menu.scss +++ b/core/src/components/menu/menu.scss @@ -66,8 +66,8 @@ * Otherwise, the content will have less space on both sides. * * LTR: - * The left side of the menu touches the screen edge. Padding is applied to the - * left side of the menu. No changes are needed since the value has been set. + * 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. */ @@ -83,7 +83,8 @@ * Otherwise, the content will have less space on both sides. * * RTL: - * The right side of the menu touches the screen edge. Padding is applied to the right side of the menu. The original value is set. + * 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. */ @@ -100,8 +101,8 @@ * Otherwise, the content will have less space on both sides. * * LTR: - * The right side of the menu touches the screen edge. Padding is applied to the - * right side of the menu. No changes are needed since the value has been set. + * 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. */ @@ -117,8 +118,8 @@ * Otherwise, the content will have less space on both sides. * * RTL: - * The left side of the menu touches the screen edge. Padding is applied to the - * left side of the menu. The original value is set. + * 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. */