Fix: width calc and minimum width

[ItzNotABug]

What does this PR do?

If less columns are suggested vs the dummy columns shown in thinking mode, the UI slightly broke due to width constraints, this fixes it correctly.

Test Plan

Manual.

Related PRs and Issues

N/A.

Have you read the Contributing Guidelines on issues?

Yes.

Summary by CodeRabbit

• Style
  • Standardizes and improves column sizing in the suggestions view for a more consistent layout and better readability.
  • Improves placeholder sizing and overlay positioning for smoother visuals during loading and empty states.
• Bug Fixes
  • Hides the range overlay when the actions boundary is missing to prevent mispositioned overlays.
• Refactor
  • Moves to dynamic column width calculation to better adapt to viewport space and distribute extra space across columns.

[appwrite]

Console

Project ID: 688b7bf400350cbd60e9

Sites (2)

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

Note

Appwrite has a Discord community with over 16 000 members.

[coderabbitai]

Walkthrough

Reworks column width and overlay logic in the suggestions empty view. Overlay width is computed as the distance to the actions column boundary (actionsLeft - left) and the overlay is hidden and the function returns early if the actions column is missing. getRowColumns now computes widths dynamically: fixed min widths for id/actions/selection, per-column base widths from getColumnWidth bounded by the min, sums total used space, distributes extra viewport space across custom columns, and returns custom columns with dynamic width objects ({ min: computedWidth }) while keeping fixed widths for id and actions.

Possibly related PRs

• Fix: horizontal scrolling #2425: Modifies the same suggestions empty.svelte file and addresses related column/layout/overlay handling, placeholder columns, and overlay bounds.

Suggested reviewers

• abnegate
• TorstenDittmann

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 succinctly highlights the primary fix addressing the width calculation and minimum width adjustments, which aligns with the PR’s objectives to correct UI breakage due to width constraints. It is a single clear sentence that focuses on the core issue without unnecessary details or noise. Its brevity and relevance make it easily understandable for reviewers scanning the change history.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests

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

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6060c51 and 3aa2e2b.

📒 Files selected for processing (1)

• src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte (3 hunks)

🧰 Additional context used

🧠 Learnings (1)

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

Learnt from: ItzNotABug
PR: appwrite/console#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]/(suggestions)/empty.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: e2e
• GitHub Check: build

🔇 Additional comments (4)

src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte (4)

159-160: LGTM: Simplified width calculation.

The change to unconditionally use actionsLeft - left for overlay width in placeholder mode is correct and addresses the PR objective of fixing width issues when fewer columns are suggested.

---

225-235: LGTM: Defensive guard and consistent width calculation.

The guard for missing actions column prevents potential NPE and appropriately hides the overlay. The width calculation (actionsLeft - left) is now consistent with the placeholder mode logic.

---

351-353: SSR guard successfully applied.

The guard typeof window !== 'undefined' addresses the previous review comment and prevents SSR crashes when accessing window.innerWidth.

Based on past review comments.

---

334-382: Column.width supports both number and object formats by design. The Column type (via PinkColumn) and the getColumnWidth helper accept and normalize width as either a number or an object with { min: number; max?: number }, so no change is needed here.

Likely an incorrect or invalid review comment.

---

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: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cee03a8 and 6060c51.

📒 Files selected for processing (1)

• src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte (3 hunks)

🧰 Additional context used

🧠 Learnings (1)

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

Learnt from: ItzNotABug
PR: appwrite/console#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]/(suggestions)/empty.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: e2e
• GitHub Check: build