[BUG] links page in not responsive on mobile view

[sital002]

Has this bug been raised before?

• [X] I have checked "open" AND "closed" issues and this is not a duplicate

Where did you find this bug?

Local Development

Version of BioDrop (for example "v1.2.3")

2.96.0

Description

While testing the project locally I noticed that the account/links page is not responsive.

Steps to Reproduce

If you know the steps, follow the below format and provide steps to reproduce

For example:

1. Go to http://localhost:3000/account/manage/links page in mobile view.

Screenshots

Do you want to work on this issue?

No

If "yes" to above, please explain how you would technically implement this

No response

[github-actions[bot]]

To reduce notifications, issues are locked until they are https://github.com/EddieHubCommunity/BioDrop/labels/%F0%9F%8F%81%20status%3A%20ready%20for%20dev and to be assigned. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md

[amandamartin-dev]

hi @sital002 can you confirm if this happens on production and on a mobile device? I have tested on my device and cannot replicate. (Android pixel running chrome)

ℹ️ amandamartin-dev has some opened assigned issues: 🔧View assigned issues

[sital002]

It does exists on production as well if we pinned enabled and grouped the link here is the screenshot in production

[Abhishek-90]

@amandamartin-dev @sital002 I didn't check it on my phone but leaving the links section aside, even the buttons seem out of proportion for smaller screen sizes.

Coming to the links, we will have to come up with a different design on how to show the links data.

[sohail-313]

Instead of text for "Pinned" and "Enabled" we will use Icons in mobile view, does it make sense?

[amandamartin-dev]

It does exists on production as well if we pinned enabled and grouped the link here is the screenshot in production

Thank you for clarifying this is seen when there is a group. I was able to confirm. I saw you do not want to work on this but if you havre a suggestion on the best way to resolve feel free to offer a solution.

[amandamartin-dev]

Instead of text for "Pinned" and "Enabled" we will use Icons in mobile view, does it make sense?

Thank you for offering this idea. How will mobile users know what the icons each mean if we switch to icons?

[amandamartin-dev]

@amandamartin-dev @sital002 I didn't check it on my phone but leaving the links section aside, even the buttons seem out of proportion for smaller screen sizes.

Coming to the links, we will have to come up with a different design on how to show the links data.

Do you have a suggestion for improving this area?

[sohail-313]

It does exists on production as well if we pinned enabled and grouped the link here is the screenshot in production

Otherwise, we can do like this

[amandamartin-dev]

It does exists on production as well if we pinned enabled and grouped the link here is the screenshot in production

Otherwise, we can do like this

Oh I like the idea of stacking the tags underneath! I would like some other folks to weigh in though on the design change. WDYT @eddiejaoude ?

[sohail-313]

Glad you liked it! Please assign me if approved

[eddiejaoude]

yep stacking underneath seems like a good solution 👍

ℹ️ eddiejaoude has some opened assigned issues: 🔧View assigned issues

[github-actions[bot]]

The issue has been unlocked and is now ready for dev. If you would like to work on this issue, you can comment to have it assigned to you. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md

[eddiejaoude]

I have assigned to you @sohail-313

ℹ️ eddiejaoude has some opened assigned issues: 🔧View assigned issues

[sohail-313]

I am unable login because of missing "client_id"

screenshot of error

[sital002]

I am unable login because of missing "client_id"

screenshot of error

You need to add the environement variable for Github Oath to work. here is the link on how to setup your environement variable https://www.biodrop.io/docs/environments/environment-variables

[Abhishek-90]

@amandamartin-dev @sital002 I didn't check it on my phone but leaving the links section aside, even the buttons seem out of proportion for smaller screen sizes. Coming to the links, we will have to come up with a different design on how to show the links data.

Do you have a suggestion for improving this area?

@amandamartin-dev I would suggest doing few things.

1. Adding some space between different elements. It will give clear design for smaller screens.
2. To address to the buttons issue above, we could use fluid design techniques to makes the buttons fluid depending upon the width of the screen/device.

[sid10on10]

This issue was assigned one month back and is not yet closed. I want to work on this issue can you assign this to me? @eddiejaoude

[SaraJaoude]

This issue was assigned one month back and is not yet closed. I want to work on this issue can you assign this to me? eddiejaoude

@sid10on10 as you will be able to see from the PR the assignee and the maintainers are still working on this so at this time we will not be assigning this issue to anyone else. Please also do not tag specific maintainers - all maintainers receive notifications and can deal with these. I suggest you take a look at this project's Contributing Guide, to familiarise yourself as to how this project is run.