[Mobile][BUG]: In the creator dashboard alignment is not proper for statistics

[KolliAnitha]

Describe the bug

In the creator dashboard alignment is not proper for statistics

Steps To Reproduce

1. Login to www.oppiatestserver.org
2. Go to Creator dashboard
3. See Statistics section

Expected Behavior

Alignment should be proper in the statistics section

Screenshots/Videos

What device are you using?

Mobile

Operating System

Android

What browsers are you seeing the problem on?

Chrome

Browser version

114.0.5735.130

Additional context

No response

Tips for developers

Before tackling the bug, please use git bisect (see https://git-scm.com/docs/git-bisect) to investigate which PR caused it (you only need to go back as far as commit https://github.com/oppia/oppia/commits/9a334e9). If you find the PR, leave a comment on this issue pointing to it, or just say that it happened before commit 9a334e9 if you could reproduce it there. This will help us fix the issue by reverting the faulty PR.

Also, if this is your first issue, please make sure to follow https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#choosing-a-good-first-issue and https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#setting-things-up before claiming it. Thanks!

[github-actions[bot]]

Hi @Rijuta-s, thanks for proposing this as a good first issue. I am removing the label for now and looping in @DubeySandeep to approve the label. It will be added back if approved. Thanks!

[DubeySandeep]

@Rijuta-s is it a regression issue? If not, we should remove the bisect section from Tips for developers.

[seanlip]

@DubeySandeep I think the bisect section is fine because we won't know if it's a regression or not until we do the check. If the issue arose in the earliest commit marked there then it isn't a regression, but it's worth figuring that out (so that, if it is indeed a regression, we can try to avoid it in future).

Note also that this advice (on bisection) is now part of the default issue-filing text since we want it to be standard procedure.

[AyushK101]

please assign me this issue

[ramyaram2092]

@seanlip @Uglycrown @SanjaySajuJacob @Priyansh61 @KolliAnitha @DubeySandeep

I would like to work on this issue . PF the work I have done so far

Observation: I noticed that the properties of first and last child of the flex did not match or align with other children

Proposed Solution : Changing the properties of first and last child to be in line with other stats card will fix this issue.

Please Advise

[Uglycrown]

Hi @ramyaram2092 we will assign you but please can you share the screenshot or video after the changes. Thanks

[AyushK101]

I would like to work on this issue . PF the work I have done so far

Observation: I noticed that the properties of first and last child of the flex did not match or align with other children

Proposed Solution :

1. Changing the properties of first and last child to be in line with other stats card will fix this issue.

Please Advise

On Thu, 29 Jun 2023, 11:18 am Gourav Singh, @.***> wrote:

Hi @ramyaram2092 https://github.com/ramyaram2092 we will assign you but please can you share the screenshot or video after the changes. Thanks

— Reply to this email directly, view it on GitHub https://github.com/oppia/oppia/issues/18452#issuecomment-1612465360, or unsubscribe https://github.com/notifications/unsubscribe-auth/BAGCQYEL72I3FV6H4GXW6BTXNUJKRANCNFSM6AAAAAAZP6ZHCQ . You are receiving this because you commented.Message ID: @.***>

[ramyaram2092]

@Uglycrown PF the screenshot of the fix as follows :

[Uglycrown]

@ramyaram2092 assigned to you, feel free to make a PR. Thanks!

[prafulbbandre]

Hi @ramyaram2092 , Please provide an expected date of opening the PR.

[ramyaram2092]

@prafulbbandre I shall be opening by end of the day (PST)

[ramyaram2092]

Created PR #18572

[ramyaram2092]

Closed the PR#18572 due to errors in the branch. Created a new PR #18613

[amaranand360]

Hii @KolliAnitha @prafulbbandre @Uglycrown I Would like to work on this issue .

I will change the following file creator-dashboard-page.component.html and add the following style

.mat-card>:first-child, .mat-card-content>:first-child { margin-top: 10px; } .mat-card>:last-child:not(.mat-card-footer) { margin-bottom: 10px; }

Screenshots of output

[Patel-Muhammad]

@amaranand360 Thanks for following the contributing guidelines! I am assigning you to this issue, please follow up with a PR of your changes.

[amaranand360]

Thanks @Patel-Muhammad for assigning