added divider without modifying DOM using CSS

apertium · Mar 22, 2024 · ad951f6 · ad951f6
1 parent 2d3d1cb
commit ad951f6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 20 deletions.
diff --git 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
@@ -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;
 }