From 2d3d1cbc99ab3a72daff67bce9a094c533fef1f5 Mon Sep 17 00:00:00 2001
From: Nurali <nuralirakhay@gmail.com>
Date: Thu, 21 Mar 2024 22:04:33 +0500
Subject: [PATCH 1/2] added dividers between languages

---
 .../translator/LanguageSelector.tsx           | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/components/translator/LanguageSelector.tsx b/src/components/translator/LanguageSelector.tsx
index 23cec8d8f..2120b7a8b 100644
--- a/src/components/translator/LanguageSelector.tsx
+++ b/src/components/translator/LanguageSelector.tsx
@@ -211,23 +211,28 @@ const LangsDropdown = ({
       const [code, name] = langs[j];
       const valid = !validLang || validLang(code);
       langElems.push(
-        <button
-          className={classNames('language-name', {
-            'variant-language-name': isVariant(code),
-            'text-muted': !valid,
-          })}
-          disabled={!valid}
-          key={code}
-          onClick={() => {
-            setLang(code);
-            document.body.click();
-          }}
-          tabIndex={0}
-        >
-          {name}
-        </button>,
+        <div>
+          <button
+            className={classNames('language-name', {
+              'variant-language-name': isVariant(code),
+              'text-muted': !valid,
+            })}
+            disabled={!valid}
+            key={code}
+            onClick={() => {
+              setLang(code);
+              document.body.click();
+            }}
+            tabIndex={0}
+          >
+            {name}
+          </button>
+
+          <div style={{ height: '0.5px', backgroundColor: 'gray', opacity: '30%' }} />
+        </div>,
       );
     }
+
     langCols.push(
       <div className="language-name-col" key={i} style={{ width: `${100.0 / numCols}%` }}>
         {langElems}

From ad951f6102687a2c96ae088c4abbd69525def889 Mon Sep 17 00:00:00 2001
From: Nurali <nuralirakhay@gmail.com>
Date: Fri, 22 Mar 2024 20:12:52 +0500
Subject: [PATCH 2/2] added divider without modifying DOM using CSS

---
 .../translator/LanguageSelector.tsx           | 34 ++++++++-----------
 src/components/translator/translator.css      | 13 ++++++-
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/components/translator/LanguageSelector.tsx b/src/components/translator/LanguageSelector.tsx
index 2120b7a8b..77962e97b 100644
--- a/src/components/translator/LanguageSelector.tsx
+++ b/src/components/translator/LanguageSelector.tsx
@@ -211,25 +211,21 @@ const LangsDropdown = ({
       const [code, name] = langs[j];
       const valid = !validLang || validLang(code);
       langElems.push(
-        <div>
-          <button
-            className={classNames('language-name', {
-              'variant-language-name': isVariant(code),
-              'text-muted': !valid,
-            })}
-            disabled={!valid}
-            key={code}
-            onClick={() => {
-              setLang(code);
-              document.body.click();
-            }}
-            tabIndex={0}
-          >
-            {name}
-          </button>
-
-          <div style={{ height: '0.5px', backgroundColor: 'gray', opacity: '30%' }} />
-        </div>,
+        <button
+          className={classNames('language-name', {
+            'variant-language-name': isVariant(code),
+            'text-muted': !valid,
+          })}
+          disabled={!valid}
+          key={code}
+          onClick={() => {
+            setLang(code);
+            document.body.click();
+          }}
+          tabIndex={0}
+        >
+          {name}
+        </button>,
       );
     }
 
diff --git a/src/components/translator/translator.css b/src/components/translator/translator.css
index abf40320e..71b711e7e 100644
--- a/src/components/translator/translator.css
+++ b/src/components/translator/translator.css
@@ -43,7 +43,6 @@ html[dir='rtl'] .copy-text-button {
 
 .language-name {
   display: block;
-  padding: 0;
   overflow-x: hidden;
   position: relative;
   text-overflow: ellipsis;
@@ -53,6 +52,18 @@ html[dir='rtl'] .copy-text-button {
   text-align: unset;
 }
 
+.language-name:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 0.5px;
+  width: 100%;
+  background-color: black;
+  opacity: 30%;
+  display: block;
+}
+
 html[dir='ltr'] .language-name {
   padding-left: 0.5em;
 }