Fix/blabsy issues

[grv-saini-20]

Description of change

Fixing all the issues related to blabsy platform

Issue Number

closes #734

Type of change

• Update (a change which updates existing functionality)
• Fix (a change which fixes an issue)

How the change has been tested

Manual

Change checklist

• I have ensured that the CI Checks pass locally
• I have removed any unnecessary logic
• My code is well documented
• I have signed my commits
• My code follows the pattern of the application
• I have self reviewed my code

Summary by CodeRabbit

• Style
  • Simplified the logout button label for a cleaner interface.
  • Ensured avatar images preserve a consistent square aspect ratio.
  • Adjusted tooltip positioning/centering to simplify display behavior.

[coderabbitai]

📝 Walkthrough

Walkthrough

Updated three Blabsy UI components: simplified the sidebar logout button text, enforced square aspect ratio on user avatars, and adjusted tooltip positioning by removing a horizontal translate offset.

Changes

Cohort / File(s)	Summary
Sidebar — logout label platforms/blabsy/src/components/sidebar/sidebar-profile.tsx	Removed dynamic username rendering from logout button; button text now reads "Log out".
Avatar — aspect ratio platforms/blabsy/src/components/user/user-avatar.tsx	Added aspect-square to image and wrapper classes to preserve square avatar aspect ratio in all cases.
Tooltip — positioning platforms/blabsy/src/components/user/user-tooltip.tsx	Removed -translate-x-1/2 horizontal translate from tooltip container, altering centering logic for the hover tooltip panel.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• fix: (Pictique) refactor layout structure and fix mobile comments #656 — similar avatar styling change (adds aspect-square/object-fit classes) likely related.
• (No other strong code-level matches found)

Suggested reviewers

• coodos
• sosweetham
• xPathin

Poem

🐰
I nibbled at classes, snug and small,
Made avatars square, aligned for all.
The logout shed its name and sigh,
The tooltip nudged its centering tie.
Hooray — a tidier UI hop! 🥕

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (1 warning, 2 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title 'Fix/blabsy issues' is vague and generic, using non-descriptive language that doesn't convey specific meaningful information about the changeset.	Use a more descriptive title that summarizes the specific changes, such as 'Update Blabsy UI: fix logout label, image aspect ratio, and tooltip positioning'.
Linked Issues check	❓ Inconclusive	The PR addresses 3 of 4 objectives from issue #734: logout label changed to 'Logout', image aspect ratio fixed with aspect-square class, and tooltip positioning fixed by removing translate offset. The sidebar layout issue remains incomplete.	Consider whether the incomplete sidebar layout fix (#734 second objective) should be part of this PR or if it requires a separate issue and PR for tracking.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description follows the required template with all major sections completed including issue number, type of change, testing method, and checklist items marked as done.
Out of Scope Changes check	✅ Passed	All three file changes (sidebar-profile.tsx, user-avatar.tsx, user-tooltip.tsx) directly address the objectives in issue #734 with no extraneous modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/Blabsy-Issues

---

No actionable comments were generated in the recent review. 🎉

---

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]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

platforms/blabsy/src/components/user/user-avatar.tsx (1)

34-45: ⚠️ Potential issue | 🟡 Minor

aspect-square added to the no-username wrapper but not to the Link wrapper — is this intentional?

Line 38 adds aspect-square to the <div> wrapper when there's no username, but the <Link> wrapper on line 50 does not receive the same treatment. If the goal is uniform square aspect ratio for all avatars, the Link path should also include it.

Proposed fix

         <Link
             href={`/user/${username}`}
-            className={cn('blur-picture flex self-start', className)}
+            className={cn('blur-picture flex self-start aspect-square', className)}
             tabIndex={0}
         >

Also applies to: 47-55

🧹 Nitpick comments (1)

platforms/blabsy/src/components/sidebar/sidebar-profile.tsx (1)

22-35: Consider deriving state directly from user instead of syncing via useEffect.

The four useState + useEffect calls (lines 22–35) mirror fields from user without transformation. This is a classic case of unnecessary derived state — you could read directly from user (e.g., user?.name, user?.photoURL) in JSX, eliminating the sync overhead and potential for stale state between renders.