update: feedback modal.

src/lib/components/feedback/evaluation.svelte

@@ -5,11 +5,8 @@
 </script>
 
 <fieldset class="u-margin-block-start-8 u-min-width-0">
-    <legend class="label is-required u-margin-0 u-line-height-1-5 u-bold">
-        <slot />
-    </legend>
     <ol
-        class="u-flex u-main-space-between u-margin-block-start-24 u-overflow-x-auto u-gap-6"
+        class="u-flex u-main-space-between u-overflow-x-auto u-gap-6"
         style="padding-block: 0.13rem">
         {#each Array(11) as _, i}
             <li>

src/lib/components/feedback/feedback.svelte

@@ -42,10 +42,7 @@
     }
 </script>
 
-<section
-    class="u-flex u-flex-vertical u-gap-24"
-    class:drop-section={!isMobile}
-    class:u-padding-24={!isMobile}>
+<section class="u-flex u-flex-vertical u-gap-24" class:drop-section={!isMobile}>
     <header class="u-flex u-flex-vertical u-gap-4">
         {#if !isMobile}
             <Typography.Title size="s">Feedback</Typography.Title>
@@ -66,3 +63,13 @@
         </div>
     </Form>
 </section>
+
+<style lang="scss">
+    .drop-section {
+        padding: 1rem;
+
+        @media (max-width: 768px) {
+            padding: 0;
+        }
+    }
+</style>

src/lib/components/feedback/feedbackNPS.svelte

@@ -1,15 +1,11 @@
 <script lang="ts">
     import Evaluation from './evaluation.svelte';
     import { feedbackData } from '$lib/stores/feedback';
-    import { Typography } from '@appwrite.io/pink-svelte';
     import { FormList, InputTextarea } from '$lib/elements/forms';
 </script>
 
 <FormList>
-    <Evaluation bind:value={$feedbackData.value}>
-        <Typography.Text variant="m-400" size="m"
-            >How likely are you to recommend Appwrite to a friend or colleague?</Typography.Text>
-    </Evaluation>
+    <Evaluation bind:value={$feedbackData.value} />
     {#if $feedbackData.value !== null}
         <!-- TODO: @itznotabug, helper is a plain string atm, cannot add html/anchor for Discord link -->
         <InputTextarea

src/lib/layout/shell.svelte

@@ -92,10 +92,6 @@
 
         return undefined;
     };
-
-    $: {
-        console.log($isSidebarOpen);
-    }
 </script>
 
 <svelte:window bind:scrollY={y} on:resize={handleResize} />
@@ -180,7 +176,9 @@
         z-index: 10;
         background-color: #56565c1a;
         backdrop-filter: blur(5px);
-        transition: backdrop-filter 0.5s ease-in-out;
+        transition:
+            backdrop-filter 0.5s ease-in-out,
+            background-color 0.35s ease-in-out;
 
         @media (min-width: 1024px) {
             display: none;

src/lib/stores/feedback.ts

@@ -33,6 +33,7 @@ export const feedbackOptions: FeedbackOption[] = [
     },
     {
         type: 'nps',
+        desc: 'How likely are you to recommend Appwrite to a friend or colleague?',
         component: FeedbackNps
     }
 ];

src/routes/+layout.svelte

@@ -15,7 +15,8 @@
     import { loading } from '$routes/store';
     import { Root } from '@appwrite.io/pink-svelte';
     import { ThemeDark, ThemeLight, ThemeDarkCloud, ThemeLightCloud } from '../themes';
-    import { updateViewport } from '$lib/stores/viewport';
+    import { isSmallViewport, updateViewport } from '$lib/stores/viewport';
+    import { feedback } from '$lib/stores/feedback';
 
     function resolveTheme(theme: AppStore['themeInUse']) {
         switch (theme) {
@@ -78,6 +79,13 @@
         }
 
         loading.set(false);
+
+        isSmallViewport.subscribe(() => {
+            // reset the feedback form if the viewport changed else it requires dual click.
+            if ($feedback.show) {
+                feedback.toggleFeedback();
+            }
+        });
     });
 
     afterNavigate((navigation) => {