chore: adjust custom image size of org

[ameer2468]

Summary by CodeRabbit

• Style
  • The organization icon in the dashboard navbar now adapts its size based on the sidebar state, appearing slightly smaller when collapsed and larger when expanded.
  • Improves visual balance, alignment, and legibility across layouts, enhancing overall UI consistency without affecting functionality.
  • Provides a more polished appearance in both compact and expanded views of the sidebar.

[coderabbitai]

Walkthrough

The organization icon in the dashboard navbar now uses a dynamic size class via clsx, applying size-6 when the sidebar is collapsed and size-7 when expanded, based on the existing sidebarCollapsed state. No exported/public APIs were changed.

Changes

Cohort / File(s)	Summary
Navbar org icon sizing apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx	Replaced static size-[18px] with conditional size-6 or size-7 using clsx tied to sidebarCollapsed.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• chore: fix dashboard logo on collapse & make name of org text bigger #1019 — Also adjusts dashboard organization/logo sizing tied to the same sidebarCollapsed state across Desktop/Mobile components.
• fix: dashboard fast refresh #1011 — Modifies class handling in the same Items.tsx, removing an exported class and inlining/reordering classes.

Poem

In the sidebar’s hush, I twitch an ear,
Icons shrink and grow—so crisp, so clear.
size-6 when tucked, size-7 when wide,
A bunny nods to responsive pride.
clsx whispers the state’s decree—
Hop, hop, render, dynamically! 🐇✨

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 "chore: adjust custom image size of org" accurately reflects the primary change in the diff — adjusting the organization image/icon sizing (Navbar/Items.tsx) to use dynamic classes based on sidebarCollapsed — and is concise; however, the abbreviation "org" could be expanded for clarity.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch adjust-image-size

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

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

🧹 Nitpick comments (1)

apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx (1)

139-146: Add sizes to next/image to avoid fetching oversized images

With fill, Next will assume 100vw without sizes, potentially over-downloading. Declare the actual rendered size.

 <Image
   src={activeOrg.organization.iconUrl}
   alt={
     activeOrg.organization.name || "Organization icon"
   }
   fill
+  sizes={sidebarCollapsed ? "24px" : "28px"}
   className="object-cover"
 />

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c0e5d46 and 345a9ed.

📒 Files selected for processing (1)

• apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

apps/web/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

apps/web/**/*.{ts,tsx}: Use TanStack Query v5 for client-side server state and data fetching in the web app
Mutations should call Server Actions and perform precise cache updates with setQueryData/setQueriesData, avoiding broad invalidations
Prefer Server Components for initial data and pass initialData to client components for React Query hydration

Files:

• apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx

{apps/web,packages/ui}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

{apps/web,packages/ui}/**/*.{ts,tsx}: Use Tailwind CSS exclusively for styling in the web app and shared React UI components
Component naming: React components in PascalCase; hooks in camelCase starting with 'use'

Files:

• apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Use strict TypeScript and avoid any; prefer shared types from packages

**/*.{ts,tsx}: Use Biome to format/lint TypeScript with a 2-space indent
TypeScript file names should be kebab-case (e.g., user-menu.tsx)

Files:

• apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

React/Solid components should be named using PascalCase

Files:

• apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx

⏰ 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). (3)

• GitHub Check: Build Desktop (x86_64-pc-windows-msvc, windows-latest)
• GitHub Check: Build Desktop (aarch64-apple-darwin, macos-latest)
• GitHub Check: Analyze (rust)

🔇 Additional comments (1)

apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx (1)

133-138: Dynamic sizing aligns image with Avatar fallback — looks good

Using size-6 when collapsed and size-7 when expanded fixes the mismatch with the Avatar fallback and keeps the next/image fill wrapper correctly constrained.