Merge and tweak markup editor expander CSS (#34409)

- 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: wxiaoguang <wxiaoguang@gmail.com>

1 files changed, 1 insertions, 0 deletions

diff --git a/web_src/js/features/comp/TextExpander.ts b/web_src/js/features/comp/TextExpander.ts
index 5be234629d..2d79fe5029 100644
--- a/web_src/js/features/comp/TextExpander.ts
+++ b/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);