[Bug]: When viewing information in Korean using Chrome at 100% resolution [1920, 953], there is a bug where the top navigation text appears as two lines.

[ohe1013]

Summary

Summary

When viewing information in Korean using Chrome at 100% resolution [1920, 953], there is a bug where the top navigation text appears as two lines.

The bug occurs from 1919px to 1990px.
🤔It seems to be a problem that occurs when 1919px's media query, existing CSS, and Korean language meet.
😀I am posting this report because I think similar bugs may occur when other languages, even if not Korean, meet.

Checked in chrome, edge, and firefox.

Page

https://ko.react.dev/

Details

Details

Bug Report

Screen enlargement 90% (normal)

Screen enlargement 100% (abnormal)

Screen enlargement 100% (normal)

Environmental information, including operating system and browser information
Windows 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 Add text-nowrap to className of to-be Link

function NavItem({url, isActive, children}: any) {
  return (
    <div className="flex flex-auto">
      <Link
        href={url}
         // this line's text-nowrap
        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>
  );
}