coracle/flotilla
1
6
Fork 24
Code Issues 35 Pull Requests 4 Actions Packages Projects 5 Releases Wiki Activity

fix: mobile room chat header layout #280

Closed
userAdityaa wants to merge 1 commits from userAdityaa/flotilla:top-bar-mobile into dev
pull from: userAdityaa/flotilla:top-bar-mobile
merge into: coracle:dev
Conversation 5 Commits 1 Files Changed 5
+19 -20
userAdityaa commented 2026-05-21 12:18:12 +00:00
Collaborator
Copy Link
Copy Source

Summary

The room chat header on mobile looked like a floating card above the messages, which made it easy to mistake for something you needed to respond to. This change makes the mobile room header feel fixed and attached at the top, more compact, and easier to scan with a prominent room logo.

Screenshots

Dark Theme Light Theme
localhost_1847_spaces_meta.spaces.coracle.social_recent(iPhone 14 Pro Max) (1).png localhost_1847_spaces_meta.spaces.coracle.social_recent(iPhone 14 Pro Max).png

closes #259

### Summary The room chat header on mobile looked like a floating card above the messages, which made it easy to mistake for something you needed to respond to. This change makes the mobile room header feel fixed and attached at the top, more compact, and easier to scan with a prominent room logo. ### Screenshots | Dark Theme | Light Theme |----|----| |![localhost_1847_spaces_meta.spaces.coracle.social_recent(iPhone 14 Pro Max) (1).png](/attachments/4e453cf1-93f7-4b5e-b65c-76a95f63d2fe)|![localhost_1847_spaces_meta.spaces.coracle.social_recent(iPhone 14 Pro Max).png](/attachments/427e0ad1-c78f-42eb-8d2b-73640a8e9fcd)| closes #259
localhost_1847_spaces_meta.spaces.coracle.social_recent(iPhone 14 Pro Max) (1).png
626 KiB
localhost_1847_spaces_meta.spaces.coracle.social_recent(iPhone 14 Pro Max).png
629 KiB
hodlbod commented 2026-05-21 15:54:27 +00:00
Owner
Copy Link
Copy Source

Why all the imageClass stuff? I don't actually see rounded-full taking effect in the screenshots. Anyway, this feels too special-case-y. The old code was pretty convoluted since the page bar floated and had to partially overlap the content. Flattening it out like this makes it possible to simplify the html significantly — no negative margins, etc. See if you can make the code simpler instead of layering on more complexity.

Why all the imageClass stuff? I don't actually see rounded-full taking effect in the screenshots. Anyway, this feels too special-case-y. The old code was pretty convoluted since the page bar floated and had to partially overlap the content. Flattening it out like this makes it possible to simplify the html significantly — no negative margins, etc. See if you can make the code simpler instead of layering on more complexity.
👍 1
userAdityaa commented 2026-05-21 21:00:03 +00:00
Author
Collaborator
Copy Link
Copy Source

pushing the changes shortly.

pushing the changes shortly.
userAdityaa added 1 commit 2026-05-21 21:31:04 +00:00
fix: mobile room chat header layout 631dbed375
userAdityaa force-pushed top-bar-mobile from ce7223b0eb to 631dbed375 2026-05-21 21:31:04 +00:00 Compare
hodlbod commented 2026-05-21 22:21:48 +00:00
Owner
Copy Link
Copy Source

I gave this a shot and came up with 339bb1afac, seems like a pretty simple change. Look ok to you? I didn't add the space icon as in the mockup, so that could be follow-up work.

I gave this a shot and came up with 339bb1afaceeb9b61f5aa7223490e4faf8bc86d5, seems like a pretty simple change. Look ok to you? I didn't add the space icon as in the mockup, so that could be follow-up work.
👍 1
hodlbod closed this pull request 2026-05-21 22:21:52 +00:00
userAdityaa commented 2026-05-23 10:46:19 +00:00
Author
Collaborator
Copy Link
Copy Source

I gave this a shot and came up with 339bb1afac, seems like a pretty simple change. Look ok to you? I didn't add the space icon as in the mockup, so that could be follow-up work.

I thought it was only meant for the mobile layout, which is why those major changes were made. Just doing the follow-up work now.

and should this space icon be visible in the desktop as well, or just mobile ?

> I gave this a shot and came up with 339bb1afaceeb9b61f5aa7223490e4faf8bc86d5, seems like a pretty simple change. Look ok to you? I didn't add the space icon as in the mockup, so that could be follow-up work. I thought it was only meant for the mobile layout, which is why those major changes were made. Just doing the follow-up work now. and should this space icon be visible in the desktop as well, or just mobile ?
hodlbod commented 2026-05-25 15:52:45 +00:00
Owner
Copy Link
Copy Source

I see, that makes sense. I'm ok with just using the flat header everywhere. No, I think we can omit the space image on desktop.

I see, that makes sense. I'm ok with just using the flat header everywhere. No, I think we can omit the space image on desktop.

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
design
For issues related to design work. Development should be done in another issue and refer back to this one.
 dev
Issues related to development work
 easy
Issues that can be executed on by new contributors
 idea
For issues that aren't yet actionable
 priority
For issues related to high priority features and bugs
 usability
Issues that have to be validated with real live human beings.
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
AQB hodlbod (hodlbod) mplorentz (Matt Lorentz) sakshamjain (Saksham Jain) sondreb triesap userAdityaa (Aditya Chaudhary)
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: coracle/flotilla#280
Delete Branch "userAdityaa/flotilla:top-bar-mobile"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?