My Books page overflows on mobiles when "Share" link is rendered

[jimchamp]

Problem

The "Share" link, when rendered, causes the page to overflow on the x-axis on the main "My Books" page. Share links are only rendered if the account's reading log setting is public.

Reproducing the bug

1. Log into your account
2. Ensure that your reading log is private
3. Click the "My Books" link, located in the header bar
4. On page load, attempt to scroll left and right

• Expected behavior:
  • No scrolling on the x-axis
  • "Share" link is fully visible and within the bounds of the content container
• Actual behavior:
  • The page scrolls on the x-axis
  • The "Share" link doesn't fit entirely within the content container

Context

• Browser (Chrome, Safari, Firefox, etc): FF, Chrome, possibly others
• OS (Windows, Mac, etc): Windows, Android
• Logged in (Y/N): Y
• Environment (prod, dev, local): prod

Breakdown

Requirements Checklist

• [ ]

Related files

Stakeholders

---

Instructions for Contributors

• Please run these commands to ensure your repository is up to date before creating a new branch to work on this issue and each time after pushing code to Github, because the pre-commit bot may add commits to your PRs upstream.

[akramcodez]

@jimchamp This issue is happening only on some desktop browsers. It’s not occurring on my mobile browser (e.g., Chrome), and it’s also not happening on my Comet desktop. Could you suggest the best approach to fix this issue?

comet:

firefox:

chrome:

[SAYAN02-DEV]

@akramcodez When elements are flex children, browsers (notably Firefox) sometimes prevent them from shrinking below their content width, causing the header to force horizontal scrolling.

openlibrary/static/css/components/mybooks-details.less

Lines 20 to 28 in 3f2d9ec

	.breadcrumb-wrapper {
	display: flex;
	flex-wrap: wrap;
	white-space: nowrap;
	}
	.social-wrapper {
	display: flex;
	}

we can add min-width:0 to both .breadcrumb-wrapper and .social-wrapper, Adding min-width: 0 allows those flex children to shrink and prevents x-axis overflow, while keeping layout intact.

@jimchamp I would like to work on this issue can you assing it to me?