Toolbar have wrong padding with safe area insets #48

New issue

Closed

opened 2024-11-20 18:02:50 +00:00 by Rubicon · 1 comment

Rubicon commented

2024-11-20 18:02:50 +00:00

Owner

	`margin-left: var(--safe-area-inset-left);`
	`margin-right: var(--safe-area-inset-right);`

This style cause the stacked pages have the padding even they are not impacted by the insets (since the max-width of stacked page is 560px).

This has two solutions:

Sets the safe-area-insets on the stacked page. This way promotes code reuse and is my preferred. The con is, the stacked pages are not granted away from the insets. If we go this way, we need to calculate the actual insets, or to make sure the stacked pages are not impacted by specific inset.
Remove this style and only applies the style on the specific page.

I prefer the first. The key problem for this option is, when the screen is between 560px to 560px+var(—safe-area-inset-left)+var(—safe-area-inset-right), the actual inset is between the original value to 0px.

https://code.lightstands.xyz/Rubicon/tutu/src/commit/147c9fbce19da9e5f4da27dc4b3a502fc7645bab/src/material/Scaffold.css#L7-L8 This style cause the stacked pages have the padding even they are not impacted by the insets (since the max-width of stacked page is 560px). This has two solutions: 1. Sets the safe-area-insets on the stacked page. This way promotes code reuse and is my preferred. The con is, the stacked pages are not granted away from the insets. If we go this way, we need to calculate the actual insets, or to make sure the stacked pages are not impacted by specific inset. 2. Remove this style and only applies the style on the specific page. I prefer the first. The key problem for this option is, when the screen is between 560px to 560px+var(—safe-area-inset-left)+var(—safe-area-inset-right), the actual inset is between the original value to 0px.

Rubicon added the

bug

label 2024-11-20 18:02:50 +00:00

Rubicon commented

2024-11-20 18:08:09 +00:00

Author

Owner

As we can get the insets in js (by getComputedStyle), we can calculate this by hand and set on the element. I still want to see if we can finalise a better solution without JS and assumptions (by this way our insets must be resolved on one specific element).

Rubicon added this to the v1.1.0 milestone 2024-11-21 10:16:42 +00:00

Rubicon self-assigned this 2024-11-21 10:16:46 +00:00

Rubicon referenced this issue from a commit

2024-11-21 11:08:33 +00:00

StackedRouter: inject inline insets, fix #48

Rubicon closed this issue

2024-11-21 11:08:33 +00:00