Fix glossary list post width bug

deco-sites · Aug 14, 2024 · 408e74a · 408e74a
1 parent f77198b
commit 408e74a
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 7 deletions.
diff --git a/components/Glossary/GlossaryItem.tsx b/components/Glossary/GlossaryItem.tsx
@@ -14,16 +14,16 @@ 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
       href={link}
       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
@@ -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
@@ -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 (