From 88de6bfca44b33d8282abfd7375f8549a13cc586 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Wed, 15 Jan 2025 12:35:21 +0200 Subject: [PATCH 1/5] fix(App): older iOS versions support --- src/App/styles.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index 11b52de8b..3afdc4dd0 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -112,8 +112,8 @@ svg { html { width: @html-width; height: @html-height; - min-width: 640px; - min-height: 480px; + min-width: 100%; // Fallback for browsers that don't support new CSS units + min-height: 100%; font-family: 'PlusJakartaSans', 'sans-serif'; overflow: auto; overscroll-behavior: none; From 97acfa82ca0df66bb401a9844ee69581c458ce95 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Wed, 15 Jan 2025 20:16:13 +0200 Subject: [PATCH 2/5] fix(App): html and app styles fallback --- src/App/styles.less | 32 +++++++++++++++++++++++--------- 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index 3afdc4dd0..2ff0fbd2a 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -15,10 +15,18 @@ // iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp @calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0rem), max(1rem, calc(100lvh - 100svh - env(safe-area-inset-top, 0rem))))"; -@html-width: ~"calc(max(100svw, 100dvw))"; -@html-height: ~"calc(max(100svh, 100dvh))"; -@html-standalone-width: ~"calc(max(100%, 100lvw))"; -@html-standalone-height: ~"calc(max(100%, 100lvh))"; +@viewport-width: ~"100vw"; +@viewport-height: ~"100vh"; +@modern-viewport-width: ~"100dvw"; +@modern-viewport-height: ~"100dvh"; +@small-viewport-width: ~"100svw"; +@small-viewport-height: ~"100svh"; +@large-viewport-width: ~"100lvw"; +@large-viewport-height: ~"100lvh"; +@html-width: ~"calc(max(100vw, var(--dynamic-viewport-width, 100vw)))"; +@html-height: ~"calc(max(100vh, var(--dynamic-viewport-height, 100vh)))"; +@html-standalone-width: ~"calc(max(100%, var(--dynamic-viewport-width, 100vw)))"; +@html-standalone-height: ~"calc(max(100%, var(--dynamic-viewport-height, 100vh)))"; @safe-area-inset-top: env(safe-area-inset-top, 0rem); @safe-area-inset-right: env(safe-area-inset-right, 0rem); @safe-area-inset-bottom: env(safe-area-inset-bottom, 0rem); @@ -65,6 +73,13 @@ --safe-area-inset-right: @safe-area-inset-right; --safe-area-inset-bottom: @safe-area-inset-bottom; --safe-area-inset-left: @safe-area-inset-left; + --dynamic-viewport-width: @viewport-width; + --dynamic-viewport-height: @viewport-height; + + @supports (height: 100dvh) { + --dynamic-viewport-width: @modern-viewport-width; + --dynamic-viewport-height: @modern-viewport-height; + } } * { @@ -112,8 +127,8 @@ svg { html { width: @html-width; height: @html-height; - min-width: 100%; // Fallback for browsers that don't support new CSS units - min-height: 100%; + min-width: 100%; // Fallback for older browsers + min-height: 100%; // Fallback for older browsers font-family: 'PlusJakartaSans', 'sans-serif'; overflow: auto; overscroll-behavior: none; @@ -130,6 +145,7 @@ html { body { width: 100%; height: 100%; + min-height: 100%; background: linear-gradient(41deg, var(--primary-background-color) 0%, var(--secondary-background-color) 100%); :global(#app) { @@ -137,6 +153,7 @@ html { z-index: 0; width: 100%; height: 100%; + min-height: 100%; .toasts-container { position: absolute; @@ -212,9 +229,6 @@ html { @media only screen and (max-width: @xsmall) { html { - min-width: inherit; - min-height: inherit; - body { :global(#app) { .toasts-container { From 92a6d6f182b64c12d1d353b5f872fa0d5ee995d7 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Wed, 15 Jan 2025 20:21:43 +0200 Subject: [PATCH 3/5] refactor(App): clean up --- src/App/styles.less | 38 ++++++++++++++++++++++++++------------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index 2ff0fbd2a..f7ab9d4da 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -15,18 +15,18 @@ // iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp @calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0rem), max(1rem, calc(100lvh - 100svh - env(safe-area-inset-top, 0rem))))"; + +// Viewport sizes @viewport-width: ~"100vw"; @viewport-height: ~"100vh"; -@modern-viewport-width: ~"100dvw"; -@modern-viewport-height: ~"100dvh"; -@small-viewport-width: ~"100svw"; -@small-viewport-height: ~"100svh"; -@large-viewport-width: ~"100lvw"; -@large-viewport-height: ~"100lvh"; -@html-width: ~"calc(max(100vw, var(--dynamic-viewport-width, 100vw)))"; -@html-height: ~"calc(max(100vh, var(--dynamic-viewport-height, 100vh)))"; -@html-standalone-width: ~"calc(max(100%, var(--dynamic-viewport-width, 100vw)))"; -@html-standalone-height: ~"calc(max(100%, var(--dynamic-viewport-height, 100vh)))"; + +// HTML sizes +@html-width: ~"calc(max(var(--small-viewport-width), var(--dynamic-viewport-width)))"; +@html-height: ~"calc(max(var(--small-viewport-height), var(--dynamic-viewport-height)))"; +@html-standalone-width: ~"calc(max(100%, var(--large-viewport-width)))"; +@html-standalone-height: ~"calc(max(100%, var(--large-viewport-height)))"; + +// Safe area insets @safe-area-inset-top: env(safe-area-inset-top, 0rem); @safe-area-inset-right: env(safe-area-inset-right, 0rem); @safe-area-inset-bottom: env(safe-area-inset-bottom, 0rem); @@ -75,10 +75,24 @@ --safe-area-inset-left: @safe-area-inset-left; --dynamic-viewport-width: @viewport-width; --dynamic-viewport-height: @viewport-height; + --large-viewport-width: @viewport-width; + --large-viewport-height: @viewport-height; + --small-viewport-width: @viewport-width; + --small-viewport-height: @viewport-height; @supports (height: 100dvh) { - --dynamic-viewport-width: @modern-viewport-width; - --dynamic-viewport-height: @modern-viewport-height; + --dynamic-viewport-width: 100dvw; + --dynamic-viewport-height: 100dvh; + } + + @supports (height: 100lvh) { + --large-viewport-width: 100lvw; + --large-viewport-height: 100lvh; + } + + @supports (height: 100svh) { + --small-viewport-width: 100svw; + --small-viewport-height: 100svh; } } From 8c1b6fc6535259ad2279e7bfb70a0b8ad9e37db0 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Wed, 15 Jan 2025 20:34:50 +0200 Subject: [PATCH 4/5] fix(Navbar): positioning on older devices --- src/App/styles.less | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/App/styles.less b/src/App/styles.less index f7ab9d4da..65b2bc5d4 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -14,7 +14,7 @@ } // iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp -@calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0rem), max(1rem, calc(100lvh - 100svh - env(safe-area-inset-top, 0rem))))"; +@calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0rem), max(1rem, calc(var(--viewport-height-diff) - env(safe-area-inset-top, 0rem))))"; // Viewport sizes @viewport-width: ~"100vw"; @@ -79,6 +79,7 @@ --large-viewport-height: @viewport-height; --small-viewport-width: @viewport-width; --small-viewport-height: @viewport-height; + --viewport-height-diff: calc(100vh - 100vh); @supports (height: 100dvh) { --dynamic-viewport-width: 100dvw; @@ -94,6 +95,10 @@ --small-viewport-width: 100svw; --small-viewport-height: 100svh; } + + @supports (height: 100lvh) and (height: 100svh) { + --viewport-height-diff: calc(100lvh - 100svh); + } } * { From 6f2deb15e479d7f7e2e9602e63ec3d97498134c5 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Wed, 15 Jan 2025 20:50:08 +0200 Subject: [PATCH 5/5] remove(App): unnecessary declarations --- src/App/styles.less | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index 65b2bc5d4..0572ee3d1 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -146,8 +146,6 @@ svg { html { width: @html-width; height: @html-height; - min-width: 100%; // Fallback for older browsers - min-height: 100%; // Fallback for older browsers font-family: 'PlusJakartaSans', 'sans-serif'; overflow: auto; overscroll-behavior: none; @@ -164,7 +162,6 @@ html { body { width: 100%; height: 100%; - min-height: 100%; background: linear-gradient(41deg, var(--primary-background-color) 0%, var(--secondary-background-color) 100%); :global(#app) { @@ -172,7 +169,6 @@ html { z-index: 0; width: 100%; height: 100%; - min-height: 100%; .toasts-container { position: absolute;