[BUG]:Issue with Subset Display in Profile Section

[vikas-chaudhary-2802]

Describe the bug

When navigating through the profile section on our website, the subset display is not consistent with the general rule applied across the rest of the site. The '>' sign is missing, and the 'author' component is not properly nested under the 'profile' section.

URL of the page where the issue is observed.

N/A

Steps To Reproduce

N/A

Expected Behavior

Oppia > Profile > Author

Screenshots/Videos

N/A

What device are you using?

Desktop

Operating System

MacOS

What browsers are you seeing the problem on?

Chrome

Browser version

No response

Additional context

No response

Tips for developers

Before addressing the bug, please identify which PR caused the issue (you can follow the steps here). If you identify the PR, comment on the issue with a link to it. If not, mention the commit hash of the oldest commit you saw the bug on (and the month and year it was made in).

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!

[rahat2134]

The bug is reproducible as ->

1. sign in
2. go to your profile.

[rahat2134]

It is occuring due to the float: right; property applied to the .oppia-profile-h1 class. When an element is floated to the right, it's taken out of the normal document flow, and subsequent inline elements will appear to the left of it. @vikas-chaudhary-2802 thanks for reporting bug, Let me go through it.

[rahat2134]

@seanlip please verify the issue. As i was able to reproduce it. If its do-able let me do it. Thank you.

[seanlip]

@rahat2134 Two questions (for anyone who wants to claim this issue):

(a) Which PR introduced the bug? (See https://github.com/oppia/oppia/wiki/How-to-find-the-commit-which-introduced-a-bug ) (b) How will you fix it? Please show video proof that your fix works on various screen sizes.

Thanks.

[rahat2134]

@seanlip as i have already mentioned that the issue is caused due to the float: right; property applied to the .oppia-profile-h1 class. When an element is floated to the right, it's taken out of the normal document flow, and subsequent inline elements will appear to the left of it. so it can be resolved by removing the float : right property. Here is the final video-> screen-capture (8).webm

[rahat2134]

@seanlip please assign this issue to me, I will raise the PR in next few hours .

[seanlip]

@rahat2134 You haven't answered my first question.

[rahat2134]

@seanlip I am working on your first question, I will update you once i got the PR. If possible then please assign me this issue, I will raise the PR once I answer your first question. Because to navigate which PR cause this issue will take time. Thank You.

[nimishmedatwal]

@seanlip

1. This commit introduced this bug which was in #15047.
2. This bug can be fixed by removing the float: right from .oppia-profile-h1 (line 58 in profile-page.component.css)

.oppia-profile-h1 {
  color: #fff;
  display: inline;
  float: right;
  font-size: 1em;
  font-weight: normal;
  line-height: unset;
}

I am also attaching the screenshots of fixed code at different screen sizes. If this is satisfactory to you, let me know and I'll raise a PR

[rahat2134]

https://github.com/oppia/oppia/commit/bfa1bb898685656c4540c568728d3a425fbd39bb this commit caused the bug @seanlip and i have given the solution also, Assigning myself. Thank You. I will raise the PR by EOD.

[seanlip]

@rahat2134 Thanks, that's a pretty old PR, good to know.

That PR was trying to fix right-to-left layouts. Could you demonstrate that that works correctly in your PR? (This is why we ask you to find the root cause, we need to check that your change doesn't undo what that PR was trying to fix.)

[niteshbca]

Please sir issue btaye

[rahat2134]

PR #19735 Fix the issue.