From 408e74a13e7772d85916c696dbb35dc79a02423a Mon Sep 17 00:00:00 2001
From: RodrigoEC <rodrigo.cavalcanti@ccc.ufcg.edu.br>
Date: Wed, 14 Aug 2024 10:30:04 -0300
Subject: [PATCH] Fix glossary list post width bug

---
 components/Glossary/GlossaryItem.tsx | 6 +++---
 sections/GlossaryPost.tsx            | 4 +---
 sections/GlossaryPostList.tsx        | 2 +-
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/components/Glossary/GlossaryItem.tsx b/components/Glossary/GlossaryItem.tsx
index 298b7737..e0b49e39 100644
--- a/components/Glossary/GlossaryItem.tsx
+++ b/components/Glossary/GlossaryItem.tsx
@@ -14,8 +14,8 @@ function GlossaryItem({
   disabled?: boolean;
 }) {
   const styles = {
-    disabled: "opacity-60 pointer-events-none",
-    regular: "hover:text-[#02F67C] hover:bg-[#0D171790]",
+    disabled: "opacity-70 pointer-events-none",
+    regular: "text-[#C9CFCF] hover:text-[#02F67C] hover:bg-[#0D171790]",
   };
   return (
     <a
@@ -23,7 +23,7 @@ function GlossaryItem({
       disabled={disabled}
       class={`${
         disabled ? styles.disabled : styles.regular
-      } flex items-center justify-between w-full h-fit py-2 px-4 gap-2 font-medium text-[#C9CFCF] rounded-lg transition duration-300`}
+      } flex items-center justify-between w-full h-fit py-2 px-4 gap-2 font-medium rounded-lg transition duration-300`}
     >
       <span class="text-lg">{title}</span>
       <Icon id="right-arrow" size={12} />
diff --git a/sections/GlossaryPost.tsx b/sections/GlossaryPost.tsx
index e04edf15..8ae8c91e 100644
--- a/sections/GlossaryPost.tsx
+++ b/sections/GlossaryPost.tsx
@@ -115,8 +115,6 @@ export default function GlossaryPost({ slug, posts, CTA, disclaimer }: Props) {
     return titleA?.localeCompare(titleB);
   });
 
-  console.log(posts);
-
   const { title, image, content, excerpt } = post || DEFAULT_PROPS;
 
   function getFirstLetter(title: string) {
@@ -169,7 +167,7 @@ export default function GlossaryPost({ slug, posts, CTA, disclaimer }: Props) {
         <h1 className="text-5xl text-white font-[argent-pixel]">{title}</h1>
       </div>
       <div class="flex flex-col lg:flex-row gap-10 lg:gap-4 justify-center">
-        <div class="flex-col flex min-w-[240px]">
+        <div class="flex flex-col gap-1 mx-2 min-w-[240px]">
           {posts
             ?.filter(
               (post) => getFirstLetter(post?.title) === getFirstLetter(title)
diff --git a/sections/GlossaryPostList.tsx b/sections/GlossaryPostList.tsx
index 7924b15e..0e8164f6 100644
--- a/sections/GlossaryPostList.tsx
+++ b/sections/GlossaryPostList.tsx
@@ -45,7 +45,7 @@ export default function GlossaryPostList({ posts }: Props) {
 
   return (
     <section class="bg-black flex justify-center mb-20">
-      <div class="flex flex-col bg-black items-center px-2">
+      <div class="flex flex-col bg-black items-center w-full px-2">
         <div class="flex overflow-scroll hidden-scroll mb-16 max-w-full w-fit">
           {alphabet.map((letter) => {
             return (