Fix: empty-state

[ItzNotABug]

What does this PR do?

Fixes empty state issue on real device.

Test Plan

Manual.

Before	After

Related PRs and Issues

N/A.

Have you read the Contributing Guidelines on issues?

Yes.

Summary by CodeRabbit

• Style
  • Enhanced responsive design with improved layout adjustments when no custom columns are configured, including optimized spacing and better visibility management on smaller viewports.

[appwrite]

Console (appwrite/console)

Project ID: 688b7bf400350cbd60e9

Sites (1)

Site	Status	Logs	Preview	QR
console-stage 688b7cf6003b1842c9dc	Ready	View Logs	Preview URL

Tip

SSR frameworks are fully supported with configurable build runtimes

[coderabbitai]

Walkthrough

This change modifies the emptySheet.svelte component to add responsive styling handling for cases where no custom columns exist. A conditional class binding applies the no-custom-columns class when the customColumns array is empty. New CSS rules then hide the spreadsheet wrapper and adjust the bottom fade bar on viewports below 768px. CSS variables for top-actions-spacing are adjusted within different data modes, and a global opacity rule is applied to the console container when the no-custom-columns state is active.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• Verify the conditional class binding logic correctly identifies when customColumns is empty
• Test the responsive behavior changes on viewports below 768px (768px breakpoint)
• Confirm CSS variable adjustments (--top-actions-spacing: 50% and 40%) don't conflict with existing styles in data-mode="rows" and data-mode="indexes" contexts
• Validate the global opacity rule for .console-container doesn't unintentionally hide content in other states

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Fix: empty-state' is directly related to the changeset, which addresses styling issues in the empty state UI of a database table interface.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-empty-states

---

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

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

254-254: Consider using strict equality for clarity.

The condition customColumns.length <= 0 is functionally correct, but customColumns.length === 0 is more precise since array lengths cannot be negative.

-    class:no-custom-columns={customColumns.length <= 0}
+    class:no-custom-columns={customColumns.length === 0}

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f7f3abc and 5a92fbe.

📒 Files selected for processing (1)

• src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte (4 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-09-30T07:41:06.679Z

Learnt from: ItzNotABug
Repo: appwrite/console PR: 2425
File: src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte:454-468
Timestamp: 2025-09-30T07:41:06.679Z
Learning: In `src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte`, the column suggestions API (console.suggestColumns) has a maximum limit of 7 columns returned, which aligns with the initial placeholder count of 7 in customColumns.

Applied to files:

• src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte

⏰ 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