Initial UI Changes

[juanmavelez]

I just made a ton of small changes and I would like to get some input

Header

currently it doesnt work on mobile, to solve the issue I did:

• Add an icon to the "search" which will be the main view on mobile.
• Increase font-sizes, currently we are using very small fonts, 12px. I increase it to 14px, a very common min size for critical content, 12 is better for metadata or little comments.
• Breadcrumbs: I hide them completly on mobile, we have to little space to display them.
• Make all interactive elements ( buttons / links ) to be a minimum of 44px height or witdh as it is recommended by the WCA standards .

Mobile first architecture

• Performance: Browsers don't have to overwrite complex desktop styles to render the mobile view.
• Maintainability: It forces you to think about the most constrained environment first, leading to cleaner code.

New functions Grid

currently, "cancel" shows up first, I swap it for "create" to make a more cohesive visual hierarchy.

Future Changes Feedback

Back Button & Breadcrumbs

Removing the back button

Suggestion: try a "Minimalist Breadcrumb" where the title of the page doubles as a back link, or use a simple chevron next to the title.

Home > Projects > Setting

Code and Test Page (Tabs)

The tabbed approach for mobile is the correct way to handle side-by-side IDE layouts. We will present only one of the 2 views at the same time so they don't fight for the space.

Implementation Tip: Use a Segmented Control or Sticky Tabs at the top of the viewport so users can quickly toggle between "Code" and "Test" without losing their place.

[dimiro1]

@juanmavelez could you share some screenshots?