[FEATURE] Improve responsive UI

🤖

Based on your request, it seems you want to improve the responsive UI of Argilla by hiding the sidebar for mobile views and enhancing the dataset list to allow scrolling and better visualization.

To hide the sidebar for mobile views, you can use CSS media queries. Here's an example of how you can do it:

@media screen and (max-width: 768px) {
  :root {
    --sidebarWidth: 0px;
  }
}

In the above code, we are setting the sidebar width to 0 for devices with a screen width of 768px or less, effectively hiding it. You can add this to the custom.css file located at docs/_source/_static/css/custom.css.

For improving the dataset list to allow scrolling and better visualization, you can use the overflow property. Here's an example:

.dataset-list {
  overflow-y: auto;
  max-height: 400px;
}

In the above code, we are setting the overflow-y property to auto, which will add a scrollbar to the dataset list if the content exceeds the max-height of 400px. You can adjust the max-height value as per your requirements. Please replace .dataset-list with the actual class or id of your dataset list element.

As for the current structure of Argilla's UI, the sidebar is implemented in the Vue.js component SidebarMenu.vue. You can find more details about its implementation in the frontend/components/commons/sidebar/SidebarMenu.vue file.

Please let me know if you need further assistance or clarification.

Sources

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

argilla-io / argilla

[FEATURE] Improve responsive UI #4577

Sources