Fix pinMapping dropdown layout issues

[Pelsin]

My CSS FU is not strong enough to solve the layout issues with css grid breaking to next column.

Modified it to use bootstrap rows.

This should resolve: #668

[andrepapoti]

LGTM

nit: You could use useMemo for const options

[andrepapoti]

options technically is a dependency but there are no practical differences since it is a const

[Pelsin]

Thanks for checking the pr out!

I believe that options is not a dependency needing to declare as it's not a reactive value, it's defined outside of the component

This is even matching an exact example from the new react docs on how to use dependency array with non reactive value:

const serverUrl = 'https://localhost:1234';
const roomId = 'general';

function ChatRoom() {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, []); // ✅ All dependencies declared
  // ...
}

Source: https://react.dev/learn/lifecycle-of-reactive-effects#what-an-effect-with-empty-dependencies-means

[arntsonl]

Looks good!