Skip to content

Fix overflowing text content in footer link #6519

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Jan 12, 2024
Merged

Fix overflowing text content in footer link #6519

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c502760
Fix overflowing text content in footer link
prajwalkulkarni Dec 26, 2023
651ecba
Merge pull request #2 from prajwalkulkarni/prajwalkulkarni-patch-2
prajwalkulkarni Dec 26, 2023
505ed69
Merge branch 'reactjs:main' into main
prajwalkulkarni Jan 10, 2024
9233057
Add min and max width to nextlink class
prajwalkulkarni Jan 10, 2024
67ebce6
Add minwidth to tailwind config
prajwalkulkarni Jan 10, 2024
9eea96d
Merge branch 'reactjs:main' into main
prajwalkulkarni Jan 12, 2024
8db6691
Wrap string beyond max width
prajwalkulkarni Jan 12, 2024
9cd5a29
Remove title attribute from span element
prajwalkulkarni Jan 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions src/components/DocsFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const DocsPageFooter = memo<DocsPageFooterProps>(
<>
{prevRoute?.path || nextRoute?.path ? (
<>
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4 py-4 md:py-12">
<div className="grid grid-cols-1 gap-4 py-4 mx-auto max-w-7xl md:grid-cols-2 md:py-12">
{prevRoute?.path ? (
<FooterLink
type="Previous"
Expand Down Expand Up @@ -69,21 +69,23 @@ function FooterLink({
<NextLink
href={href}
className={cn(
'flex gap-x-4 md:gap-x-6 items-center w-full md:w-80 px-4 md:px-5 py-6 border-2 border-transparent text-base leading-base text-link dark:text-link-dark rounded-lg group focus:text-link dark:focus:text-link-dark focus:bg-highlight focus:border-link dark:focus:bg-highlight-dark dark:focus:border-link-dark focus:border-opacity-100 focus:border-2 focus:ring-1 focus:ring-offset-4 focus:ring-blue-40 active:ring-0 active:ring-offset-0 hover:bg-gray-5 dark:hover:bg-gray-80',
'flex gap-x-4 md:gap-x-6 items-center w-full md:min-w-80 md:w-fit md:max-w-md px-4 md:px-5 py-6 border-2 border-transparent text-base leading-base text-link dark:text-link-dark rounded-lg group focus:text-link dark:focus:text-link-dark focus:bg-highlight focus:border-link dark:focus:bg-highlight-dark dark:focus:border-link-dark focus:border-opacity-100 focus:border-2 focus:ring-1 focus:ring-offset-4 focus:ring-blue-40 active:ring-0 active:ring-offset-0 hover:bg-gray-5 dark:hover:bg-gray-80',
{
'flex-row-reverse justify-self-end text-end': type === 'Next',
}
)}>
<IconNavArrow
className="text-tertiary dark:text-tertiary-dark inline group-focus:text-link dark:group-focus:text-link-dark"
className="inline text-tertiary dark:text-tertiary-dark group-focus:text-link dark:group-focus:text-link-dark"
displayDirection={type === 'Previous' ? 'start' : 'end'}
/>
<span>
<span className="block no-underline text-sm tracking-wide text-secondary dark:text-secondary-dark uppercase font-bold group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
<div className="flex flex-col overflow-hidden">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of hiding the overflow, what if we update the NextLink classes above, with this:

- md:w-80
+ md:w-fit md:min-w-80

This will expand the hoverable area to fit the content, with a minimum width of 80, so you can read the full API name, but shorter names will still be 80w:

Screen.Recording.2024-01-09.at.12.24.22.PM.mov

Note: this will require either adding { minWidth: { 80: '20rem' } } to the tailwind config, or upgrading to the latest tailwind version because min-w-x was added in 3.4: https://tailwindcss.com/blog/tailwindcss-v3-4#extended-min-width-max-width-and-min-height-scales

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would probably update the tailwind config in this PR and do the tailwind upgrade in a separate PR.

In tailwind.config.js replace:

maxWidth: {
  xs: '21rem',
},

With:

maxWidth: {
  // add this because it should be there anyway
  ...defaultTheme.maxWidth, 
  xs: '21rem',
},
minWidth: {
  ...defaultTheme.minWidth,
  80: '20rem',
},

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @rickhanlonii thank you for reviewing my PR. I agree with your suggestions, but I feel there's a small caveat. If we set the width to w-fit on the NextLink directly, there'd be no upper limit, meaning extra long strings would overlap the adjacent PREVIOUS card.
case1
I could think of 2 ways to solve this:
METHOD 1 - Remove explicit width
Instead we could remove the explicit width on the NextLink and add only md:w-fit to the child div (since there's no width defined on the parent wrapper element, each hoverable card would occupy the full space, i.e, 50% of the total space available) regardless of the size of the content rendered within.
case5

case2

However, longer strings are rendered on multiple lines, so we retain the overflow-hidden.
case3

METHOD 2 - Set max width along with min width
We add min-w-80 and w-fit and along with it we also set the max-width (max-w-md), and retain the overflow property to handle the string that is longer than what the max width can accommodate.

recording.mp4

Currently, I have implemented the second approach. But I'd love to know your thoughts on this and if I should change anything further.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. I'm not concerned about it for APIs, but for translations this could be a problem.

Can method 2 wrap at max width instead of truncating?

Copy link
Contributor Author

@prajwalkulkarni prajwalkulkarni Jan 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I think that's a good idea. I tried adding a long string to the footer link with wrap instead of truncating it, and, we're able to show the complete string without loss of information(non-truncating). It is also in line with how long strings are rendered on the sidebar.
wrap2

I've implemented break-words to break-normal for wrapping the string. Below is a snapshot of a long string with no spaces in it.
wrap

Since I'm using a class sorter extension on my VSCode, a few class names in DocsFooter.tsx have been re-arranged. I hope that's not an issue. But let me know if I have to revert it.

<span className="text-sm font-bold tracking-wide no-underline uppercase text-secondary dark:text-secondary-dark group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
{type}
</span>
<span className="block text-lg group-hover:underline">{title}</span>
</span>
<span className="text-lg break-words group-hover:underline">
{title}
</span>
</div>
</NextLink>
);
}
5 changes: 5 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,13 @@ module.exports = {
'meta-gradient-dark': "url('/images/meta-gradient-dark.png')",
},
maxWidth: {
...defaultTheme.maxWidth,
xs: '21rem',
},
minWidth:{
...defaultTheme.minWidth,
80: '20rem',
},
outline: {
blue: ['1px auto ' + colors.link, '3px'],
},
Expand Down