[Bug]: 해상도 [1920, 953]에서 100%로 chrome으로 정보를 볼때 상단 네비게이션 텍스트가 2줄로 보이는 버그가 발생하고 있습니다.

[ohe1013]

Summary

해상도 [1920, 953]에서 100%로 chrome으로 정보를 볼때 상단 네비게이션 텍스트가 2줄로 보이는 버그가 발생하고 있습니다.

1919px 에서 1990px까지 해당 버그가 발생합니다. chrome, edge, firefox에서 확인하였습니다.

Page

https://ko.react.dev/

Details

버그 리포트 (Bug Report)

해상도 [1920, 953]에서 100%로 chrome으로 정보를 볼때 상단 네비게이션 텍스트가 2줄로 보이는 버그가 발생하고 있습니다. 1919px일때의 css + 한국어 조합 때문에 발생한 것 같습니다.

예상 동작과 실제 동작의 차이

화면확대 90% (정상)

화면확대 100% (2줄보임)

화면확대 110%

운영 체제, 브라우저 정보 등 환경 정보 윈도우 10, crhome 124.0.6367.208

기능 제안 (Feature Request)

as-is

function NavItem({url, isActive, children}: any) {
  return (
    <div className="flex flex-auto">
      <Link
        href={url}
        className={cn(
          'active:scale-95 transition-transform w-full text-center outline-link py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full capitalize',
          !isActive && 'hover:bg-primary/5 hover:dark:bg-primary-dark/5',
          isActive &&
            'bg-highlight dark:bg-highlight-dark text-link dark:text-link-dark'
        )}>
        {children}
      </Link>
    </div>
  );
}

to-be Link의 className에 text-nowrap 추가

function NavItem({url, isActive, children}: any) {
  return (
    <div className="flex flex-auto">
      <Link
        href={url}
        className={cn(
          'active:scale-95 transition-transform w-full text-center outline-link py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full capitalize text-nowrap',
          !isActive && 'hover:bg-primary/5 hover:dark:bg-primary-dark/5',
          isActive &&
            'bg-highlight dark:bg-highlight-dark text-link dark:text-link-dark'
        )}>
        {children}
      </Link>
    </div>
  );
}

[hg-pyun]

다른 언어에도 충분히 발생할 수 있는 문제이기 때문에 제안해주신 방법을 ko repository에 적용하는 것보다 원래 en repository에 반영하고 땡겨오는 형태로 개선하는게 조금 더 파급효과가 클 것 같군요. 여기에 올려서 다국어 대응에 대한 처리를 반영해보면 어떨까요?

[ohe1013]

감사합니다. en repository에 issue, pr 만들어서 올렸습니다.