Add initial Responsive design changes

[juanmavelez]

Description

This PR significantly improves the responsiveness and user interface of the Lunar Dashboard. It transitions the CSS architecture from a desktop-first approach to a mobile-first strategy, ensuring a faster and cleaner experience on smaller devices while maintaining a premium feel on desktop.

Mobile-First CSS Architecture

• Default-to-Mobile: Refactored frontend/css/styles.css
  so that base styles represent the mobile view. Desktop-specific layouts are now applied via @media (min-width: 768px) overrides. Standardized the system to use a consistent 768px breakpoint, replacing various ad-hoc media queries and ensuring a predictable transition between viewports.
• Improved Performance: Reduced the browser overhead on mobile devices by eliminating the need to "undo" complex desktop declarations.

Header design

• To be able to fit the current interactive components on the header, the breadcrums are hidden on mobile
• Add an icon for the search bar to simplify the design on mobile
• Use icons only for search and language on the header

Dashboard design

• Make the footer to take 2 rows on mobile to fit all the information

| | |

Next steps

There is still changes to be done on the function page and subpages

[dimiro1]

Hello @juanmavelez, thank you for your contribution. It is a great start!
However, I have a few suggestions:

1. Table on small screens: The table is not a component that works well on smaller screens. I would completely replace it with a card design.
2. Create Function: On the second screenshot, in the "Create Function" section, we also need to rethink the UX. Lots of space is lost due to the big margins (OK on desktop).

I think a better approach is first to make each individual component responsive. That way, we can review them individually, and later we just need to make small adjustments.

But again, thank you for taking your time to help this project.

[juanmavelez]

Hello @juanmavelez, thank you for your contribution. It is a great start! However, I have a few suggestions:

1. Table on small screens: The table is not a component that works well on smaller screens. I would completely replace it with a card design.
2. Create Function: On the second screenshot, in the "Create Function" section, we also need to rethink the UX. Lots of space is lost due to the big margins (OK on desktop).

I think a better approach is first to make each individual component responsive. That way, we can review them individually, and later we just need to make small adjustments.

But again, thank you for taking your time to help this project.

Hey @dimiro1 I just added some comments on the issue -> #28

Most of the changes currently are going only to the header, One commit goes into the "create function" component, the reason for that is so the page doesn't "break", if I don't apply those changes you will still have an broken UI and a horizontal scroll which makes very hard to develop on mobile. But I agree in general the goal would be to go component by component. I may need to keep adding some "small-fix" UIS on non related component just to fit everything on the screen first, not necessary a redesign