Rallly移动端投票选项显示问题的分析与解决方案

问题背景

在Rallly项目的移动端实现中，用户报告了一个关于投票选项显示不完整的问题。具体表现为在Firefox Mobile浏览器上，当设备处于竖屏模式时，投票选项的复选框无法显示，而在横屏模式下则能正常显示。这个问题主要出现在三星Galaxy A52s 5G设备上，使用Firefox Mobile 131.0.3版本时尤为明显。

问题分析

经过技术团队的深入调查，发现这个问题主要由以下几个因素共同导致：

1. 视口宽度限制：在竖屏模式下，设备的有效视口宽度仅为342px，而投票选项的布局设计没有充分考虑这种狭窄空间下的显示需求。

2. 时间格式影响：当使用12小时制(AM/PM)显示时间时，时间字符串会占用更多水平空间，进一步压缩了可用宽度。

3. CSS弹性布局问题：投票选项中的时间显示元素被设置为不可收缩(flex-shrink: 0)，导致在空间不足时无法自动调整大小，而是将复选框挤出可视区域。

解决方案

针对这个问题，技术团队提出了以下解决方案：

1. 响应式布局调整

核心思路是根据视口宽度动态调整显示内容。具体实现包括：

• 在狭窄视口下(约370-380px以下)隐藏持续时间显示
• 保留基本的时间范围信息(开始时间-结束时间)
• 确保复选框始终可见

2. 代码实现

修改位于apps/web/src/components/poll/mobile-poll/time-slot-option.tsx的组件代码，增加响应式逻辑：

return (
  <PollOption {...rest}>
    <div className="flex items-center gap-x-4 text-sm">
      <div>{`${startTime} - ${endTime}`}</div>
      {((breakpoint === 'showDuration') || breakpoint !== 'showDuration' && !showVotes) && (
        <div className="flex items-center gap-x-1.5 opacity-50">
          <ClockIcon className="size-4" />
          {duration}
        </div>
      )}
    </div>
  </PollOption>
);

3. 设计考量

这个解决方案基于以下设计原则：

1. 信息优先级：确保核心功能(投票选择)始终可用，次要信息(持续时间)在空间充足时显示
2. 渐进增强：在较宽视口下显示完整信息，在狭窄视口下提供基本功能
3. 一致性：保持横竖屏体验的一致性，避免布局突变

技术影响评估

这个改动对项目的影响较小，主要优点包括：

1. 不改变现有API接口
2. 仅涉及前端展示逻辑
3. 向后兼容，不影响已有数据
4. 对性能影响可以忽略不计

最佳实践建议

基于这个问题的解决经验，对于类似项目我们建议：

1. 在开发移动端界面时，应该测试多种视口尺寸，特别是300-400px范围的狭窄视口
2. 对于包含多个信息元素的组件，应该建立明确的信息优先级体系
3. 使用响应式设计原则，确保核心功能在不同设备上都能正常使用
4. 考虑不同地区的时间格式差异对布局的影响

这个问题现已修复，用户可以在各种移动设备上正常使用Rallly的投票功能。