From d4540a56b9dfac4da18e2e8f0d2720200982cb42 Mon Sep 17 00:00:00 2001
From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com>
Date: Mon, 21 Mar 2022 07:45:10 +0530
Subject: [PATCH] refactor: improve the mobile layout. (#2153)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
---
 .../hoppscotch-app/assets/scss/themes.scss    | 15 +++++
 .../hoppscotch-app/components/app/Footer.vue  |  4 +-
 .../hoppscotch-app/components/app/Sidenav.vue |  1 +
 .../components/http/Authorization.vue         | 23 ++++----
 .../hoppscotch-app/components/http/Body.vue   |  6 +-
 .../components/http/BodyParameters.vue        |  9 +--
 .../components/http/Headers.vue               | 12 ++--
 .../components/http/Parameters.vue            |  6 +-
 .../components/http/PreRequestScript.vue      |  8 +--
 .../components/http/RawBody.vue               |  2 +-
 .../components/http/Request.vue               | 13 ++--
 .../components/http/RequestOptions.vue        |  4 +-
 .../hoppscotch-app/components/http/Tests.vue  |  2 +-
 .../components/http/URLEncodedParams.vue      |  2 +-
 packages/hoppscotch-app/layouts/default.vue   | 59 +++++++++++++++++--
 packages/hoppscotch-app/windi.config.js       |  8 +++
 16 files changed, 118 insertions(+), 56 deletions(-)

diff --git a/packages/hoppscotch-app/assets/scss/themes.scss b/packages/hoppscotch-app/assets/scss/themes.scss
index 0e9511a00..8c51d87a9 100644
--- a/packages/hoppscotch-app/assets/scss/themes.scss
+++ b/packages/hoppscotch-app/assets/scss/themes.scss
@@ -249,6 +249,11 @@
   --upper-primary-sticky-fold: 4.125rem;
   --upper-secondary-sticky-fold: 6.125rem;
   --upper-tertiary-sticky-fold: 8.188rem;
+  --upper-mobile-primary-sticky-fold: 6.625rem;
+  --upper-mobile-secondary-sticky-fold: 8.625rem;
+  --upper-mobile-tertiary-sticky-fold: 10.625rem;
+  --upper-mobile-raw-sticky-fold: 10.675rem;
+  --upper-mobile-raw-tertiary-sticky-fold: 8.188rem;
   --lower-primary-sticky-fold: 3rem;
   --lower-secondary-sticky-fold: 5rem;
   --sidebar-primary-sticky-fold: 2rem;
@@ -261,6 +266,11 @@
   --upper-primary-sticky-fold: 4.375rem;
   --upper-secondary-sticky-fold: 6.625rem;
   --upper-tertiary-sticky-fold: 8.813rem;
+  --upper-mobile-primary-sticky-fold: 7.125rem;
+  --upper-mobile-secondary-sticky-fold: 9.375rem;
+  --upper-mobile-tertiary-sticky-fold: 10.875rem;
+  --upper-mobile-raw-sticky-fold: 11.695rem;
+  --upper-mobile-raw-tertiary-sticky-fold: 8.925rem;
   --lower-primary-sticky-fold: 3.25rem;
   --lower-secondary-sticky-fold: 5.5rem;
   --sidebar-primary-sticky-fold: 2.25rem;
@@ -273,6 +283,11 @@
   --upper-primary-sticky-fold: 4.625rem;
   --upper-secondary-sticky-fold: 7.125rem;
   --upper-tertiary-sticky-fold: 9.5rem;
+  --upper-mobile-primary-sticky-fold: 7.625rem;
+  --upper-mobile-secondary-sticky-fold: 10.125rem;
+  --upper-mobile-tertiary-sticky-fold: 11.375rem;
+  --upper-mobile-raw-sticky-fold: 12.695rem;
+  --upper-mobile-raw-tertiary-sticky-fold: 9.7rem;
   --lower-primary-sticky-fold: 3.5rem;
   --lower-secondary-sticky-fold: 6rem;
   --sidebar-primary-sticky-fold: 2.5rem;
diff --git a/packages/hoppscotch-app/components/app/Footer.vue b/packages/hoppscotch-app/components/app/Footer.vue
index 9c4ab205a..9ee429d2a 100644
--- a/packages/hoppscotch-app/components/app/Footer.vue
+++ b/packages/hoppscotch-app/components/app/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="bg-primary">
     <div class="flex justify-between">
       <div class="flex">
         <ButtonSecondary
@@ -166,7 +166,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')"
           svg="columns"
-          class="transform"
+          class="transform hidden sm:inline"
           :class="{ 'rotate-90': !COLUMN_LAYOUT }"
           @click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
         />
diff --git a/packages/hoppscotch-app/components/app/Sidenav.vue b/packages/hoppscotch-app/components/app/Sidenav.vue
index b2741365d..04eccd140 100644
--- a/packages/hoppscotch-app/components/app/Sidenav.vue
+++ b/packages/hoppscotch-app/components/app/Sidenav.vue
@@ -71,6 +71,7 @@ const primaryNavigation = [
   @apply flex flex-col flex-1;
   @apply items-center;
   @apply justify-center;
+  @apply bg-primary;
   @apply hover:(bg-primaryDark text-secondaryDark);
   @apply focus-visible:text-secondaryDark;
 
diff --git a/packages/hoppscotch-app/components/http/Authorization.vue b/packages/hoppscotch-app/components/http/Authorization.vue
index bda559b7c..52c52537d 100644
--- a/packages/hoppscotch-app/components/http/Authorization.vue
+++ b/packages/hoppscotch-app/components/http/Authorization.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
       <span class="flex items-center">
-        <label class="font-semibold text-secondaryLight">
-          {{ $t("authorization.type") }}
-        </label>
+        <label class="font-semibold text-secondaryLight">{{
+          $t("authorization.type")
+        }}</label>
         <tippy
           ref="authTypeOptions"
           interactive
@@ -107,14 +107,13 @@
           @change="setExclude('auth', !$event)"
         >
           {{ $t("authorization.include_in_url") }}
-        </SmartCheckbox> -->
+        </SmartCheckbox>-->
         <SmartCheckbox
           :on="authActive"
           class="px-2"
           @change="authActive = !authActive"
+          >{{ $t("state.enabled") }}</SmartCheckbox
         >
-          {{ $t("state.enabled") }}
-        </SmartCheckbox>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/authorization"
@@ -140,9 +139,7 @@
         class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="`${$t('empty.authorization')}`"
       />
-      <span class="pb-4 text-center">
-        {{ $t("empty.authorization") }}
-      </span>
+      <span class="pb-4 text-center">{{ $t("empty.authorization") }}</span>
       <ButtonSecondary
         outline
         :label="$t('app.documentation')"
@@ -188,9 +185,9 @@
             <SmartEnvInput v-model="apiValue" placeholder="Value" />
           </div>
           <div class="flex items-center border-b border-dividerLight">
-            <label class="ml-4 text-secondaryLight">
-              {{ $t("authorization.pass_key_by") }}
-            </label>
+            <label class="ml-4 text-secondaryLight">{{
+              $t("authorization.pass_key_by")
+            }}</label>
             <tippy
               ref="addToOptions"
               interactive
diff --git a/packages/hoppscotch-app/components/http/Body.vue b/packages/hoppscotch-app/components/http/Body.vue
index 2398659dd..f5c8571b5 100644
--- a/packages/hoppscotch-app/components/http/Body.vue
+++ b/packages/hoppscotch-app/components/http/Body.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
       <span class="flex items-center">
         <label class="font-semibold text-secondaryLight">
@@ -66,9 +66,7 @@
         class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="`${$t('empty.body')}`"
       />
-      <span class="pb-4 text-center">
-        {{ $t("empty.body") }}
-      </span>
+      <span class="pb-4 text-center">{{ $t("empty.body") }}</span>
       <ButtonSecondary
         outline
         :label="`${$t('app.documentation')}`"
diff --git a/packages/hoppscotch-app/components/http/BodyParameters.vue b/packages/hoppscotch-app/components/http/BodyParameters.vue
index 5d8cb6155..e0941f640 100644
--- a/packages/hoppscotch-app/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-app/components/http/BodyParameters.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileRawStickyFold sm:top-upperMobileRawTertiaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ $t("request.body") }}
@@ -50,9 +50,8 @@
           <SmartFileChip
             v-for="(file, fileIndex) in param.value"
             :key="`param-${index}-file-${fileIndex}`"
+            >{{ file.name }}</SmartFileChip
           >
-            {{ file.name }}
-          </SmartFileChip>
         </div>
       </div>
       <span v-else class="flex flex-1">
@@ -130,9 +129,7 @@
         class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="`${$t('empty.body')}`"
       />
-      <span class="pb-4 text-center">
-        {{ $t("empty.body") }}
-      </span>
+      <span class="pb-4 text-center">{{ $t("empty.body") }}</span>
       <ButtonSecondary
         :label="`${$t('add.new')}`"
         filled
diff --git a/packages/hoppscotch-app/components/http/Headers.vue b/packages/hoppscotch-app/components/http/Headers.vue
index 8ed22ef97..0afde5df5 100644
--- a/packages/hoppscotch-app/components/http/Headers.vue
+++ b/packages/hoppscotch-app/components/http/Headers.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight">
-        {{ t("request.header_list") }}
-      </label>
+      <label class="font-semibold text-secondaryLight">{{
+        t("request.header_list")
+      }}</label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -127,9 +127,7 @@
           class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
           :alt="`${t('empty.headers')}`"
         />
-        <span class="pb-4 text-center">
-          {{ t("empty.headers") }}
-        </span>
+        <span class="pb-4 text-center">{{ t("empty.headers") }}</span>
         <ButtonSecondary
           filled
           :label="`${t('add.new')}`"
diff --git a/packages/hoppscotch-app/components/http/Parameters.vue b/packages/hoppscotch-app/components/http/Parameters.vue
index fff3c3aa2..628247046 100644
--- a/packages/hoppscotch-app/components/http/Parameters.vue
+++ b/packages/hoppscotch-app/components/http/Parameters.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("request.parameter_list") }}
@@ -115,9 +115,7 @@
           class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
           :alt="`${t('empty.parameters')}`"
         />
-        <span class="pb-4 text-center">
-          {{ t("empty.parameters") }}
-        </span>
+        <span class="pb-4 text-center">{{ t("empty.parameters") }}</span>
         <ButtonSecondary
           :label="`${t('add.new')}`"
           svg="plus"
diff --git a/packages/hoppscotch-app/components/http/PreRequestScript.vue b/packages/hoppscotch-app/components/http/PreRequestScript.vue
index 8ed475940..dc6be26ed 100644
--- a/packages/hoppscotch-app/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-app/components/http/PreRequestScript.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight">
-        {{ t("preRequest.javascript_code") }}
-      </label>
+      <label class="font-semibold text-secondaryLight">{{
+        t("preRequest.javascript_code")
+      }}</label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
diff --git a/packages/hoppscotch-app/components/http/RawBody.vue b/packages/hoppscotch-app/components/http/RawBody.vue
index 45744a343..e2ad6173e 100644
--- a/packages/hoppscotch-app/components/http/RawBody.vue
+++ b/packages/hoppscotch-app/components/http/RawBody.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileRawStickyFold sm:top-upperMobileRawTertiaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("request.raw_body") }}
diff --git a/packages/hoppscotch-app/components/http/Request.vue b/packages/hoppscotch-app/components/http/Request.vue
index 27820d27c..7fc74dc85 100644
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/packages/hoppscotch-app/components/http/Request.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
+    class="sticky top-0 z-10 flex-none sm:flex sm:flex-shrink-0 p-4 overflow-x-auto sm:space-x-2 bg-primary hide-scrollbar"
   >
     <div
       class="flex flex-1 overflow-auto border rounded min-w-52 border-divider whitespace-nowrap hide-scrollbar"
@@ -48,7 +48,8 @@
         />
       </div>
     </div>
-    <div class="flex">
+
+    <div class="flex mt-2 sm:mt-0">
       <ButtonPrimary
         id="send"
         class="flex-1 rounded-r-none min-w-20"
@@ -117,8 +118,8 @@
         </tippy>
       </span>
       <ButtonSecondary
-        class="ml-2 rounded rounded-r-none"
-        :label="mdAndLarger && COLUMN_LAYOUT ? `${t('request.save')}` : ''"
+        class="flex-1 ml-2 rounded rounded-r-none"
+        :label="COLUMN_LAYOUT ? `${t('request.save')}` : ''"
         filled
         svg="save"
         @click.native="saveRequest()"
@@ -207,7 +208,6 @@
 import { computed, ref, watch } from "@nuxtjs/composition-api"
 import { isLeft, isRight } from "fp-ts/lib/Either"
 import * as E from "fp-ts/Either"
-import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import {
   updateRESTResponse,
   restEndpoint$,
@@ -542,7 +542,4 @@ const isCustomMethod = computed(() => {
 const requestName = useRESTRequestName()
 
 const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")
-
-const breakpoints = useBreakpoints(breakpointsTailwind)
-const mdAndLarger = breakpoints.greater("md")
 </script>
diff --git a/packages/hoppscotch-app/components/http/RequestOptions.vue b/packages/hoppscotch-app/components/http/RequestOptions.vue
index 7082eea3b..b106c2cfd 100644
--- a/packages/hoppscotch-app/components/http/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/http/RequestOptions.vue
@@ -1,5 +1,7 @@
 <template>
-  <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
+  <SmartTabs
+    styles="sticky bg-primary top-upperMobilePrimaryStickyFold sm:top-upperPrimaryStickyFold z-10"
+  >
     <SmartTab
       :id="'params'"
       :label="`${$t('tab.parameters')}`"
diff --git a/packages/hoppscotch-app/components/http/Tests.vue b/packages/hoppscotch-app/components/http/Tests.vue
index b0b695128..711925878 100644
--- a/packages/hoppscotch-app/components/http/Tests.vue
+++ b/packages/hoppscotch-app/components/http/Tests.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("test.javascript_code") }}
diff --git a/packages/hoppscotch-app/components/http/URLEncodedParams.vue b/packages/hoppscotch-app/components/http/URLEncodedParams.vue
index 882b405dd..f63ca29af 100644
--- a/packages/hoppscotch-app/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-app/components/http/URLEncodedParams.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileRawStickyFold sm:top-upperMobileRawTertiaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("request.body") }}
diff --git a/packages/hoppscotch-app/layouts/default.vue b/packages/hoppscotch-app/layouts/default.vue
index fd981850b..dccfdc5e9 100644
--- a/packages/hoppscotch-app/layouts/default.vue
+++ b/packages/hoppscotch-app/layouts/default.vue
@@ -4,7 +4,10 @@
       <Pane v-if="!ZEN_MODE" style="height: auto">
         <AppHeader />
       </Pane>
-      <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
+      <Pane
+        :class="spacerClass"
+        class="flex flex-1 hide-scrollbar !overflow-auto md:mb-0"
+      >
         <Splitpanes
           class="no-splitter"
           :dbl-click-splitter="false"
@@ -12,7 +15,7 @@
         >
           <Pane
             style="width: auto; height: auto"
-            class="hide-scrollbar !overflow-auto flex flex-col"
+            class="hide-scrollbar !overflow-auto hidden md:flex md:flex-col"
           >
             <AppSidenav />
           </Pane>
@@ -31,7 +34,15 @@
           </Pane>
         </Splitpanes>
       </Pane>
-      <Pane style="height: auto">
+
+      <Pane
+        style="height: auto"
+        class="hide-scrollbar !overflow-auto flex flex-col md:hidden block fixed inset-x-0 bottom-0 z-10"
+      >
+        <AppSidenav />
+        <AppFooter />
+      </Pane>
+      <Pane style="height: auto" class="hidden md:inline-block">
         <AppFooter />
       </Pane>
     </Splitpanes>
@@ -41,6 +52,7 @@
 <script lang="ts">
 import {
   defineComponent,
+  computed,
   onBeforeMount,
   useContext,
   useRouter,
@@ -108,6 +120,12 @@ function updateThemes() {
   const bgColor = useSetting("BG_COLOR")
   const fontSize = useSetting("FONT_SIZE")
 
+  const spacerClass = computed(() => {
+    if (fontSize.value === "small") return "spacer-small"
+    if (fontSize.value === "large") return "spacer-large"
+    return "spacer-medium"
+  })
+
   // Initially apply
   onBeforeMount(() => {
     document.documentElement.setAttribute("data-accent", themeColor.value)
@@ -123,6 +141,10 @@ function updateThemes() {
   watch(fontSize, () =>
     document.documentElement.setAttribute("data-font-size", fontSize.value)
   )
+
+  return {
+    spacerClass,
+  }
 }
 
 function defineJumpActions() {
@@ -170,7 +192,7 @@ export default defineComponent({
 
     defineJumpActions()
 
-    updateThemes()
+    const { spacerClass } = updateThemes()
 
     setupSentry()
 
@@ -179,6 +201,7 @@ export default defineComponent({
 
     return {
       mdAndLarger,
+      spacerClass,
       ZEN_MODE: useSetting("ZEN_MODE"),
     }
   },
@@ -236,3 +259,31 @@ export default defineComponent({
   },
 })
 </script>
+
+<style scoped>
+.spacer-small {
+  margin-bottom: 6.1rem;
+}
+
+.spacer-medium {
+  margin-bottom: 6.9rem;
+}
+
+.spacer-large {
+  margin-bottom: 7.8rem;
+}
+
+@media screen and (min-width: 768px) {
+  .spacer-small {
+    margin-bottom: 0rem;
+  }
+
+  .spacer-medium {
+    margin-bottom: 0rem;
+  }
+
+  .spacer-large {
+    margin-bottom: 0rem;
+  }
+}
+</style>
diff --git a/packages/hoppscotch-app/windi.config.js b/packages/hoppscotch-app/windi.config.js
index b6cf9dd59..ca0ed979e 100644
--- a/packages/hoppscotch-app/windi.config.js
+++ b/packages/hoppscotch-app/windi.config.js
@@ -10,6 +10,14 @@ export default defineConfig({
         upperPrimaryStickyFold: "var(--upper-primary-sticky-fold)",
         upperSecondaryStickyFold: "var(--upper-secondary-sticky-fold)",
         upperTertiaryStickyFold: "var(--upper-tertiary-sticky-fold)",
+        upperMobilePrimaryStickyFold: "var(--upper-mobile-primary-sticky-fold)",
+        upperMobileSecondaryStickyFold:
+          "var(--upper-mobile-secondary-sticky-fold)",
+        upperMobileTertiaryStickyFold:
+          "var(--upper-mobile-tertiary-sticky-fold)",
+        upperMobileRawStickyFold: "var(--upper-mobile-raw-sticky-fold)",
+        upperMobileRawTertiaryStickyFold:
+          "var(--upper-mobile-raw-tertiary-sticky-fold)",
         lowerPrimaryStickyFold: "var(--lower-primary-sticky-fold)",
         lowerSecondaryStickyFold: "var(--lower-secondary-sticky-fold)",
         sidebarPrimaryStickyFold: "var(--sidebar-primary-sticky-fold)",