Make the app fully responsive

[AdrianBZG]

It would be ideal to make the app fully responsive, especially header, menu, footer, etc.

[dmahajan980]

Hi @AdrianBZG! Thanks for opening up this issue. Since I had a few ideas regarding the app's and its components' responsiveness, I am very much interested in working upon this issue.

[AdrianBZG]

@dmahajan980 Sure. We ought to discuss the ideas you have in this issue, so that we can come to a proposal before actually coding it 😄

[lazycipher]

@AdrianBZG, I propose to use Material Design! I really love this way of designing web pages!

[dmahajan980]

@AdrianBZG, for the app's responsiveness, I intend to fix the its main body (other than navbar, side-nav and footer) first. Currently, we have the following (major) responsiveness issues related to it:

1. Graph and Pie-chart squeeze in mobile view or on devices with significantly lower device widths

   

   What we can do here is to stack the pie chart and the graph one above the other so that both don't shrink or squeeze.

2. Buttons occupy multiple rows even though it could be placed in one line.

   

   I plan on slightly rearranging the buttons in one or two rows and towards the centre.

3. Part of the table hides if table width is more than browser viewport.

   

   We can make the table horizontally scrollable below a certain device width so that important pieces of information contained by the table doesn't hide out.

I would be happy to get your feedback on this. If there's anything that can improved or added to this, please do let me know.

[HaseebAhmad23]

Is this issue solved or not?
I want to work on it.

[GraceChiamaka]

@AdrianBZG I'm an outreachy applicant, Can I work on this issue?

[komecodes]

Hello, I would love to give this a go, can it be assigned to me please? @AdrianBZG