Skip to content

Commit 6987f0f

Browse files
prajwalkulkarniprajwalkulkarni
authored
Fix overflowing text content in footer link (#6519)
* Fix overflowing text content in footer link Add an ellipsis to overflowing text in the footer section for navigating between different references. * Add min and max width to nextlink class * Add minwidth to tailwind config * Wrap string beyond max width * Remove title attribute from span element
1 parent 0972541 commit 6987f0f

2 files changed

Lines changed: 14 additions & 7 deletions

File tree

‎src/components/DocsFooter.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const DocsPageFooter = memo<DocsPageFooterProps>(
2727
<>
2828
{prevRoute?.path || nextRoute?.path ? (
2929
<>
30-
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4 py-4 md:py-12">
30+
<div className="grid grid-cols-1 gap-4 py-4 mx-auto max-w-7xl md:grid-cols-2 md:py-12">
3131
{prevRoute?.path ? (
3232
<FooterLink
3333
type="Previous"
@@ -69,21 +69,23 @@ function FooterLink({
6969
<NextLink
7070
href={href}
7171
className={cn(
72-
'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',
72+
'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',
7373
{
7474
'flex-row-reverse justify-self-end text-end': type === 'Next',
7575
}
7676
)}>
7777
<IconNavArrow
78-
className="text-tertiary dark:text-tertiary-dark inline group-focus:text-link dark:group-focus:text-link-dark"
78+
className="inline text-tertiary dark:text-tertiary-dark group-focus:text-link dark:group-focus:text-link-dark"
7979
displayDirection={type === 'Previous' ? 'start' : 'end'}
8080
/>
81-
<span>
82-
<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">
81+
<div className="flex flex-col overflow-hidden">
82+
<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">
8383
{type}
8484
</span>
85-
<span className="block text-lg group-hover:underline">{title}</span>
86-
</span>
85+
<span className="text-lg break-words group-hover:underline">
86+
{title}
87+
</span>
88+
</div>
8789
</NextLink>
8890
);
8991
}

‎tailwind.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,13 @@ module.exports = {
5757
'meta-gradient-dark': "url('/images/meta-gradient-dark.png')",
5858
},
5959
maxWidth: {
60+
...defaultTheme.maxWidth,
6061
xs: '21rem',
6162
},
63+
minWidth:{
64+
...defaultTheme.minWidth,
65+
80: '20rem',
66+
},
6267
outline: {
6368
blue: ['1px auto ' + colors.link, '3px'],
6469
},

0 commit comments

Comments
 (0)