fix: column width for sessions and activity table for smaller devices #2745
Conversation
Console (appwrite/console)Project ID: Tip Realtime gives you live updates for users, storage, functions, and databases |
WalkthroughFour UI files were changed: two session list pages, the activity table component, and the console layout. InteractiveText from Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Pre-merge checks✅ Passed checks (3 passed)
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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)
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 |
src/lib/layout/activity.svelte
Outdated
| const columns: PinkColumn[] = [ | ||
| { id: 'user', ...(insideSideSheet ? { width: 140 } : {}) }, | ||
| { id: 'event', ...(insideSideSheet ? { width: 125 } : {}) }, | ||
| { id: 'location', ...(insideSideSheet ? { width: 100 } : {}) }, | ||
| { id: 'ip', ...(insideSideSheet ? { width: { min: 150 } } : {}) }, | ||
| { id: 'date', ...(insideSideSheet ? { width: { min: 200 } } : {}) } | ||
| { | ||
| id: 'user', | ||
| ...(insideSideSheet ? { width: 140 } : { width: { min: 100 } }) | ||
| }, | ||
| { | ||
| id: 'event', | ||
| ...(insideSideSheet ? { width: 125 } : { width: { min: 160 } }) | ||
| }, | ||
| { | ||
| id: 'location', | ||
| ...(insideSideSheet ? { width: 100 } : { width: { min: 120 } }) | ||
| }, | ||
| { | ||
| id: 'ip', | ||
| ...(insideSideSheet ? { width: { min: 150 } } : { width: { min: 250 } }) | ||
| }, | ||
| { | ||
| id: 'date', | ||
| ...(insideSideSheet ? { width: { min: 200 } } : { width: { min: 180 } }) | ||
| } | ||
| ]; |
There was a problem hiding this comment.
lets make a method to return values based on the if/else check.
![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/lib/layout/activity.svelte (1)
17-35: Inconsistent width configuration strategy.The function returns mixed types: fixed numbers for some columns (e.g.,
user: 140,event: 125) and{ min: number }objects for others within the same context. This inconsistency can lead to unpredictable responsive behavior.For consistent table layout behavior, consider using either all fixed widths or all min-width objects within each context (insideSheet vs. default).
🔎 Suggested approach for consistency
function getColumnWidth(columnId: string): { width?: number | { min: number } } { const widthConfig: Record< string, { insideSheet: number | { min: number }; default: number | { min: number } } > = { - user: { insideSheet: 140, default: { min: 100 } }, - event: { insideSheet: 125, default: { min: 160 } }, - location: { insideSheet: 100, default: { min: 120 } }, + user: { insideSheet: { min: 140 }, default: { min: 100 } }, + event: { insideSheet: { min: 125 }, default: { min: 160 } }, + location: { insideSheet: { min: 100 }, default: { min: 120 } }, ip: { insideSheet: { min: 150 }, default: { min: 250 } }, date: { insideSheet: { min: 200 }, default: { min: 180 } } };
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/lib/layout/activity.sveltesrc/routes/(console)/account/sessions/+page.sveltesrc/routes/(console)/project-[region]-[project]/auth/user-[user]/sessions/+page.svelte
🚧 Files skipped from review as they are similar to previous changes (1)
- src/routes/(console)/account/sessions/+page.svelte
🧰 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]/auth/user-[user]/sessions/+page.sveltesrc/lib/layout/activity.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]/auth/user-[user]/sessions/+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]/auth/user-[user]/sessions/+page.sveltesrc/lib/layout/activity.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]/auth/user-[user]/sessions/+page.sveltesrc/lib/layout/activity.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]/auth/user-[user]/sessions/+page.svelte
🧠 Learnings (4)
📚 Learning: 2025-11-25T03:15:27.539Z
Learnt from: CR
Repo: appwrite/console PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T03:15:27.539Z
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]/auth/user-[user]/sessions/+page.sveltesrc/lib/layout/activity.svelte
📚 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]/auth/user-[user]/sessions/+page.sveltesrc/lib/layout/activity.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]/auth/user-[user]/sessions/+page.svelte
📚 Learning: 2025-11-25T03:15:27.539Z
Learnt from: CR
Repo: appwrite/console PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T03:15:27.539Z
Learning: Applies to **/*.svelte : Use Svelte 5 + SvelteKit 2 syntax with TypeScript for component development
Applied to files:
src/routes/(console)/project-[region]-[project]/auth/user-[user]/sessions/+page.sveltesrc/lib/layout/activity.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
🔇 Additional comments (6)
src/lib/layout/activity.svelte (3)
6-6: LGTM: InteractiveText import added correctly.The import follows the coding guidelines and supports the new copyable IP functionality.
37-43: Good refactoring: method for column width logic.The use of
getColumnWidthto compute widths addresses the previous review feedback about extracting if/else logic into a method. The spread operator cleanly merges the width configuration with column IDs.Based on learnings, this pattern aligns with the previous review suggestion to create methods for conditional logic.
52-98: InteractiveText component API usage is correct.The props
variant="copy",text, andisVisibleare used consistently throughout the codebase with the same pattern (e.g., insessions/+page.svelte,domains/recordTable.svelte, and other files displaying copyable text). The usage in the activity log table is correct.src/routes/(console)/project-[region]-[project]/auth/user-[user]/sessions/+page.svelte (3)
3-10: LGTM: InteractiveText import added correctly.The import addition follows the coding guidelines and maintains clean multiline formatting.
46-48: Excellent: Consistent responsive width strategy.The column width updates use
{ min: number }objects consistently for all data columns while keeping the actions column fixed. This approach ensures predictable responsive behavior across different screen sizes.This is cleaner and more consistent than the mixed approach in
activity.svelte.
94-94: Good UX improvement: Copyable IP addresses.The use of
InteractiveTextfor IP addresses improves user experience by enabling easy copying. The implementation is consistent with the changes inactivity.svelte.
src/lib/layout/activity.svelte
Outdated
| export let databasesScreen = false; | ||
| export let useCreateLinkForPagination = true; | ||
| function getColumnWidth(columnId: string): { width?: number | { min: number } } { |
There was a problem hiding this comment.
Let's use the pinkcolumn type here
What does this PR do?
Before
After
Test Plan
(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work.)
Related PRs and Issues
(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)
Have you read the Contributing Guidelines on issues?
(Write your answer here.)
Summary by CodeRabbit
New Features
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.