Bad display on mobile device

[Didayolo]

The display is problematic and cluttered on mobile device, as shown by the screenshots below. Tested on an Android device, on Firefox browser. We did not have this problem on CodaLab Competitions. Even if the site is mostly used on computers, it is still important to have a clean interface when browsing from a smartphone.

[Didayolo]

Remark: when enabling "desktop version" on mobile, the display is satisfying.

[Didayolo]

While forcing the desktop version of your website on mobile devices is generally not recommended due to user experience and accessibility concerns, you can achieve this using a combination of JavaScript and CSS.

Here's a simple way to force the desktop version for mobile visitors:

1. Add a meta tag in the section of your HTML file to set the default viewport scale:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

2. Use JavaScript to detect if the visitor is using a mobile device and then modify the viewport meta tag accordingly:

<script>
  function isMobile() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  }

  if (isMobile()) {
    document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=1024');
  }
</script>

This script will check if the user is on a mobile device, and if so, it will set the viewport width to a fixed value (e.g., 1024px) to mimic the desktop version. You can adjust the fixed width value according to your website's design.

However, I would strongly recommend adopting a responsive design approach instead of forcing the desktop version on mobile devices. This will ensure that your website looks and functions well on all devices, providing a better user experience. You can achieve this by using CSS media queries, responsive grids, and flexible layouts.

[ihsaan-ullah]

@Didayolo

I want to do the following to solve this issue and improve the UI a bit

1. use tailwind css to make the website responsive
2. use standard icons from one source e.g. FontAwsome Icons or HeroIcons
3. Remove inline css and use tailwind css to rewrite the css
4. Use tailwind resources (cards, colors, buttons, tables, containers etc) to unify everything
5. Use good looking dialogs for confirmation .e.g delete dataset

I suggest that we create a new issue for UI improvements which will include these points and more. All the changes should also be documented as instructions for the future.

This will be helpful when adding new material e.g. Text sizes, paddings, margins, colors, icons and more and will help future developers to follow a specified theme rather than adding something which does not match the existing rules for the UI.

If this is what we want to do, this should be considered a V2 of the UI rather than a fix

[Didayolo]

This looks like a good plan. If you need confirmation that this is a good plan, we should ask @bbearce to give his input.

[ihsaan-ullah]

Shifted to Discussions #1334