Use width calculation select width

elixir-lang · Jan 9, 2025 · a1abbec · a1abbec
1 parent c03a3f2
commit a1abbec
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/assets/css/sidebar.css b/assets/css/sidebar.css
@@ -111,7 +111,7 @@
 
 .sidebar .sidebar-staleVersion {
     display: inline;
-    padding-left: 8px;
+    padding-left: 4px;
 }
 
 .sidebar .sidebar-staleVersion > a {

diff --git a/assets/js/sidebar/sidebar-version-select.js b/assets/js/sidebar/sidebar-version-select.js
@@ -30,7 +30,24 @@ function renderVersionsDropdown ({ nodes, latestVersion }) {
   const versionsDropdownHtml = versionsDropdownTemplate({ nodes, latestVersion })
   versionsContainer.innerHTML = versionsDropdownHtml
 
-  qs(VERSIONS_DROPDOWN_SELECTOR).addEventListener('change', handleVersionSelected)
+  const select = qs(VERSIONS_DROPDOWN_SELECTOR)
+  select.addEventListener('change', handleVersionSelected)
+  adjustWidth(select)
+}
+
+// Function to adjust the width of the select element
+const adjustWidth = (select) => {
+  // Create a temporary element to measure the width
+  const temp = document.createElement('span')
+  temp.style.visibility = 'hidden'
+  temp.style.position = 'absolute'
+  temp.style.whiteSpace = 'nowrap'
+  temp.style.font = window.getComputedStyle(select).font
+  temp.textContent = select.options[select.selectedIndex].text
+
+  document.body.appendChild(temp)
+  select.style.width = `${temp.offsetWidth + 20}px`
+  document.body.removeChild(temp)
 }
 
 /**