概览（整体思路）

让外层容器"由内容决定宽度"的关键：移除固定宽度，并使容器参与行内排版。在 Tailwind 里常用组合是 inline-flex + w-fit（或 w-auto），外加 shrink-0 防止父级 flex 压缩。保持内部文本可截断、图标对齐不变。

---

实现步骤（Step by Step）

1) 替换容器的布局类

把 w-[260px] 去掉；把 flex 改成 inline-flex；增加 w-fit（或 w-auto）与 shrink-0。

// 改动点：由内容撑开，用 inline-flex + w-fit，并防止被父级压缩 :class="[
'inline-flex w-fit shrink-0 h-10 items-center justify-between cursor-pointer
px-3 transition-colors', disabled ? 'cursor-not-allowed opacity-50' :
'hover:border-ink-400', ]"

若 Tailwind 版本不支持 w-fit，请改用 w-auto。

2) 处理文本溢出（可选）

如果外层不再固定宽度但内部仍可能很长，你可以：

• 保留 truncate 以单行省略
• 或者强制不换行 whitespace-nowrap
• 若仍担心被父级挤压，父容器里给可收缩项加 min-w-0

<!-- 在文本节点上保留或添加 -->
<div class="ink-20 font-semibold text-ink-950 truncate whitespace-nowrap">
  {{ selectedAccount.account_name }} #{{ selectedAccount.loginid }}
</div>

---

最小改动代码片段（只给需要调整的行）

// 把原来的 'w-[260px] h-10 flex ...' 替换为如下： 'inline-flex w-fit shrink-0
h-10 items-center justify-between cursor-pointer px-3 transition-colors'

---

常用样式作用速查

• inline-flex：行内级弹性盒；元素宽度由内容自然决定，并与文本/行内元素在一行排列。
• w-fit：宽度收缩到内容尺寸（不超出内容本身）。老版本可用 w-auto 替代。
• shrink-0：在父级 flex 布局下不被挤压，防止"越包越小"。
• h-10：固定高度，保证交互区尺寸一致。
• items-center：纵向居中（交叉轴）。
• justify-between：左右分散对齐，常用于"文本 + 图标"的两端布局。
• cursor-pointer：可点击的手型指针。
• px-3：左右内边距，增大点击热区。
• transition-colors：颜色类变化时有过渡动画，更柔和。
• hover:border-ink-400：悬停时的边框颜色反馈（需父级/自身有边框或相应样式时更明显）。
• opacity-50：半透明，常配合禁用态。
• cursor-not-allowed：禁用态鼠标样式。
• truncate：单行省略号，需要同时具备 overflow-hidden 与 whitespace-nowrap 前提（Tailwind 的 truncate 已包含）。
• whitespace-nowrap：强制不换行，避免由空格导致折行。

---

进阶建议（按需选用）

• 限制最大宽度：内容可能过长时加 max-w-[xx]（如 max-w-[16rem]）并配合 truncate。
• 图标与文字稳定对齐：在图标上保留固定尺寸 size="26" 或 Tailwind 的 w-6 h-6。
• 父级是 Flex 容器：给"可能被压缩的子项"加 min-w-0，而给"必须不被压缩的"加 shrink-0。

---

小结

把固定宽度改为"行内弹性 + 贴内容宽"即可：inline-flex + w-fit + shrink-0。这套组合既能让外层由内容撑开，又能在复杂父布局中避免被挤压，配合 truncate/whitespace-nowrap/max-w-* 可控地处理极端长文本。