Fix: inconsistent sidebar state on mobile/tablet viewport

[ItzNotABug]

What does this PR do?

Fixes an issue with sidebar always opening on small viewports on databases screens.

Test Plan

Manual.

Screen.Recording.2025-09-04.at.10.04.03.AM.mov

Related PRs and Issues

N/A.

Have you read the Contributing Guidelines on issues?

Yes.

Summary by CodeRabbit

• New Features

  • Improved responsive behavior: the sidebar now remains closed on tablet and mobile after navigation for a cleaner, focused view.

• Bug Fixes

  • Prevented the sub-navigation bar from rendering when database details are unavailable, avoiding empty or misleading headers on certain routes.

• Chores

  • Minor navigation logic adjustments to ensure consistent state transitions across viewports without affecting desktop behavior.

[appwrite]

Console

Project ID: 688b7bf400350cbd60e9

Sites (2)

Site	Status	Logs	Preview	QR
console-qa 688b7cf6003b1842c9dc	Ready	View Logs	Preview URL
console-cloud 688b7c18002b9b871a8f	Ready	View Logs	Preview URL

Note

You can use Avatars API to generate QR code for any text or URLs.

[coderabbitai]

Warning

Rate limit exceeded

@ItzNotABug has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 8 minutes and 26 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between bc46fde and d13ad73.

📒 Files selected for processing (1)

• src/lib/layout/shell.svelte (2 hunks)

Walkthrough

• In src/lib/layout/shell.svelte, imported isTabletViewport from $lib/stores/viewport and added an early return in afterNavigate: when $isTabletViewport is true, sets state to 'closed' and skips subsequent navigation logic for database route transitions. Non-tablet behavior remains as before.
• In src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte, modified the non-tablet branch to render Navbar.Base only when data?.database?.name is truthy, changing {:else} to {:else if data?.database?.name}. Other layout and BottomSheet/table-list logic remain unchanged.

Suggested reviewers

• HarshMN2345
• TorstenDittmann

✨ Finishing Touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-sidebar-on-small-viewport

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte (1)

137-159: Avoid blank mobile header when database name is unavailable

Switching {:else} to {:else if data?.database?.name} can render no header on mobile/tablet while data is loading or absent, removing the table selector and causing layout shift. Consider adding a fallback {:else} that keeps the Navbar visible with a placeholder to preserve UX.

-{:else if data?.database?.name}
+{:else if data?.database?.name}
     <Navbar.Base>
       <div slot="left">
         <Layout.Stack direction="row" alignItems="center" gap="s">
           <Icon icon={IconDatabase} size="s" color="--neutral-300" />
           <Link.Anchor
             href={`${base}/project-${region}-${project}/databases/database-${databaseId}`}
             variant="quiet-muted">
             {data.database.name}
           </Link.Anchor>

           <span style:margin-left="8px">/</span>

           <Button text extraCompact on:click={() => (openBottomSheet = !openBottomSheet)}>
             <Typography.Text variant="m-400">
               {selectedTable?.name}
             </Typography.Text>
             <Icon icon={IconChevronDown} size="s" />
           </Button>
         </Layout.Stack>
       </div>
     </Navbar.Base>
-{/if}
+{:else}
+    <Navbar.Base>
+      <div slot="left">
+        <Layout.Stack direction="row" alignItems="center" gap="s">
+          <Icon icon={IconDatabase} size="s" color="--neutral-300" />
+          <Typography.Text variant="m-400">Database</Typography.Text>
+        </Layout.Stack>
+      </div>
+    </Navbar.Base>
+{/if}

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 1c2e114 and bc46fde.

📒 Files selected for processing (2)

• src/lib/layout/shell.svelte (2 hunks)
• src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: build
• GitHub Check: e2e

🔇 Additional comments (2)

src/lib/layout/shell.svelte (2)

21-21: Import looks good

Using isTabletViewport here is appropriate to gate mobile/tablet behavior.

---

105-123: I need to inspect the codebase to verify the reactive state derivation and transitions. Running a few scripts for context and pattern searches.