fix: broken sticky sections on font size

assets/scss/styles.scss

@@ -72,7 +72,7 @@ body {
 }
 
 .material-icons {
-  font-size: 1rem !important;
+  font-size: 1rem;
 }
 
 .svg-icons {
@@ -144,6 +144,11 @@ a {
   }
 }
 
+[interactive] > div {
+  @apply flex;
+  @apply h-full;
+}
+
 .tippy-content > div {
   @apply flex flex-col;
   @apply max-h-48;
@@ -215,11 +220,13 @@ pre.ace_editor {
 
   &::after {
     @apply absolute;
-    @apply inline-block;
+    @apply flex;
+    @apply inset-y-0;
+    @apply items-center;
+    @apply justify-center;
     @apply pointer-events-none;
     @apply font-icon;
     @apply text-secondaryLight;
-    @apply top-2.5;
     @apply right-3;
 
     content: "\e313";

assets/scss/themes.scss

@@ -303,6 +303,20 @@
   --font-size: 0.75rem;
   // Line height
   --line-height: 1rem;
+  // Upper primary sticky fold
+  --upper-primary-sticky-fold: 4.125rem;
+  // Upper secondary sticky fold
+  --upper-secondary-sticky-fold: 6.125rem;
+  // Upper tertiary sticky fold
+  --upper-tertiary-sticky-fold: 8.125rem;
+  // Lower primary sticky fold
+  --lower-primary-sticky-fold: 3rem;
+  // Lower secondary sticky fold
+  --lower-secondary-sticky-fold: 5rem;
+  // Sidebar primary sticky fold
+  --sidebar-primary-sticky-fold: 2rem;
+  // Sidebar secondary sticky fold
+  --sidebar-secondary-sticky-fold: 4rem;
 }
 
 @mixin fontMedium {
@@ -310,6 +324,20 @@
   --font-size: 0.875rem;
   // Line height
   --line-height: 1.25rem;
+  // Upper primary sticky fold
+  --upper-primary-sticky-fold: 4.375rem;
+  // Upper secondary sticky fold
+  --upper-secondary-sticky-fold: 6.625rem;
+  // Upper tertiary sticky fold
+  --upper-tertiary-sticky-fold: 8.875rem;
+  // Lower primary sticky fold
+  --lower-primary-sticky-fold: 3.25rem;
+  // Lower secondary sticky fold
+  --lower-secondary-sticky-fold: 5.5rem;
+  // Sidebar primary sticky fold
+  --sidebar-primary-sticky-fold: 2.25rem;
+  // Sidebar secondary sticky fold
+  --sidebar-secondary-sticky-fold: 4.5rem;
 }
 
 @mixin fontLarge {
@@ -317,6 +345,20 @@
   --font-size: 1rem;
   // Line height
   --line-height: 1.5rem;
+  // Upper primary sticky fold
+  --upper-primary-sticky-fold: 4.625rem;
+  // Upper secondary sticky fold
+  --upper-secondary-sticky-fold: 7.125rem;
+  // Upper tertiary sticky fold
+  --upper-tertiary-sticky-fold: 9.625rem;
+  // Lower primary sticky fold
+  --lower-primary-sticky-fold: 3.5rem;
+  // Lower secondary sticky fold
+  --lower-secondary-sticky-fold: 6rem;
+  // Sidebar primary sticky fold
+  --sidebar-primary-sticky-fold: 2.5rem;
+  // Sidebar secondary sticky fold
+  --sidebar-secondary-sticky-fold: 5rem;
 }
 
 :root[data-font-size="xs"] {

components/collections/graphql/index.vue

@@ -4,7 +4,7 @@
     :class="{ 'rounded border border-divider': savingMode }"
   >
     <div
-      class="flex flex-col top-8 z-10 sticky"
+      class="flex flex-col top-sidebarPrimaryStickyFold z-10 sticky"
       :class="{ 'bg-primary': !savingMode }"
     >
       <div v-if="showCollActions" class="search-wrapper">

components/collections/index.vue

@@ -5,7 +5,7 @@
   >
     <div
       class="bg-primary rounded-t flex flex-col top-0 z-10 sticky"
-      :class="{ '!top-8': !saveRequest && !doc }"
+      :class="{ '!top-sidebarPrimaryStickyFold': !saveRequest && !doc }"
     >
       <div v-if="!saveRequest" class="search-wrapper">
         <input

components/environments/index.vue

@@ -1,6 +1,15 @@
 <template>
   <AppSection label="environments">
-    <div class="bg-primary rounded-t flex flex-col top-8 z-10 sticky">
+    <div
+      class="
+        bg-primary
+        rounded-t
+        flex flex-col
+        top-sidebarPrimaryStickyFold
+        z-10
+        sticky
+      "
+    >
       <div class="select-wrapper">
         <select
           v-model="selectedEnvironmentIndex"

components/history/index.vue

@@ -5,7 +5,7 @@
         bg-primaryLight
         border-b border-dividerLight
         flex
-        top-8
+        top-sidebarPrimaryStickyFold
         z-10
         sticky
       "

components/http/BodyParameters.vue

@@ -6,7 +6,7 @@
         border-b border-dividerLight
         flex flex-1
         pl-4
-        top-24
+        top-upperSecondaryStickyFold
         z-10
         sticky
         items-center

components/http/Headers.vue

@@ -6,7 +6,7 @@
         border-b border-dividerLight
         flex flex-1
         pl-4
-        top-24
+        top-upperSecondaryStickyFold
         z-10
         sticky
         items-center

components/http/Parameters.vue

@@ -5,8 +5,8 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
+        top-upperSecondaryStickyFold
         pl-4
-        top-24
         z-10
         sticky
         items-center

components/http/PreRequestScript.vue

@@ -6,7 +6,7 @@
         border-b border-dividerLight
         flex flex-1
         pl-4
-        top-24
+        top-upperSecondaryStickyFold
         z-10
         sticky
         items-center

components/http/RawBody.vue

@@ -6,7 +6,7 @@
         border-b border-dividerLight
         flex flex-1
         pl-4
-        top-24
+        top-upperSecondaryStickyFold
         z-10
         sticky
         items-center

components/http/Request.vue

@@ -20,9 +20,8 @@
                 cursor-pointer
                 flex
                 font-semibold font-mono
-                h-8
                 text-secondaryDark
-                py-1
+                py-2
                 px-4
                 transition
                 w-28
@@ -75,7 +74,7 @@
           font-semibold font-mono
           flex-1
           text-secondaryDark
-          py-1
+          py-2
           px-4
           transition
           truncate
@@ -106,7 +105,11 @@
           arrow
         >
           <template #trigger>
-            <ButtonPrimary class="rounded-l-none" icon="keyboard_arrow_down" />
+            <ButtonPrimary
+              class="rounded-l-none"
+              outline
+              icon="keyboard_arrow_down"
+            />
           </template>
           <SmartItem
             :label="$t('import.curl')"
@@ -136,7 +139,7 @@
         </tippy>
       </span>
       <ButtonSecondary
-        class="rounded-r-none h-8 ml-2"
+        class="rounded-r-none ml-2"
         :label="$t('request.save')"
         :shortcut="[getSpecialKey(), 'S']"
         outline
@@ -155,7 +158,7 @@
             <ButtonSecondary
               icon="keyboard_arrow_down"
               outline
-              class="rounded-l-none h-8"
+              class="rounded-l-none"
             />
           </template>
           <input

components/http/Tests.vue

@@ -1,13 +1,13 @@
 <template>
-  <SmartTabs styles="sticky top-24 z-20">
+  <SmartTabs styles="sticky top-upperSecondaryStickyFold z-20">
     <SmartTab id="script" :label="$t('test.script')" :selected="true">
       <div
         class="
           bg-primary
           border-b border-dividerLight
           flex flex-1
+          top-upperTertiaryStickyFold
           pl-4
-          top-32
           z-10
           sticky
           items-center
@@ -54,8 +54,8 @@
             bg-primary
             border-b border-dividerLight
             flex flex-1
+            top-upperTertiaryStickyFold
             pl-4
-            top-32
             z-10
             sticky
             items-center

components/lenses/ResponseBodyRenderer.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartTabs styles="sticky z-10 top-12">
+  <SmartTabs styles="sticky z-10 top-lowerPrimaryStickyFold">
     <SmartTab
       v-for="(lens, index) in validLenses"
       :id="lens.lensName"

components/lenses/renderers/HTMLLensRenderer.vue

@@ -5,7 +5,7 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        top-20
+        top-lowerSecondaryStickyFold
         z-10
         sticky
         items-center

components/lenses/renderers/ImageLensRenderer.vue

@@ -5,7 +5,7 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        top-20
+        top-lowerSecondaryStickyFold
         z-10
         sticky
         items-center

components/lenses/renderers/JSONLensRenderer.vue

@@ -5,7 +5,7 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        top-20
+        top-lowerSecondaryStickyFold
         z-10
         sticky
         items-center

components/lenses/renderers/RawLensRenderer.vue

@@ -5,7 +5,7 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        top-20
+        top-lowerSecondaryStickyFold
         z-10
         sticky
         items-center

components/lenses/renderers/XMLLensRenderer.vue

@@ -5,7 +5,7 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        top-20
+        top-lowerSecondaryStickyFold
         z-10
         sticky
         items-center

components/realtime/Mqtt.vue

@@ -18,11 +18,11 @@
                     font-semibold font-mono
                     text-secondaryDark
                     w-full
-                    py-1
+                    py-2
                     px-4
                     transition
                     truncate
-                    focus:outline-none focus:border-accent
+                    focus:border-accent focus:outline-none
                   "
                   :placeholder="$t('url')"
                 />

components/realtime/Socketio.vue

@@ -21,11 +21,11 @@
                     flex-1
                     text-secondaryDark
                     w-full
-                    py-1
+                    py-2
                     px-4
                     transition
                     truncate
-                    focus:outline-none focus:border-accent
+                    focus:border-accent focus:outline-none
                   "
                   :placeholder="$t('url')"
                   @keyup.enter="urlValid ? toggleConnection() : null"
@@ -41,11 +41,11 @@
                     flex-1
                     text-secondaryDark
                     w-full
-                    py-1
+                    py-2
                     px-4
                     transition
                     truncate
-                    focus:outline-none focus:border-accent
+                    focus:border-accent focus:outline-none
                   "
                   spellcheck="false"
                 />

components/realtime/Sse.vue

@@ -16,7 +16,7 @@
                 font-semibold font-mono
                 text-secondaryDark
                 w-full
-                py-1
+                py-2
                 px-4
                 transition
                 truncate

components/realtime/Websocket.vue

@@ -16,11 +16,11 @@
                     font-semibold font-mono
                     text-secondaryDark
                     w-full
-                    py-1
+                    py-2
                     px-4
                     transition
                     truncate
-                    focus:outline-none focus:border-accent
+                    focus:border-accent focus:outline-none
                   "
                   type="url"
                   spellcheck="false"
@@ -45,8 +45,8 @@
               bg-primary
               border-b border-dividerLight
               flex flex-1
+              top-upperPrimaryStickyFold
               pl-4
-              top-16
               z-10
               sticky
               items-center

components/smart/FontSizePicker.vue

@@ -18,13 +18,9 @@
             :label="`${fontSizes.find(({ code }) => code == active.code).name}`"
           />
         </template>
-        <!-- text-xs -->
-        <!-- text-sm -->
-        <!-- text-base -->
         <SmartItem
           v-for="(size, index) in fontSizes"
           :key="`size-${index}`"
-          :class="`text-${size.code}`"
           :label="size.name"
           @click.native="
             setActiveFont(size)

pages/graphql.vue

@@ -18,11 +18,11 @@
                     font-semibold font-mono
                     text-secondaryDark
                     w-full
-                    py-1
+                    py-2
                     px-4
                     transition
                     truncate
-                    focus:outline-none focus:border-accent
+                    focus:border-accent focus:outline-none
                   "
                   :placeholder="$t('url')"
                   @keyup.enter="onPollSchemaClick()"
@@ -36,7 +36,7 @@
                 />
               </div>
             </div>
-            <SmartTabs styles="sticky top-16 z-10">
+            <SmartTabs styles="sticky top-upperPrimaryStickyFold z-10">
               <SmartTab :id="'query'" :label="$t('query')" :selected="true">
                 <AppSection label="query">
                   <div
@@ -44,8 +44,8 @@
                       bg-primary
                       border-b border-dividerLight
                       flex flex-1
+                      top-upperSecondaryStickyFold
                       pl-4
-                      top-24
                       z-10
                       sticky
                       items-center
@@ -111,8 +111,8 @@
                       bg-primary
                       border-b border-dividerLight
                       flex flex-1
+                      top-upperSecondaryStickyFold
                       pl-4
-                      top-24
                       z-10
                       sticky
                       items-center
@@ -162,8 +162,8 @@
                       bg-primary
                       border-b border-dividerLight
                       flex flex-1
+                      top-upperSecondaryStickyFold
                       pl-4
-                      top-24
                       z-10
                       sticky
                       items-center
@@ -209,7 +209,7 @@
                         flex
                         font-semibold font-mono
                         flex-1
-                        py-1
+                        py-2
                         px-4
                         focus:outline-none
                       "
@@ -226,7 +226,7 @@
                         flex
                         font-semibold font-mono
                         w-full
-                        py-1
+                        py-2
                         px-4
                         focus:outline-none
                       "
@@ -385,7 +385,15 @@
           <SmartTabs styles="sticky z-10 top-0">
             <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
               <AppSection label="docs">
-                <div class="bg-primaryLight flex flex-col top-8 z-10 sticky">
+                <div
+                  class="
+                    bg-primaryLight
+                    flex flex-col
+                    top-sidebarPrimaryStickyFold
+                    z-10
+                    sticky
+                  "
+                >
                   <div class="search-wrapper">
                     <input
                       v-model="graphqlFieldsFilterText"
@@ -399,8 +407,8 @@
                         py-2
                         pr-2
                         pl-9
-                        focus:outline-none
                         truncate
+                        focus:outline-none
                       "
                     />
                   </div>
@@ -408,7 +416,7 @@
                 <SmartTabs
                   ref="gqlTabs"
                   styles="
-                    border-t border-dividerLight sticky z-8 top-16"
+                    border-t border-dividerLight sticky z-8 top-sidebarSecondaryStickyFold"
                 >
                   <div class="gqlTabs">
                     <SmartTab
@@ -520,8 +528,8 @@
                     bg-primary
                     border-b border-dividerLight
                     flex flex-1
+                    top-sidebarPrimaryStickyFold
                     pl-4
-                    top-8
                     z-10
                     sticky
                     items-center

pages/index.vue

@@ -4,7 +4,7 @@
       <Splitpanes :dbl-click-splitter="false" horizontal>
         <Pane class="hide-scrollbar !overflow-auto">
           <HttpRequest />
-          <SmartTabs styles="sticky top-16 z-10">
+          <SmartTabs styles="sticky top-upperPrimaryStickyFold z-10">
             <SmartTab
               :id="'params'"
               :label="$t('parameters')"

windi.config.js

@@ -6,6 +6,15 @@ export default defineConfig({
       center: true,
     },
     extend: {
+      inset: {
+        upperPrimaryStickyFold: "var(--upper-primary-sticky-fold)",
+        upperSecondaryStickyFold: "var(--upper-secondary-sticky-fold)",
+        upperTertiaryStickyFold: "var(--upper-tertiary-sticky-fold)",
+        lowerPrimaryStickyFold: "var(--lower-primary-sticky-fold)",
+        lowerSecondaryStickyFold: "var(--lower-secondary-sticky-fold)",
+        sidebarPrimaryStickyFold: "var(--sidebar-primary-sticky-fold)",
+        sidebarSecondaryStickyFold: "var(--sidebar-secondary-sticky-fold)",
+      },
       colors: {
         primary: "var(--primary-color)",
         primaryLight: "var(--primary-light-color)",