From d1223eefa922313168a9d733e45c7c8e8a5367eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gwenae=CC=88l=20Gallon?= <gwenael.gallon@mac.com>
Date: Thu, 9 Jun 2022 01:37:13 +0200
Subject: [PATCH] Fix directory divide li

---
 components/layout/directory.tsx |  3 +--
 styles/globals.css              | 10 ++++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/components/layout/directory.tsx b/components/layout/directory.tsx
index 6597fab..8228404 100644
--- a/components/layout/directory.tsx
+++ b/components/layout/directory.tsx
@@ -74,7 +74,7 @@ export default function Directory({
               <div className="bg-dark-accent-1 px-6 py-1 text-sm font-bold text-white uppercase">
                 <h3>{letter}</h3>
               </div>
-              <ul role="list" className="relative z-0">
+              <ul role="list" className="relative z-0 directory-divide-y">
                 {users.map((user) => (
                   <li key={user.username}>
                     <Link href={`/${user.username}`}>
@@ -108,7 +108,6 @@ export default function Directory({
                               @{user.username}
                             </p>
                           </div>
-                          <div className="w-full left-3 bg-dark-accent-2 bottom-0 h-[1px] absolute" />
                         </div>
                       </a>
                     </Link>
diff --git a/styles/globals.css b/styles/globals.css
index 9749d81..1a590fc 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,4 +1,14 @@
 @tailwind base;
+
+.directory-divide-y > li:not(:last-child):after {
+  content: '';
+  display: block;
+  width: calc(100% - 24px);
+  transform: translateX(24px);
+  height: 1px;
+  background: #333333;
+}
+
 @tailwind components;
 @tailwind utilities;