diff --git a/convert_script.js b/convert_script.js index 7d25eba..785bd2b 100644 --- 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 index 5a02f96..304afa6 100644 --- 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,