fix: responsive layout for input fields and tables on mobile devices#2639
Conversation
Console (appwrite/console)Project ID: Sites (1)
Tip Schedule functions to run as often as every minute with cron expressions |
WalkthroughThis PR refactors column management for the platforms table by introducing a dedicated columns store and updates its configuration across multiple modules. The platforms page component was modified to dynamically render table headers using data from the new columns store instead of hardcoded definitions. Column width specifications were added to the messaging providers store. Additionally, tag wrapping behavior was enabled in the storage bucket settings section for improved layout flexibility. Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes
Areas requiring attention:
Pre-merge checks and finishing touches❌ Failed checks (2 inconclusive)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used📓 Path-based instructions (6)**/*.{ts,tsx,js,jsx,svelte}📄 CodeRabbit inference engine (AGENTS.md)
Files:
src/routes/**/*.svelte📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx,js,jsx,svelte,json}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.svelte📄 CodeRabbit inference engine (AGENTS.md)
Files:
src/routes/**📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.ts📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (6)📓 Common learnings📚 Learning: 2025-09-30T07:41:06.679ZApplied to files:
📚 Learning: 2025-11-19T11:22:42.553ZApplied to files:
📚 Learning: 2025-11-19T11:22:42.553ZApplied to files:
📚 Learning: 2025-11-25T03:15:27.539ZApplied to files:
📚 Learning: 2025-09-08T13:20:47.308ZApplied to files:
🧬 Code graph analysis (1)src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts (2)
🔇 Additional comments (6)
Tip 📝 Customizable high-level summaries are now available in beta!You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
Example instruction:
Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later. 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte (1)
42-91: Responsive wrapper and grid look correct; watch tight coupling to column countThe
table-scroll-wrapperand the grid-based[role='table']styling are a good way to get horizontal scroll and keep columns readable on small viewports. One thing to keep in mind: thegrid-template-columnscurrently hard-codes 6 columns, while$columnscomes from./store. If someone later adds/removes a column, the visual layout could become misaligned unless this SCSS is updated in lockstep.If the column set is expected to evolve, consider either:
- Documenting this coupling next to the
columnsstore, or- Using a more generic pattern (e.g.
grid-auto-columns/repeat(...)) so the grid adapts automatically.Also applies to: 93-105
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte(1 hunks)src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte(2 hunks)src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte(2 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx,js,jsx,svelte}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx,svelte}: Import reusable modules from the src/lib directory using the $lib alias
Use minimal comments in code; reserve comments for TODOs or complex logic explanations
Use $lib, $routes, and $themes aliases instead of relative paths for module imports
Files:
src/routes/(console)/project-[region]-[project]/messaging/providers/table.sveltesrc/routes/(console)/project-[region]-[project]/overview/platforms/+page.sveltesrc/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte
src/routes/**/*.svelte
📄 CodeRabbit inference engine (AGENTS.md)
Use SvelteKit file conventions: +page.svelte for components, +page.ts for data loaders, +layout.svelte for wrappers, +error.svelte for error handling, and dynamic route params in square brackets like [param]
Files:
src/routes/(console)/project-[region]-[project]/messaging/providers/table.sveltesrc/routes/(console)/project-[region]-[project]/overview/platforms/+page.sveltesrc/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte
**/*.{ts,tsx,js,jsx,svelte,json}
📄 CodeRabbit inference engine (AGENTS.md)
Use 4 spaces for indentation, single quotes, 100 character line width, and no trailing commas per Prettier configuration
Files:
src/routes/(console)/project-[region]-[project]/messaging/providers/table.sveltesrc/routes/(console)/project-[region]-[project]/overview/platforms/+page.sveltesrc/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte
**/*.svelte
📄 CodeRabbit inference engine (AGENTS.md)
Use Svelte 5 + SvelteKit 2 syntax with TypeScript for component development
Files:
src/routes/(console)/project-[region]-[project]/messaging/providers/table.sveltesrc/routes/(console)/project-[region]-[project]/overview/platforms/+page.sveltesrc/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte
src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Configure dynamic routes using SvelteKit convention with [param] syntax in route directory names
Files:
src/routes/(console)/project-[region]-[project]/messaging/providers/table.sveltesrc/routes/(console)/project-[region]-[project]/overview/platforms/+page.sveltesrc/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte
🧠 Learnings (5)
📓 Common learnings
Learnt from: ItzNotABug
Repo: appwrite/console PR: 2413
File: src/routes/(console)/project-[region]-[project]/databases/database-[database]/(entity)/views/indexes/view.svelte:84-84
Timestamp: 2025-10-09T12:22:41.099Z
Learning: In the Appwrite console databases UI, user-facing labels like "Columns" should remain unchanged even when internal terminology changes to "fields". The multi-terminology support refactors internal data models without changing the user-facing text.
📚 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]/messaging/providers/table.sveltesrc/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
📚 Learning: 2025-11-19T11:22:42.553Z
Learnt from: atharvadeosthale
Repo: appwrite/console PR: 2512
File: src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte:51-83
Timestamp: 2025-11-19T11:22:42.553Z
Learning: In src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte, the Cursor integration URL format `https://cursor.com/link/prompt` with the `text` query parameter is correct and functional.
Applied to files:
src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
📚 Learning: 2025-11-19T11:22:42.553Z
Learnt from: atharvadeosthale
Repo: appwrite/console PR: 2512
File: src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte:51-83
Timestamp: 2025-11-19T11:22:42.553Z
Learning: In src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte, the Lovable integration URL format `https://lovable.dev/` with `autosubmit` and `prompt` as query parameters (set via searchParams) is correct and functional.
Applied to files:
src/routes/(console)/project-[region]-[project]/overview/platforms/+page.sveltesrc/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte
📚 Learning: 2025-11-25T03:15:27.510Z
Learnt from: CR
Repo: appwrite/console PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T03:15:27.510Z
Learning: Applies to src/routes/**/*.svelte : Use SvelteKit file conventions: +page.svelte for components, +page.ts for data loaders, +layout.svelte for wrappers, +error.svelte for error handling, and dynamic route params in square brackets like [param]
Applied to files:
src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte
🔇 Additional comments (3)
src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte (2)
414-420: InputTags container and tag wrapping are appropriate for small screensWrapping
InputTagsin amin-width: 0; width: 100%div and enablingflex-wrap: wrapon the tag row is a solid way to stop horizontal overflow and keep the chips usable on narrow viewports. This should address the reported overflow without affecting desktop layouts.Also applies to: 422-438
463-470: Delete button change is formatting-onlyThe updated brace/closing tag layout in the
on:clickhandler doesn’t affect behavior and is consistent with the rest of the file.src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte (1)
123-160: Scrollable wrapper and grid column sizing align well with the platforms tableWrapping
Table.Rootin.table-scroll-wrapperand applying the grid-based[role='table']styles gives you the needed horizontal scroll and preserves readable column widths on smaller viewports. The fourminmax(calc(...), …)columns correctly match the four table columns andcolumns={4}, and-webkit-overflow-scrolling: touchwill help on mobile.This looks consistent with the pattern used for other responsive tables in the console.
Also applies to: 209-223
| <Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell> | ||
| {/each} | ||
| {/snippet} | ||
| <div class="table-scroll-wrapper"> |
There was a problem hiding this comment.
we don't need to add custom classes here, best to add width: { min: xxx } on the columns itself. You can easily search for the most commonly used dimensions.
Same for table on Overview as well 👍
| .table-scroll-wrapper { | ||
| overflow-x: auto; | ||
| -webkit-overflow-scrolling: touch; | ||
|
|
||
| :global([role='table']) { | ||
| display: grid; | ||
| grid-template-columns: | ||
| minmax(60px, 0.5fr) minmax(200px, 2.5fr) minmax(120px, 1fr) minmax(120px, 1fr) | ||
| minmax(120px, 1fr) minmax(120px, 1.5fr); | ||
| width: 100%; | ||
| } | ||
| } |
There was a problem hiding this comment.
not needed as per the comment above.
| </Table.Row.Link> | ||
| {/each} | ||
| </Table.Root> | ||
| <div class="table-scroll-wrapper"> |
There was a problem hiding this comment.
Hey @ItzNotABug, the overview platforms table originally had no columns in store.ts, so I added them with width: { min: xxx } and made the header dynamic:
// store.ts - newly added
export const columns = writable<Column[]>([
{ id: 'name', title: 'Name', type: 'string', width: { min: 120 } },
// ...
]);<!-- page.svelte - made dynamic -->
{#each $columns as column}
<Table.Header.Cell {root} column={column.id}>
{column.title}
</Table.Header.Cell>
{/each}However, unlike the messaging table which uses MultiSelectionTable, this uses Table.Root directly, so the width properties don't get applied and overflow still appears.
Should I keep the current wrapper classes, or is there another approach for Table.Root?
There was a problem hiding this comment.
@AbhiVarde
make sure to apply the created columns on the Table.Root as well like <Table.Root columns={$columns} let:root>
There was a problem hiding this comment.
Works perfectly, thanks! 🎉
| label="Labels" | ||
| placeholder="Select or type user labels" | ||
| bind:tags={extensions} /> | ||
| <div style="min-width: 0; width: 100%;"> |
There was a problem hiding this comment.
this is not needed, the overflow is due to the Stack below.
| </div> | ||
| {/key} | ||
| <Layout.Stack direction="row"> | ||
| <Layout.Stack direction="row" style="flex-wrap: wrap; overflow-x: auto;"> |
There was a problem hiding this comment.
you can just do <Layout.Stack direction="row" wrap="wrap">.
|
All review comments addressed, ready for another look! 🙏 |
2 participants
What does this PR do?
Problem
Three console pages had responsive layout issues on mobile and tablet viewports (< 768px):
Solution
Implemented responsive fixes across all three pages:
Changes Made
Files Modified:
src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/page.sveltemin-width: 0; width: 100%;flex-wrap: wrap; overflow-x: auto;to extension tagssrc/routes/(console)/project-[region]-[project]/overview/platforms/page.svelte.table-scroll-wrapperwith horizontal scroll and SCSS grid stylessrc/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte.table-scroll-wrapperwith horizontal scroll and SCSS grid stylesTest Plan
Screenshots
Related PRs and Issues
Fixes #2629
Have you read the Contributing Guidelines?
Yes, I have read and followed the contributing guidelines.
Summary by CodeRabbit
New Features
Bug Fixes
Style
✏️ Tip: You can customize this high-level summary in your review settings.