Skip to content

fix(social): stop follow-nextcloud button overlapping welcome banner - #2152

Closed
jospoortvliet wants to merge 1 commit into
nextcloud:masterfrom
jospoortvliet:fix/follow-button-overlap
Closed

jospoortvliet wants to merge 1 commit into
nextcloud:masterfrom
jospoortvliet:fix/follow-button-overlap

Conversation

@jospoortvliet

Copy link
Copy Markdown
Member

Summary

The "Follow Nextcloud on mastodon.xyz" button in the welcome banner overlaps surrounding text (see screenshot below). The button used float: inline-end inside .follow-nextcloud, but nothing cleared the float, so the container's height collapsed and the button overlapped neighboring content instead of sitting below the paragraph.

Fix: use flexbox (display: flex; flex-direction: column; align-items: flex-end) instead of float, so the button lays out in normal flow, right-aligned below the paragraph.

AI disclosure

This change (root-cause analysis and the CSS fix) were drafted with Claude Code and reviewed by me before submission, per the Nextcloud AI Contribution Policy.

Test plan

  • Open the Social app as a first-run user (or reset firstrun flag) so the welcome banner shows
  • Confirm the follow button no longer overlaps the paragraph/banner text
  • Check both LTR and RTL layouts

The button relied on float:inline-end with nothing clearing the
float, collapsing .follow-nextcloud's height and letting the button
overlap neighboring content. Use flexbox instead.

Assisted-by: ClaudeCode:claude-sonnet-5
Signed-off-by: Jos Poortvliet <jospoortvliet@gmail.com>
@karlitschek

Copy link
Copy Markdown
Member

thanks for the PR. The complete interface was replaced in the meantime

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants