fix: layout fixed.

[Sahil2004]

Description of change

Moved the follow and message button to new line below profile photo and name and before the metrics of the profile in sm breakpoint of the screen.

Issue Number

Closes #1033

Type of change

• Fix (a change which fixes an issue)

How the change has been tested

Manually.

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
  • Updated profile header layout for improved visual structure
  • Adjusted message button styling and responsive behavior

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3f9ff4e0-4237-461e-b2a9-c0e08f253aae

📥 Commits

Reviewing files that changed from the base of the PR and between 8890fad and c9dbb71.

📒 Files selected for processing (1)

• platforms/pictique/client/src/lib/fragments/Profile/Profile.svelte

---

📝 Walkthrough

Walkthrough

Profile.svelte receives three Tailwind layout adjustments to fix mobile overflow. The header flex row adds flex-wrap, the name/description block for the other variant gains a min-w-0 flex-1 wrapper, and the Message button class changes to flex-1 sm:flex-initial.

Changes

Profile header responsive layout fix

Layer / File(s)	Summary
Header wrap, name/description containment, and Message button flex sizing platforms/pictique/client/src/lib/fragments/Profile/Profile.svelte	Header row changes from flex items-center to flex flex-wrap items-center; the other-variant name/description area is wrapped in min-w-0 flex-1; the Message button class is updated to flex-1 sm:flex-initial and its props are expanded to multi-line format.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐇 A button was lost past the edge of the screen,
So I added some wrapping to fill in the scene.
flex-wrap and flex-1 now keep things in place,
No scrolling required — there's plenty of space!
The Message is visible, tidy, and neat. 🐾

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'fix: layout fixed.' is vague and generic, using non-descriptive terms that don't convey what layout was fixed or why.	Improve the title to be more specific, e.g., 'fix: make Profile buttons responsive on mobile screens' or 'fix: fix Profile overflow on sm breakpoint'.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description follows the template structure with all required sections completed, including issue number, type of change, testing method, and a filled checklist.
Linked Issues check	✅ Passed	The code changes address the linked issue by repositioning Follow/Message buttons to a new line below the profile photo on sm breakpoint, eliminating horizontal overflow.
Out of Scope Changes check	✅ Passed	All changes to Profile.svelte are scoped to fixing the mobile layout overflow issue described in issue #1033, with no extraneous modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/profileLayout

---

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.}