fix: sidebar navigation issues on mobile/tablet viewports

[AbhiVarde]

What does this PR do?

Problem

Organization Pages:

• Clicking hamburger menu showed only blur overlay without sidebar content
• Navigation was completely broken on mobile/tablet devices

Project Pages:

• Sidebar missing essential navigation items (Settings, Feedback, Support) on mobile/tablet
• Incorrect responsive conditions hid important buttons

Modal Issues:

• Feedback and Support modals had extra background overlays
• Modals weren't opening properly due to DropList rendering conflicts

Solution

For Organization Pages:

• Added isOrganizationPage reactive variable in shell.svelte
• Updated sidebar condition to include organization pages: (isProjectPage || isOrganizationPage)
• Passed organizationId prop to Sidebar component
• Display Upgrade button for organization navigation

For Project Pages:

• Fixed Settings button to always show on mobile/tablet with proper divider
• Updated Feedback/Support buttons to use $isTabletViewport (< 1024px)

For Modal Functionality:

• Moved modals outside DropList structure to sidebar root level
• Rendered modals conditionally only when $isTabletViewport is true
• Prevents duplicate modals and overlay conflicts

Changes Made

File: src/lib/layout/shell.svelte

• Added isOrganizationPage reactive variable
• Updated sidebar condition: (isProjectPage || isOrganizationPage)
• Added organizationId={$organization?.$id} prop to Sidebar

File: src/lib/components/sidebar.svelte

• Added organizationId prop to component interface
• Added Upgrade button for organization pages
• Fixed Settings button visibility on mobile/tablet
• Updated Feedback/Support condition to $isTabletViewport
• Moved modals outside DropList to prevent overlay issues

Files: mobileFeedbackModal.svelte & mobileSupportModal.svelte

• Removed code causing extra background overlays

Test Plan

Local Testing Performed:

1. ✅ Organization pages - Sidebar opens with Upgrade, Feedback, Support on mobile/tablet
2. ✅ Project pages - All navigation items visible (Settings, Feedback, Support) on mobile/tablet
3. ✅ Modals open cleanly without extra overlays on all viewport sizes
4. ✅ Desktop viewport - No regression, all features work as before
5. ✅ Smooth transitions between viewport sizes, no layout shifts
6. ✅ Ran pnpm lint and pnpm format - all checks passed

Screenshots

Before Fix: https://github.com/user-attachments/assets/4651a4ed-2da6-4299-bf09-31027fde44c9

After Fix: https://github.com/user-attachments/assets/1a72c7b9-39fa-41cd-ae4c-002ef42e82cf

Related PRs and Issues

Fixes #2484

Have you read the Contributing Guidelines on issues?

Yes, I have read and followed the contributing guidelines.

Summary by CodeRabbit

• New Features

  • Added an upgrade option in the sidebar for organizations without active projects to view/change organization plans.
  • Sidebar now recognizes organization pages and adjusts layout and tablet action buttons; mobile feedback and support modals are rendered for tablet viewports.
  • Feedback menu label and tracking event key updated for consistency.

• Style

  • Adjusted mobile modal theme rules and added styling for the new upgrade button area.