Tools Page Table mobile Adjustments

[idanidan29]

What kind of change does this PR introduce?

This PR will adjust the tables on the tools page for mobile and improve the desktop table to prevent it from being cut off, ensuring users don't need to scroll sideways to view the full length of the table.

Issue Number:

• Closes 🐛 Bug: Tools Page Tables Require Adjusting #1442

Screenshots/videos:

Summary
I think this is a necessary change, as it will improve the readability of the tools on the page.

Does this PR introduce a breaking change?
no

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
website	✅ Ready (View Log)	Visit Preview	8ae5c02

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (60f2d6a) to head (8ae5c02).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #1473   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           10        10           
  Lines          396       396           
  Branches       106       106           
=========================================
  Hits           396       396           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[DhairyaMajmudar]

@idanidan29 we're loosing table headers with this new design, is there any solution for that?

[idanidan29]

@DhairyaMajmudar Yes, that's the intended design. It was also suggested in the issue, as keeping the headers would make it too dense, small, and hard to read. But we could add an example card with all the fields labeled by their names at the start, it might work better. i would like to hear your opinion on this

[DhairyaMajmudar]

@DhairyaMajmudar Yes, that's the intended design. It was also suggested in the issue, as keeping the headers would make it too dense, small, and hard to read. But we could add an example card with all the fields labeled by their names at the start, it might work better. i would like to hear your opinion on this

Remvoing table header won't be a good idea as it will be difficult for user to know what fields are related to which tag, the changes which you're suggesting is also not so optimal as it will add and empty/dummy card. Pls. suggest some more ideas.

[idanidan29]

I've tested some solutions and I think that adding the field name for less confusion and a more card-like appearance will help. That way, the user will know what each field is related to.

Another option could be removing some of the data and adding a button to reveal the rest of the data about a card, minimizing space.

@benjagm , I would greatly appreciate any feedback you may have on this. Thank you!

[benjagm]

Hi @DarhkVoyd can you please provide feedback? There are some good proposals there.

[Utkarsh-123github]

@idanidan29 @DhairyaMajmudar @benjagm I have an idea regarding the design. We can make a two column grid which just shows the tool name and a "Click here" button for each tool and when user taps then a popover comes which contains all the information along with the links to bowtie and other related links for that particular tool.
What's your take on this ?

[Utkarsh-123github]

By implementing two column grid the design will look less cluttered and will have good optimization of space.

[idanidan29]

Hey @DhairyaMajmudar, thanks for getting involved! I actually suggested a similar idea to what you brought up in my recent adjustment, but I think a two-column layout might provide too little information about each tool. A card-like approach might be better since adding a "press for more details" option would also take up space. We already have the functionality to show full details when a tool is pressed, so this approach would keep things more efficient. We could, however, leave some info out of the card and make it visible only when pressed, like the Bowtie, for example, as it takes up a whole line of space without using most of it.

[idanidan29]

This PR has been re-uploaded in #1584.

[DarhkVoyd]

Hi @DarhkVoyd can you please provide feedback? There are some good proposals there.

@benjagm Sure, is this still in work?

[idanidan29]

@DarhkVoyd yes its on #1584.