AnkiDroid 2.20版本中Deck Options界面右侧截断问题分析

在AnkiDroid 2.20alpha版本中，用户报告了一个界面显示问题：Deck Options（牌组选项）界面的右侧内容被截断。这个问题在多种设备和语言环境下都能复现，特别是在非英语环境下更为明显。

问题现象

用户反馈在2.20alpha1版本中，Deck Options界面的右侧部分内容被截断，无法完整显示。这个问题在多种Android设备上都能复现，包括三星SM-A256B（Android 14）和SM-A225F（Android 13）等机型。

问题根源

经过技术分析，发现这个问题与2.20版本中新增的"Easy Days"表格有关。该表格在某些语言环境下（如德语）会变得过宽，超过了屏幕宽度（360px）。由于界面元素设置为100%宽度，这导致所有元素的宽度都受到影响，最终导致右侧内容被截断。

技术细节

在界面布局中，有两个关键的div元素（位于container-columns类中）没有设置最大宽度限制。当内容过长时，这些元素会扩展超出屏幕边界，导致显示问题。具体来说，这两个div分别对应着DeckOptionsPage.svelte文件中的两个关键布局区域。

解决方案

开发团队通过为这两个div元素设置合理的最大宽度解决了这个问题：

document.getElementsByClassName("container-columns")[0].childNodes[0].style.maxWidth = "calc(100vw - var(--gutter-inline) * 2)"
document.getElementsByClassName("container-columns")[0].childNodes[2].style.maxWidth = "calc(100vw - var(--gutter-inline) * 2)"

这个修复确保了界面元素不会超出屏幕可视范围，同时保持了良好的布局适应性。

类似问题

值得注意的是，类似的布局问题也出现在统计页面的"真实保留率"表格中。在德语环境下，"Fehlversuche"和"Erfolgsquote"等标题文本会超出列宽限制，而第一列却留有空白空间。这表明AnkiDroid在表格布局和文本自适应方面还有改进空间。

问题状态

该问题已在2.20alpha11版本中得到修复，用户反馈问题已解决。开发团队将继续关注类似界面布局问题，确保在各种语言环境下都能提供良好的用户体验。