Fix #488 (#494)

Attempted to fix #488 

Edited padding for `form-control` class in `bootstrap.css` to prevent
the copy and clear buttons from being on top of the translated text.

Little note: I am a little new to open source so excuse me if I did
something wrong.

---------

Co-authored-by: Sushain Cherivirala <sushain@skc.name>

Author: Cellzawy

src/components/translator/TextTranslationForm.tsx

@@ -239,7 +239,7 @@ const TextTranslationForm = ({
           aria-label={t('Input_Text')}
           as="textarea"
           autoFocus
-          className="mb-2"
+          className="mb-2 translation-text-input"
           dir={langDirection(srcLang)}
           onChange={({ target: { value } }) => setSrcText(value)}
           onKeyUp={handleSrcTextChange}
@@ -263,7 +263,7 @@ const TextTranslationForm = ({
       <Col md="6" xs="12">
         <Form.Control
           as="textarea"
-          className={classNames('bg-light mb-2', { 'text-danger': error })}
+          className={classNames('bg-light mb-2 translation-text-input', { 'text-danger': error })}
           dir={langDirection(tgtLang)}
           readOnly
           ref={tgtTextareaRef}

src/components/translator/translator.css

@@ -98,3 +98,11 @@ html[dir='rtl'] .translation-modes > :not(:first-child) {
   border-radius: 4px;
   height: 700px;
 }
+
+html[dir='ltr'] .translation-text-input {
+  padding-right: 1.85rem;
+}
+
+html[dir='rtl'] .translation-text-input {
+  padding-left: 1.85rem;
+}