Fixes: Library - Connection state's position when there are no libraries around #11442

[yashhash2]

Summary

So I created media queries for specific screen sizes to display the connection state position correctly. applied Padding and margins wherever necessary and created 3 DIVS a, b and disco because when state was offline position was changed again,by using these DIVS I was able to fix issue for both offline and online state.

References

#11442 (comment)

[MisRob]

Hi @yashhash2, thank you. High-level feedback from me:

• Would you upload before/after screenshots to the pull request description?
• Generally, we don't use CSS media queries. Instead we utilize useKResponsiveWindow that is integrated with our breakpoint system. You could read the docs and study another places in the codebase. Then I'd ask you to remove the CSS media queries in favor of useKResponsiveWindow.
• I see many duplicate styles. Would you place styles common for all breakpoints outside particular breakpoint styles so they are applied to all breakpoints? Then from each breakpoint style only override what is needed for that particular breakpoint. That should simplify code significantly.

[MisRob]

I will invite my colleague @LianaHarris360 for a full review as soon as this is resolved. Liana, would you please have a look then? I only did a brief skim myself. This is a new attempt at #11442 which you reviewed once here #12405.

[yashhash2]

Thank you @MisRob for feedback i will try to incorporate as many points as possible.

[yashhash2]

This is SS of the change, I have also added the changes in ordered manner Please look into it. I tried using Kresponsive Element but still i have to add css at breakpoints because of logo there its overlapping with text in some screen sizes.