Enhance UI to Display 4 Octaves Simultaneously and Update Octave Range Dropdown

[baync180705]

Description:

Currently, the on-screen keyboard shows only one octave at a time, and users switch octaves using a dropdown.
We want to enhance this so that four consecutive octaves are displayed at once (for example: 4, 5, 6, 7).

(SCREENSHOT HAS BEEN ATTACHED FOR YOUR REFERENCE)

The dropdown will now control which range of octaves is visible:

• 3–6
• 4–7
• 5–8

Tasks:

• Modify keyboard layout component to render four octaves side by side.
• Adjust dropdown logic to manage ranges instead of single octaves.
• Ensure clean spacing and proper visual separation between octaves.
• Keep the design consistent with the current dark UI theme.
• Make sure layout is responsive on different screen widths.

Expected Outcome:

• 4 octaves (e.g., 4, 5, 6, 7) visible at once.
• Dropdown changes the visible octave range (3–6, 4–7, 5–8).
• No overlap or distortion in keyboard visuals.