diff --git a/frontend/components/bc/PageWrapper.vue b/frontend/components/bc/PageWrapper.vue index 996397675..610eae0bf 100644 --- a/frontend/components/bc/PageWrapper.vue +++ b/frontend/components/bc/PageWrapper.vue @@ -24,7 +24,7 @@ const props = defineProps({ isHomePage: { type: Boolean } }) position: relative; flex-direction: column; align-items: center; - overflow-x: hidden; + overflow-x: clip; } .content { diff --git a/frontend/components/pricing/TypeToggle.vue b/frontend/components/pricing/TypeToggle.vue index f1e12eb68..492b5da33 100644 --- a/frontend/components/pricing/TypeToggle.vue +++ b/frontend/components/pricing/TypeToggle.vue @@ -21,7 +21,6 @@ .type-toggle-container { width: 280px; height: 41px; - margin-bottom: 37px; display: flex; align-items: center; user-select: none; diff --git a/frontend/pages/pricing.vue b/frontend/pages/pricing.vue index 0bb56749f..7934f3640 100644 --- a/frontend/pages/pricing.vue +++ b/frontend/pages/pricing.vue @@ -28,7 +28,9 @@ const scrollToAddons = () => {
- +
+ +
@@ -52,6 +54,7 @@ const scrollToAddons = () => { @use '~/assets/css/pricing.scss'; .page-container { + position: relative; width: 100%; display: flex; @@ -62,6 +65,7 @@ const scrollToAddons = () => { // The pricing page uses unique styling, dimensions, font settings and so on that are not used anywhere else // That's why this component and its children include a lot of handcraftet css // If a new page is introduced that uses the same parameters, consider moving them to a shared location + position: relative; font-family: var(--montserrat-family); font-weight: var(--montserrat-medium); @@ -70,8 +74,19 @@ const scrollToAddons = () => { flex-direction: column; align-items: center; justify-content: center; - padding-top: 25px; + .type-toggle-row { + display: flex; + position: sticky; + z-index: 128; + top: 0px; + padding-top: 25px; + padding-bottom: 25px; + margin-bottom: 12px; + background-color: var(--background-color); + width: 100vw; + justify-content: center; + } .view-addons-button { width: 215px; @include pricing.pricing_button;