fix: mobile feedback issues

Author: HarshMN2345

src/lib/components/drop.svelte

@@ -141,7 +141,8 @@
     bind:this={tooltip}
     class:u-width-full-line={fullWidth}
     style:--arrow-size={`${arrowSize}px`}
-    style:z-index="21">
+    style:z-index="21"
+    style:pointer-events={show ? 'auto' : 'none'}>
     <div
         class="drop-arrow"
         class:is-popover={isPopover}

src/lib/components/support.svelte

@@ -88,7 +88,7 @@
                 </div>
 
                 {#if option.showSupport}
-                    <div class="u-flex u-gap-12 u-cross-center">
+                    <div class="support-premium-row">
                         {#if !hasPremiumSupport}
                             <Button
                                 href={upgradeURL}
@@ -113,14 +113,13 @@
                             </Button>
                         {/if}
 
-                        <div class="u-flex u-gap-6 u-cross-center">
+                        <div class="support-hours">
                             <span
                                 aria-hidden="true"
                                 class="{isSupportOnline()
                                     ? 'icon-check-circle u-color-text-success'
                                     : 'icon-x-circle'} u-padding-block-end-1"></span>
-
-                            {supportTimings}
+                            <span class="support-hours-text">{supportTimings}</span>
                         </div>
                     </div>
                 {:else}
@@ -194,4 +193,39 @@
         /* override required due to the card's background color */
         background: var(--bgcolor-neutral-default, #fafafb) !important;
     }
+
+    .support-premium-row {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 0.75rem 1rem;
+    }
+
+    .support-hours {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        min-width: 0;
+    }
+
+    .support-hours-text {
+        font-size: var(--font-size-xs, 0.75rem);
+        line-height: 1.35;
+        color: var(--fgcolor-neutral-secondary, #56565c);
+    }
+
+    :global(.theme-dark) .support-hours-text {
+        color: var(--fgcolor-neutral-secondary, #a0a0a8);
+    }
+
+    @media (max-width: 520px) {
+        .support-premium-row {
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .support-hours {
+            padding-inline-start: 0.125rem;
+        }
+    }
 </style>

src/lib/layout/shell.svelte

@@ -25,6 +25,14 @@
     export let showSideNavigation = false;
     export let selectedProject: Models.Project = null;
 
+    /** Only treat `page.data.project` as active outside project routes (e.g. account, org) it can linger. */
+    $: activeProject =
+        selectedProject &&
+        ($page.route.id?.includes('project-[region]-[project]') ||
+            $page.url.pathname.includes('/project-'))
+            ? selectedProject
+            : null;
+
     // variables
     let yOnMenuOpen: number;
     let showAccountMenu = false;
@@ -52,23 +60,21 @@
     }
 
     function getProgressCard() {
-        if (selectedProject && !hasOnboardingDismissed(selectedProject.$id, $user)) {
-            const { platforms, pingCount } = selectedProject;
-            let percentage = 33;
-
-            if (platforms.length > 0 && pingCount === 0) {
-                percentage = 66;
-            } else if (pingCount > 0) {
-                percentage = 100;
-            }
+        if (!activeProject || hasOnboardingDismissed(activeProject.$id, $user)) return undefined;
 
-            return {
-                title: 'Get started',
-                percentage
-            };
+        const { platforms, pingCount } = activeProject;
+        let percentage = 33;
+
+        if (platforms.length > 0 && pingCount === 0) {
+            percentage = 66;
+        } else if (pingCount > 0) {
+            percentage = 100;
         }
 
-        return undefined;
+        return {
+            title: 'Get started',
+            percentage
+        };
     }
 
     function handleResize() {
@@ -185,7 +191,7 @@
             };
         }),
 
-        currentProject: selectedProject
+        currentProject: activeProject
     };
 
     $: state = $isSidebarOpen ? 'open' : 'closed';
@@ -194,8 +200,8 @@
 
     $: shouldRenderSidebar =
         !$isNewWizardStatusOpen && showSideNavigation && !$showOnboardingAnimation;
-    $: hasSidebarSpace = shouldRenderSidebar && !$isTabletViewport && !!selectedProject;
-    $: isProjectBlocked = getIsProjectBlocked(selectedProject);
+    $: hasSidebarSpace = shouldRenderSidebar && !$isTabletViewport && !!activeProject;
+    $: isProjectBlocked = getIsProjectBlocked(activeProject);
     $: {
         if ($isSidebarOpen) {
             closeOpenDialogs();
@@ -219,6 +225,7 @@
 <main
     class:has-alert={$activeHeaderAlert?.show}
     class:is-open={$showSubNavigation}
+    class:is-sidebar-open={$isSidebarOpen}
     class:u-hide={$wizard.show || $wizard.cover}
     class:is-fixed-layout={$activeHeaderAlert?.show}
     class:no-header={!showHeader || $showOnboardingAnimation}
@@ -230,7 +237,7 @@
     <div class="shell-sidebar-area" inert={isProjectBlocked || undefined}>
         {#if shouldRenderSidebar}
             <Sidebar
-                project={selectedProject}
+                project={activeProject}
                 progressCard={getProgressCard()}
                 avatar={navbarProps.avatar}
                 bind:subNavigation
@@ -247,7 +254,7 @@
     <div
         class="content"
         class:has-transition={showContentTransition}
-        class:icons-content={state === 'icons' && selectedProject}
+        class:icons-content={state === 'icons' && activeProject}
         class:no-sidebar={!hasSidebarSpace}>
         <section class="main-content" data-test={showSideNavigation}>
             {#if $page.data?.header}
@@ -278,6 +285,12 @@
         z-index: 20;
     }
 
+    @media (max-width: 1023px) {
+        main.is-sidebar-open .content {
+            pointer-events: none;
+        }
+    }
+
     .content {
         width: 100%;
 

src/routes/(console)/+layout.svelte

@@ -34,6 +34,7 @@
     import { feedback } from '$lib/stores/feedback';
     import { hasStripePublicKey, isCloud, VARS } from '$lib/system';
     import { stripe } from '$lib/stores/stripe';
+    import MobileFeedbackModal from './wizard/feedback/mobileFeedbackModal.svelte';
     import MobileSupportModal from './wizard/support/mobileSupportModal.svelte';
     import { showSupportModal } from './wizard/support/store';
     import { activeHeaderAlert, consoleVariables } from './store';
@@ -341,6 +342,10 @@
 
 <Create bind:show={$newOrgModal} />
 
+{#if $feedback.show}
+    <MobileFeedbackModal />
+{/if}
+
 {#if $showSupportModal}
     <MobileSupportModal bind:show={$showSupportModal}></MobileSupportModal>
 {/if}