Merge and tweak markup editor expander CSS (#34409) (#34415)

Backport #34409 by @silverwind

- Merge the CSS for the two expanders (text-expander-element and
tribute.js) into one file
- Fix overflow issues
- Remove min-width
- Various other tweaks like borders, colors, padding, gaps.

text-expander:

<img width="645" alt="Screenshot 2025-05-09 at 02 21 24"
src="https://github.com/user-attachments/assets/33276dc4-38e8-45e1-8216-2a4baa9bc039"
/>

tribute:

<img width="624" alt="Screenshot 2025-05-09 at 02 21 37"
src="https://github.com/user-attachments/assets/91fbcd1a-9bfc-40fd-93f0-a05b4bd4c98d"
/>

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/js/features/comp/TextExpander.ts

@@ -97,6 +97,7 @@ export function initTextExpander(expander: TextExpanderElement) {
         li.append(img);
 
         const nameSpan = document.createElement('span');
+        nameSpan.classList.add('name');
         nameSpan.textContent = name;
         li.append(nameSpan);