Add a switch for UI design

[momobobe]

Currently on my phone (Android), navigation bar is on the left, however, it's showed there is/was a design that the bar is at the bottom as below

I'm a new user and not sure if that's an old design, but I feel it more comfortable and suitable especially for a small screen, so even if you have a new design, please provide a switch for fall back.

Or maybe it's the responsive design, but obviously not working correctly here, since my device is a phone instead of tablet. In this case, please also add a switch to allow users to decide whether to choose manually.

Thanks for your attention.

[KRTirtho]

Your phone must be really wide vertically. Can you state the resolution of your Android Smartphone?

[momobobe]

https://github.com/KRTirtho/spotube/blob/master/lib/hooks/useBreakpoints.dart#L75

  useEffect(() {
    if (width > 1920 && breakpoint.value != Breakpoints.xxl) {
      breakpoint.value = Breakpoints.xxl;
    } else if (width > 1366 &&
        width <= 1920 &&
        breakpoint.value != Breakpoints.xl) {
      breakpoint.value = Breakpoints.xl;
    } else if (width > 800 &&
        width <= 1366 &&
        breakpoint.value != Breakpoints.lg) {
      breakpoint.value = Breakpoints.lg;
    } else if (width > 414 &&
        width <= 800 &&
        breakpoint.value != Breakpoints.md) {
      breakpoint.value = Breakpoints.md;
    } else if (width >= 250 &&
        width <= 414 &&
        breakpoint.value != Breakpoints.sm) {
      breakpoint.value = Breakpoints.sm;
    }
    return null;
  }, [width]);

So you are using resolution to determine the responsive design, am I correct? Well, maybe it's fine for desktop in most cases, but ideally it should be determined by dpi along with resolution, which means with a higher dpi, the resolution should be higher correspondingly. For example, if a phone has a screen with resolution 4K, you cannot simply consider it suitable for a design same as desktop with 4K screen. Actually, IMO this problem can be simplified to solve like, left sidebar for landscape (length > width) and bottom for portrait (length < width). That's the simplest way.

[KRTirtho]

Currently we have a feature to manually select UI adaptation.

Settings > Appearance > Layout Mode