From f00362b50cc4fb91ea3aa786e139aad99227a435 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Mon, 13 Nov 2023 15:00:03 -0300
Subject: [PATCH] Terms of use - Added sticky position in mobile terms of use
 nav

---
 src/markdoc/layouts/Policy.svelte | 22 +++++++++++-----------
 src/scss/_10-utilities.scss       |  1 +
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/markdoc/layouts/Policy.svelte b/src/markdoc/layouts/Policy.svelte
index 92e26aab7a..dd1ccc090d 100644
--- a/src/markdoc/layouts/Policy.svelte
+++ b/src/markdoc/layouts/Policy.svelte
@@ -83,17 +83,17 @@
         <div class="aw-grid-120-1fr-auto">
             <header class="aw-grid-120-1fr-auto-header">
                 <h1 class="aw-title aw-u-color-text-primary">{title}</h1>
-                <button
-                    class="u-flex u-width-full-line u-main-space-between u-cross-center
-                      aw-u-padding-20 aw-u-color-text-primary aw-is-only-mobile
-                     aw-u-margin-inline-32-negative u-margin-block-start-24 aw-u-sep-block"
-                    style="inline-size:100vw"
-                    on:click={() => (showToc = !showToc)}
-                >
-                    <span class="aw-description">Table of contents</span>
-                    <span class="icon-menu-alt-4" aria-hidden="true" />
-                </button>
             </header>
+            <button
+                    class="u-position-sticky u-flex u-width-full-line u-main-space-between u-cross-center
+                      aw-u-padding-20 aw-u-margin-inline-20-negative aw-u-color-text-primary aw-is-only-mobile
+                     u-margin-block-start-24 aw-u-sep-block aw-u-filter-blur-8"
+                    style="--inset-block-start:4.5rem; inline-size:100vw; background-color:hsl(var(--p-body-bg-color) / 0.1);"
+                    on:click={() => (showToc = !showToc)}
+            >
+                <span class="aw-description">Table of contents</span>
+                <span class="icon-menu-alt-4" aria-hidden="true" />
+            </button>
             <aside class="aw-grid-120-1fr-auto-side" class:aw-is-mobile-closed={!showToc}>
                 <div class="aw-page-steps">
                     <div
@@ -207,6 +207,6 @@
     h2[aria-hidden='true'] {
         height: 0;
         opacity: 0;
-        margin-block-end: -3rem;
+        //margin-block-end: -3rem;
     }
 </style>
diff --git a/src/scss/_10-utilities.scss b/src/scss/_10-utilities.scss
index 6866a93212..5f9b3577fb 100644
--- a/src/scss/_10-utilities.scss
+++ b/src/scss/_10-utilities.scss
@@ -37,6 +37,7 @@
 
 .#{$p}-u-margin-inline-auto-mobile { @media #{$break1}{ margin-inline:auto;} }
 .#{$p}-u-margin-inline-8-negative   { margin-inline:pxToRem(-8); }
+.#{$p}-u-margin-inline-20-negative  { margin-inline:pxToRem(-20); }
 .#{$p}-u-margin-inline-32-negative  { margin-inline:pxToRem(-32); }
 
 .#{$p}-u-margin-block-0             { margin-block:0; }