Vertical lines disappear for some reason on PHPStorm

[Van4kk]

Have you checked the issues and discussions to ensure there are no duplicates?

Yes

Your programming languages

PHP, TSX, JSX

Free or paid?

Free users

Expected Behavior

to have colored vertical lines like here

Current Behavior

for some reason the vertical lines desapeare after save, on local, on remote, doesn't matter

Code snippet for reproduce

import React from 'react';

type ToggleOption = {
  title: string;
  value: string;
  content?: React.ReactNode;
};

type ToggleSwitchProps = {
  options: ToggleOption[];
  onChange: (value: string) => void;
};

const HorizontalToggleSwitch: React.FC<ToggleSwitchProps> = ({ options, onChange }) => {
  const [selectedOption, setSelectedOption] = React.useState(options[0].value);
  const [animationClass, setAnimationClass] = React.useState('');

  React.useEffect((): void => {
    const currentIndex: number = options.findIndex((option: ToggleOption): boolean => option.value === selectedOption);
    const animation: string = `moveTo-${currentIndex === 0 ? 'left' : currentIndex === options.length - 1 ? 'right' : 'center'}`;
    setAnimationClass(animation);
  }, [selectedOption, options]);

  const handleChange = (value: string, index: number): void => {
    setAnimationClass(`moveTo-${value}`);
    setSelectedOption(value);
    onChange(value);
  };

  return (
    <div className='relative mt-16 inline-flex h-12 w-full justify-around overflow-hidden rounded-lg border bg-[#4d4d4d] bg-background shadow md:h-8'>
      <div
        className={`toggle-switch disabled:opacity-50" absolute z-[1] h-full w-12 rounded-lg border border-input bg-background bg-white ring-offset-background transition duration-500 ease-in-out file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-primary/50 focus-visible:outline-none focus-visible:ring focus-visible:ring-primary/10 disabled:cursor-not-allowed ${animationClass} ${selectedOption}-position`}
        style={{
          width: `${100 / options.length}%`,
          left: `${(options.findIndex((option: ToggleOption): boolean => option.value === selectedOption) * 100) / options.length}%`,
        }}></div>
      {options.map((option: ToggleOption, index: number) => (
        <React.Fragment key={option.value}>
          <input
            id={option.value}
            type='radio'
            name='toggle-switch'
            value={option.value}
            checked={selectedOption === option.value}
            onChange={() => handleChange(option.value, index)}
            className='hidden'
          />
          <label
            htmlFor={option.value}
            className={`toggle-label flex h-full w-1/5 cursor-pointer items-center justify-center text-center text-white transition duration-300 ${selectedOption === option.value ? 'active' : ''}`}
            style={{ width: `${100 / options.length}%` }}>
            {option.content ? (
              typeof option.content === 'string' ? (
                <span>{option.content}</span>
              ) : (
                option.content
              )
            ) : (
              <span>{option.title}</span> // Fallback to title if content is not provided
            )}
          </label>
        </React.Fragment>
      ))}
    </div>
  );
};

export default HorizontalToggleSwitch;

Your Environment

PHP Storm Build #PS-241.18034.69, built on June 21, 2024 on Windows. Plugin Build 2024.2.6-241

Also I'm using eslint and prettier for TSX and JSX, maybe this can be the problem, but it is too random. The code snipped from the screenshot where the lines work ok is a file with about ~170 lines, the broked one is ~70, but earlier it worked for the one with ~70 lines and didn't work for the one with ~170 line.