表格图标在hover/active/focus时缩小问题（Next.js+Tailwind）

问题现象 #

• 正常状态：图标显示正常
• Hover搜索图标展开搜索栏：筛选图标缩小
• 点击筛选图标展开筛选块：两个图标均缩小

问题根源 #

1. Flex容器空间分配冲突：输入框/筛选块展开时，flex布局会自动挤压同行元素空间，而图标没有设置最小尺寸约束，导致被压缩
2. 输入框的负margin（group-hover:-mr-4）进一步挤占了图标的可用空间
3. 筛选按钮的active:w-full focus:w-full会让按钮拉伸，挤压内部图标

修复代码 #

<table className=''>
  <thead>
    <tr className='[&>*]:text-xs [&>*]:border-1 [&>*]:border-black'>
      <th className='w-full'>
        {/* 外层flex添加flex-wrap，避免空间不足时强制挤压 */}
        <div className='flex items-center flex-wrap'>
          {/* 搜索容器添加flex-shrink-0，防止被挤压 */}
          <div className='flex items-center group w-fit sm:w-full flex-shrink-0 relative'>
            {/* 输入框改用相对定位覆盖，而非挤压空间 */}
            <input
              type='search'
              placeholder='Zoeken...'
              className='shadow-lighterAlt w-0 group-hover:w-full active:w-full focus:w-full 
                group-hover:p-1 active:p-1 focus:p-1 transition-width duration-500 ease-in-out 
                z-10 focus:outline-0 rounded-md absolute left-0 top-0 bg-white
                sm:group-hover:w-1/3 sm:active:w-1/3 sm:focus:w-1/3 
                lg:group-hover:w-72 lg:active:w-72 lg:focus:w-72'
              onKeyUp={(e) => {
                e.target.value.length === 0
                  ? setSearchResults(events)
                  : setSearchResults(findEvent(e.target.value))
                console.log(findEvent(e.target.value))
                console.log(events)
              }}
            />
            {/* 给图标父元素设置固定最小尺寸，防止被压缩 */}
            <div className='min-w-[25px] min-h-[25px] relative z-20'>
              <Image
                src={searchIcon}
                alt='Zoek icoon'
                className='bg-red-breda rounded-md p-1 shadow-lighterAlt'
                width='25'
                height='25'
              />
            </div>
          </div>
          {/* 筛选按钮移除w-full，改用flex-shrink-0保证尺寸 */}
          <button
            type='button'
            className='flex items-center group w-fit flex-shrink-0 ml-2'
          >
            {/* 同样给图标父元素设置最小尺寸 */}
            <div className='min-w-[25px] min-h-[25px]'>
              <Image
                src={filterIcon}
                alt='Filter icoon'
                className='bg-red-breda rounded-md p-1 shadow-lighterAlt'
                width='25'
                height='25'
              />
            </div>
            <div className='z-10 hidden group-active:flex group-focus:flex bg-red-breda text-white -ml-0.5 p-1 rounded-r-md'>
              Filters
            </div>
          </button>
        </div>
      </th>
      <th className='whitespace-nowrap'>Start en einddatum</th>
    </tr>
  </thead>
  <tbody>
    {searchResults.map((event) => {
      return (
        <tr
          key={event._id}
          className='[&>*]:text-xs [&>*]:border-1 [&>*]:border-black'
        >
          <td>
            <div className='flex flex-col'>
              <span>{event.name}</span>
              <span>
                {event.startTime ? convertDateTime(event.startTime) : ''}
                {event.startTime && ' - '}
                {event.startTime ? convertDateTime(event.startTime) : ''}
              </span>
            </div>
          </td>
          <td>
            <div className='flex justify-center items-center [&>*]:mx-2'>
              <button
                type='button'
                className='flex items-center group w-fit relative'
              >
                <Image
                  src={infoIcon}
                  alt='Info icoon'
                  className=''
                  width='20'
                  height='20'
                />
                <div className='z-10 hidden group-active:flex group-focus:flex bg-red-breda text-white -ml-0.5 p-1 rounded-r-md absolute w-fit -top-10 -left-4'>
                  Event Info
                </div>
              </button>
              <label className='relative inline-flex items-center mr-5 cursor-pointer'>
                <input
                  type='checkbox'
                  value=''
                  className='sr-only peer'
                  checked={eventAuth}
                  onClick={() => toggleEventAuth(!eventAuth)}
                />
                <div className="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-red-300 dark:peer-focus:ring-red-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-red-breda"></div>
              </label>
            </div>
          </td>
        </tr>
      )
    })}
  </tbody>
</table>

关键改动说明 #

1. 图标容器锁死最小尺寸：给搜索、筛选图标的父元素设置min-w-[25px] min-h-[25px]，强制保留图标基础空间，不会被flex布局挤压
2. 输入框改为绝对定位：让输入框覆盖在图标后方展开，避免挤占图标空间，同时给图标设置更高z-index保证点击优先级
3. 调整flex布局属性：给搜索容器、筛选按钮添加flex-shrink-0，防止它们在空间不足时被压缩；外层flex加flex-wrap，小屏幕下自动换行避免拥挤
4. 移除按钮的拉伸属性：删掉筛选按钮的active:w-full focus:w-full，避免按钮拉伸挤压内部图标

内容的提问来源于stack exchange，提问作者ronald-it