From a74338fe15bee0fbc65a5197ee56db5d6a629bc8 Mon Sep 17 00:00:00 2001
From: towfiqi <tislam100@gmail.com>
Date: Sat, 9 Nov 2024 21:44:04 +0600
Subject: [PATCH] feat: Displays Best position on mobile layout as well.

---
 components/keywords/Keyword.tsx | 6 +++---
 styles/globals.css              | 7 +++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/keywords/Keyword.tsx b/components/keywords/Keyword.tsx
index ed63cde..404e16b 100644
--- a/components/keywords/Keyword.tsx
+++ b/components/keywords/Keyword.tsx
@@ -136,8 +136,8 @@ const Keyword = (props: KeywordProps) => {
          title={bestPosition && bestPosition.date
             ? new Date(bestPosition.date).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' }) : ''
          }
-         className={`keyword_best hidden bg-[#f8f9ff] w-fit min-w-[50px] h-12 p-2 text-base mt-[-20px] rounded right-5 lg:relative lg:block
-          lg:bg-transparent lg:w-auto lg:h-auto lg:mt-0 lg:p-0 lg:text-sm lg:flex-1 lg:basis-16 lg:grow-0 lg:right-0 text-center font-semibold
+         className={`keyword_best mr-1 bg-[#f8f9ff] float-right mt-8 w-14 rounded right-5 lg:relative lg:block
+          lg:bg-transparent lg:w-auto lg:h-auto lg:mt-0 lg:mr-0 lg:p-0 lg:text-sm lg:flex-1 lg:basis-16 lg:grow-0 lg:right-0 text-center font-semibold
           ${!tableColumns.includes('Best') ? 'lg:hidden' : ''}
           `}>
             {bestPosition ? bestPosition.position || '-' : (position || '-')}
@@ -152,7 +152,7 @@ const Keyword = (props: KeywordProps) => {
          )}
 
          <div
-         className={`keyword_best hidden bg-[#f8f9ff] w-fit min-w-[50px] h-12 p-2 text-base mt-[-20px] rounded right-5 lg:relative lg:block
+         className={`hidden bg-[#f8f9ff] w-fit min-w-[50px] h-12 p-2 text-base mt-[-20px] rounded right-5 lg:relative lg:block
           lg:bg-transparent lg:w-auto lg:h-auto lg:mt-0 lg:p-0 lg:text-sm lg:flex-1 lg:basis-24 lg:grow-0 lg:right-0 text-center
           ${!tableColumns.includes('Volume') ? 'lg:hidden' : ''}
           `}>
diff --git a/styles/globals.css b/styles/globals.css
index 54a4289..c7a55c2 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -305,6 +305,13 @@ body {
    background-color: #f9ded7;
 }
 
+@media screen and (max-width: 760px){
+   .keyword_best:before{
+      content: "Best: ";
+   }
+}
+
+
 /* Disable LastPass Icon for Secret Field */
 [autocomplete="off"] + div[data-lastpass-icon-root="true"], [autocomplete="off"] + div[data-lastpass-infield="true"] {
    display: none;