UI updates

[logicsec]

Standardize Panel Design System

Overview

Implemented a new floating panel design system across the application to improve visual consistency and hierarchy.

Visual Impact

• Creates visual separation between panels through consistent floating design
• Improves overall application hierarchy through standardized spacing
• Enhances readability with unified panel coloring

Technical Notes

• Leverages existing theme variables for maintainable styling
• Ensures consistent implementation across different viewport sizes
• Maintains responsive behavior while improving visual consistency

Testing

• Verified panel styling across different screen sizes
• Confirmed theme compatibility (light/dark modes)
• Validated margin spacing and panel interactions

Screenshots

[logicsec]

@SasLord @aonnikov wanted to check in on this to see if there was anything pending?

[MilanovaSmile]

I really like this design. @aonnikov Is there a chance that it will be merged?

[aonnikov]

Hey @logicsec , thanks for the contribution! I like this design, but not sure if we are going to apply this. We discussed it internally but have not decided yet. It appears that separation takes more place now that might be a problem on small screen. We already have this problem with many panels opened at the same time, don't want to make it worse.

[logicsec]

Should be an easy update on my end to make this responsive. The issue is that when you get on smaller screens, you need to modify the viewport. I noticed this on a lot of the design is using statically assigned margins or margins with pt instead of using dynamic margins like rem or using the built-ins like margin-2.

I can run through mobile screen sizes just to see how they look at post back here on how it looks?