From c502760ad811af983d41e2ab971d94bed09034f5 Mon Sep 17 00:00:00 2001
From: Prajwal Kulkarni <prajwalkulkarni76@gmail.com>
Date: Tue, 26 Dec 2023 13:03:00 +0530
Subject: [PATCH 1/5] Fix overflowing text content in footer link

Add an ellipsis to overflowing text in the footer section for navigating between different references.
---
 src/components/DocsFooter.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx
index 2fdbb0460c1..75d90dc584d 100644
--- a/src/components/DocsFooter.tsx
+++ b/src/components/DocsFooter.tsx
@@ -78,12 +78,12 @@ function FooterLink({
         className="text-tertiary dark:text-tertiary-dark inline 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">
+        <span className="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">
           {type}
         </span>
-        <span className="block text-lg group-hover:underline">{title}</span>
-      </span>
+        <span className="overflow-hidden whitespace-nowrap text-ellipsis text-lg group-hover:underline" title={title}>{title}</span>
+      </div>
     </NextLink>
   );
 }

From 92330571fef8f23cd7282febea705d2501e53bb7 Mon Sep 17 00:00:00 2001
From: Prajwal Kulkarni <prajwalkulkarni76@gmail.com>
Date: Wed, 10 Jan 2024 22:38:18 +0530
Subject: [PATCH 2/5] Add min and max width to nextlink class

---
 src/components/DocsFooter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx
index 75d90dc584d..2c6e99937f7 100644
--- a/src/components/DocsFooter.tsx
+++ b/src/components/DocsFooter.tsx
@@ -69,7 +69,7 @@ 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',
         }

From 67ebce6d38d90064b7cde858facb69d9758e412d Mon Sep 17 00:00:00 2001
From: Prajwal Kulkarni <prajwalkulkarni76@gmail.com>
Date: Wed, 10 Jan 2024 22:39:40 +0530
Subject: [PATCH 3/5] Add minwidth to tailwind config

---
 tailwind.config.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/tailwind.config.js b/tailwind.config.js
index d528ff494d1..a9488ccc77a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -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'],
       },

From 8db6691e6932aa38a1ee0e18528f8ff19ad57730 Mon Sep 17 00:00:00 2001
From: Prajwal Kulkarni <prajwalkulkarni76@gmail.com>
Date: Sat, 13 Jan 2024 00:25:32 +0530
Subject: [PATCH 4/5] Wrap string beyond max width

---
 src/components/DocsFooter.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx
index 2c6e99937f7..69c30675ad6 100644
--- a/src/components/DocsFooter.tsx
+++ b/src/components/DocsFooter.tsx
@@ -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"
@@ -75,14 +75,18 @@ function FooterLink({
         }
       )}>
       <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'}
       />
       <div className="flex flex-col overflow-hidden">
-        <span className="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">
+        <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="overflow-hidden whitespace-nowrap text-ellipsis text-lg group-hover:underline" title={title}>{title}</span>
+        <span
+          className="text-lg break-words group-hover:underline"
+          title={title}>
+          {title}
+        </span>
       </div>
     </NextLink>
   );

From 9cd5a29dcb733f5ae6e324e2fafc8510288433f1 Mon Sep 17 00:00:00 2001
From: Prajwal Kulkarni <prajwalkulkarni76@gmail.com>
Date: Sat, 13 Jan 2024 00:30:47 +0530
Subject: [PATCH 5/5] Remove title attribute from span element

---
 src/components/DocsFooter.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx
index 69c30675ad6..5f2330e7eae 100644
--- a/src/components/DocsFooter.tsx
+++ b/src/components/DocsFooter.tsx
@@ -82,9 +82,7 @@ function FooterLink({
         <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="text-lg break-words group-hover:underline"
-          title={title}>
+        <span className="text-lg break-words group-hover:underline">
           {title}
         </span>
       </div>