Fixed code audit modal on mobile (#4287)

packages/docs/components/HeaderBanner.vue

@@ -169,7 +169,6 @@ const hide = () => {
   }
 
   &__buttons {
-    z-index: 10;
     display: flex;
     align-items: center;
 

packages/docs/components/Recaptcha.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="elementRef" />
+  <div ref="elementRef" :class="{compact}" />
 </template>
 
 <script setup lang='ts'>
@@ -11,6 +11,10 @@ const emit = defineEmits<{
   (e: "error"): void;
 }>()
 
+const breakpoint = useBreakpoint()
+
+const compact = computed(() => breakpoint.current && ['xs'].includes(breakpoint.current))
+
 const elementRef = ref<HTMLElement>();
 const widgetIdRef = ref<string>();
 
@@ -45,5 +49,8 @@ watchEffect(() => {
 </script>
 
 <style lang="scss" scoped>
-
+.compact {
+  transform: scale(0.77);
+  transform-origin: left;
+}
 </style>

packages/docs/components/landing/forms/RequestAuditForm.vue

@@ -31,16 +31,16 @@
         placeholder="Email"
         required
         name="Email"
-        class="w-full mt-3"
+        class="w-full mt-3 form__input"
       />
       <VaTextarea
         v-model="description"
         placeholder="Project link, tech stack, and details"
         required
         name="Field 3"
-        class="w-full mt-3"
+        class="w-full mt-3 form__input"
         :resize="false"
-        :max-rows="4"
+        :max-rows="3"
       />
       <Recaptcha
         ref="recaptchaRef"
@@ -56,7 +56,7 @@
       <div v-if="submitError" class="form__notice form__notice--error mt-6">
         Oops! Something went wrong while submitting the form. Please try again or contact us directly at <a href="mailto:[email protected]" target="_new">[email protected]</a>. We're here to help and ensure your inquiry is handled promptly.
       </div>
-      <div v-else class="form__notice mt-6">
+      <div v-else class="form__notice mt-6 xs:mt-3">
         Click "Submit!" to consent to processing your data by Epicmax Georgia LLC for marketing purposes, including sending emails. For details see our <a href="https://www.iubenda.com/privacy-policy/90200659" target="_blank">Privacy Policy</a>
       </div>
     </div>
@@ -137,18 +137,24 @@ const submitForm = async () => {
     max-width: 100%;
   }
 
-  &__text {
+  &__text,
+  &__input {
     font-size: 0.9rem;
   }
 
   &__title {
     margin-top: 20px;
     margin-bottom: 34px;
+
+    @include xs(margin-top, 0);
+    @include xs(margin-bottom, 12px);
   }
 
   &__notice {
-    font-size: 13px;
     color: var(--va-secondary);
+    font-size: 13px;
+
+    @include xs(font-size, 10px);
   }
 
   &__notice--error {
@@ -160,5 +166,7 @@ h3 {
   @include subtitle-font();
 
   font-size: 2.5rem !important;
+
+  @include xs(font-size, 1.75rem !important);
 }
 </style>

packages/docs/composables/useRecaptcha.ts

@@ -3,18 +3,20 @@ import { isServer } from 'vuestic-ui/src/utils/ssr'
 
 let addedScript = false;
 
-interface Recaptcha {
+export interface RecaptchaRenderParams {
+  sitekey: string;
+  theme?:	'dark' | 'light';
+  size?:	'compact' | 'normal';
+  tabindex?: number;
+  callback?: (token: string) => void;
+  'expired-callback'?: () => void;
+  'error-callback'?: () => void;
+}
+
+export interface Recaptcha {
   render(
     container: string | HTMLElement,
-    parameters: {
-      sitekey: string;
-      theme?:	'dark' | 'light';
-      size?:	'compact' | 'normal';
-      tabindex?: number;
-      callback?: (token: string) => void;
-      'expired-callback'?: () => void;
-      'error-callback'?: () => void;
-    }
+    parameters: RecaptchaRenderParams
   ): string;
   reset(widgetId?: string): void;
 }