fixed screen2 buttons, made language picker width adapt to fit the se…

…lected option
aleksbrsc · Jan 27, 2024 · 84701ed · 84701ed
1 parent b22ca05
commit 84701ed
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/convert_script.js b/convert_script.js
@@ -48,9 +48,19 @@ function initApp() {
     changeScreen('screen1');
 
     document.getElementById('imageInput').addEventListener('change', handleImage);
-
+    
     const languagePicker = document.getElementById('languagePicker');
 
+    // resize the language picker to fit the selected option
+    languagePicker.addEventListener('change', function() {
+        const selectedOption = this.options[this.selectedIndex];
+        const selectedOptionText = selectedOption.text;
+        const selectedOptionLength = selectedOptionText.length;
+        const maxOptionWidth = selectedOptionLength > 13 ? 13 : selectedOptionLength;
+
+        this.style.maxWidth = `${maxOptionWidth}rem`;
+    });
+
     const languageDictionary = {
     "Chinese (Simplified)": ["chi_sim","zh-TW"],
     "English": ["eng","en"],

diff --git a/style.css b/style.css
@@ -111,9 +111,7 @@ main {
     border: none;
     font-family: Karla;
     font-size: 1.25rem;
-    margin-left: 2rem;
-    padding: 0px;
-
+    margin-left: 1rem;
     max-width: 13rem;
 
 }
@@ -265,7 +263,12 @@ textarea:focus {
     color: #1E1E1E;
 }
 
+.button a {
+    text-decoration: none;
+}
+
 #reupload {
+    text-decoration: none;
     width: 8rem;
     height: 2.7rem;
     flex-shrink: 0;
@@ -300,6 +303,7 @@ textarea:focus {
     background:
         linear-gradient(300deg, rgba(80, 127, 237, 0.5), rgba(133, 60, 226, 0.5)) padding-box,
         linear-gradient(300deg, rgba(80, 127, 237, 0.5), rgba(133, 60, 226, 0.5)) border-box;
+    overflow: hidden;
 }
 
 #convert:hover,