Merge pull request #247 from ankitaniket/main

Fix: [BUG] Overflow of quotes content for large quotes in mobile view.
gita · Mar 28, 2024 · a23bff5 · a23bff5
2 parents a598a72 + 7c0dd59
commit a23bff5
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx b/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx
@@ -16,9 +16,9 @@ export default function QuotesPage(props: LocaleAndTranslations) {
   const [quoteIndex, setQuoteIndex] = useState(0);
 
   return (
-    <div className="mb-16">
+    <div className="min-h-[900px] md:flex md:min-h-[800px] md:flex-col md:justify-center">
       <QuotesBanner translate={translate} />
-      <div className="relative z-10 m-auto h-96 p-0 md:w-[90%] lg:w-[73%] xl:w-[66%]">
+      <div className="relative z-10 m-auto w-full">
         <QuotesNavigator
           quoteCount={quotes.length}
           quoteIndex={quoteIndex}

diff --git a/src/components/Quotes/Quote.tsx b/src/components/Quotes/Quote.tsx
@@ -17,7 +17,7 @@ export default function Quote({ quoteNumber, quote, translate }: Props) {
         <SvgChapterBackground className="relative inset-x-0 bottom-0 m-auto w-full rounded-full text-gray-300 text-opacity-25 dark:text-black dark:text-opacity-25 lg:top-12 lg:w-min" />
       </div>
 
-      <div className="xs:py-24 relative mx-auto max-w-5xl px-4 text-center font-inter sm:px-6 sm:py-28">
+      <div className="xs:py-24 relative mx-auto max-w-5xl p-2  text-center font-inter sm:px-6 sm:py-8 ">
         <h2
           className={classNames(
             "font-medium uppercase text-my-orange",

diff --git a/src/components/Quotes/QuotesNavigator.tsx b/src/components/Quotes/QuotesNavigator.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { Dispatch, SetStateAction } from "react";
 
 import { SvgChevronLeft, SvgChevronRight } from "../svgs";
@@ -30,15 +31,16 @@ export default function QuotesNavigator({
       {previousQuote >= 1 && (
         <button
           onClick={previous}
-          className="absolute left-1 top-1/2 z-[60] flex h-10 w-10 items-center justify-center rounded-full border bg-white hover:cursor-pointer  hover:brightness-90 dark:border-gray-600 dark:bg-dark-100 dark:hover:bg-dark-bg md:top-1/2"
+          className={`absolute left-3 top-2 z-[60] flex h-10 w-10 items-center justify-center rounded-full border hover:cursor-pointer hover:brightness-90 dark:border-gray-600 dark:hover:bg-dark-bg md:top-1/2 lg:left-40`}
         >
           <SvgChevronLeft className="dark:text-gray-50" />
         </button>
       )}
       {nextQuote <= quoteCount && (
         <button
           onClick={next}
-          className="absolute right-1 top-1/2 z-[60] flex h-10 w-10 items-center justify-center rounded-full border bg-white hover:cursor-pointer  hover:brightness-90 dark:border-gray-600 dark:bg-dark-100 dark:hover:bg-dark-bg md:top-1/2"
+          className={`absolute right-3 top-2 z-[60] flex h-10 w-10 items-center justify-center rounded-full border hover:cursor-pointer  hover:brightness-90 dark:border-gray-600 dark:hover:bg-dark-bg md:top-1/2 lg:right-40
+          `}
         >
           <SvgChevronRight className="dark:text-gray-50" />
         </button>