Mobile UX/UI accordion behavior improvement

[sirinoks]

Continuation of #2373

Two tasks.

1. Add a github icon (with an arrow) to the right of the title (should take about 10-15% of the space of the title div). If you click on the title, you will get linked to the original post. If you click on the icon, an accordeon with extra information (PRs, issues) will expand. (easy)

Yes, I drew that smol github icon <_<

2. Problem: Currently the title "sticks" to the top of the page as you scroll through the current post. If you expand the accordeon on such "sticky" title, the extra information will take up the whole screen.
   Solution: When clicking to expand the accordeon, do not expand the sticky title, but move the user to the original title's location and only there expand the details. This is more difficult to implement because stickiness of the title is currently done automatically with material design. We would need to code the solution ourselves, finding where the title is located and moving the screen there.

[AmasiaNalbandian]

Hi there! Just a heads up, I am certain the sticky title is not done automatically. Alex can you please post an image of what its currently behaving like? I am not aware of what this looks like.

[TueeNguyen]

I have a PR #2716 opened

[sirinoks]

I'm pretty sure #2716 does not fix this. This is why I made another issue. So that the old issue gets fixed while the more difficult task gets passed on. Tue's PR would still have a problem described here. I need confirmation from @TueeNguyen , and then the PR should be unlinked.
@TueeNguyen In your PR, if you open the accordeon while the title is fixed at the top, the accordeon will take a bunch of the page's space, making it hard to navigate and see the post itself, correct?

[AmasiaNalbandian]

If I'm correct, I think we are talking about the title expanding sometimes if it's too long:

chrome_DnMOPgsplU.mp4

However i'm confused which PR has the accordion... right now only Tue's is going to present this new feature, and we should ship it. We can keep this issue open afterwards as the issue persists.

@TueeNguyen we can unlink this issue, let's ship your stuff it's great! We will file following bugs.

[TueeNguyen]

I just noticed that when header is open, the title is though sticky, it moves down a little which takes more space. I'll unlink this issue from the PR #2716

[TueeNguyen]

We could also reduce the gap between this bottom icon and other information

[AmasiaNalbandian]

We could also reduce the gap between this bottom icon and other information

@TueeNguyen Let's make a new issue for this. They are around the same area, but they are not the same. It should be really good first issue!

[AmasiaNalbandian]

This is the solution:

add max-height overflow-y

[DiegoHdz7]

can I take this issue for hacktoberfest?

[TueeNguyen]

Can someone ping me when PR for this issue is created? I did big parts of the mobile view. @DiegoHdz7

[DiegoHdz7]

Sure

[manekenpix]

Closing since the mobile version of telescope was removed in #3805