Fixes #288: Added Dropdown for BeadExplorer and BeadExplorer/Network trends for smaller screens by parthdude07 · Pull Request #328 · braidpool/braidpool

parthdude07 · 2025-12-27T09:24:02Z

📱 Description

This PR addresses UI responsiveness issues in the dashboard header to ensure smooth rendering across mobile and desktop devices.
fixes #288

🛠 Key Changes

Mobile Navigation: Converted the "Beads Explorer", "Network Trends", "Rewards" and "Pool Dominance" tabs into a Dropdown Menu for mobile screens (< sm) while retaining the tab layout for desktop.
- In Network Trends : Converted the "Hashrate", "Latency", "Transactions" and "Difficulty" tabs into a Dropdown Menu for mobile screens (< sm) while retaining the tab layout for desktop.

Copilot

Pull request overview

This pull request adds responsive dropdown navigation for the BeadExplorer and Network Trends sections to improve usability on smaller screens (issue #288). The changes introduce mobile-friendly select dropdowns that replace the horizontal tab navigation on small screens.

Adds dropdown selectors that appear on mobile/small screens (hidden on medium+ screens)
Hides desktop tab navigation on small screens while showing it on medium+ screens
Implements state management for active tab selection at the Dashboard level

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.

File	Description
dashboard/src/components/Dashboard/Dashboard.tsx	Adds activeTab state management and dropdown in Card headerExtra for mobile BeadExplorer navigation
dashboard/src/components/BeadsTab/Trends/TrendsTab.tsx	Adds mobile dropdown for Network Trends sub-tabs (hashrate, latency, etc.) with responsive visibility
dashboard/src/components/BeadsTab/MinedSharesExplorer.tsx	Converts to controlled component accepting activeTab props, hides DashboardHeader on mobile
dashboard/src/components/BeadsTab/DashboardHeader.tsx	Splits into mobile dropdown and desktop tab views with responsive visibility classes

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

parthdude07

Implemented some suggestions from Copilot

priyashuu

Commits must be signed to be merged. Please also include a PR description for future reference.

parthdude07 · 2025-12-27T13:00:48Z

@priyashuu i had made the changes

priyashuu

LGTM

priyashuu

Please make sure to sign your older commits. Unsigned commits cannot be merged.

parthdude07 · 2026-01-03T12:56:36Z

Hi @priyashuu , I’ve now signed the older commits as requested.
Apologies for the delay — I was traveling and couldn’t address it earlier.
Thanks for your patience.

parthdude07 · 2026-01-12T03:59:41Z

@mcelrath @priyashuu
waiting for workflow approval

priyashuu · 2026-01-12T04:18:11Z

@mcelrath @priyashuu waiting for workflow approval

Please address and resolve the issues with the failed CI tests.

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 7 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-15T17:45:55Z

-        <nav className="mb-px  flex flex-wrap gap-x-6" aria-label="Tabs">
+      {/* --- Mobile View: Dropdown --- */}
+      {/* Using ! to force responsive behavior against external overrides */}
+      <div className="block md:!hidden py-4">


The !important modifier on responsive classes (md:!hidden, md:!block) indicates underlying specificity issues. Consider refactoring the conflicting global styles instead of using !important, which can make future styling changes more difficult and error-prone.

You can avoid using the !important modifier by leveraging Tailwind’s responsive utilities. For example, instead of block md:!hidden, you could use:sm:block max-md:hidden lg:hidden

priyashuu · 2026-01-15T17:57:08Z

Please address the copilot suggestions.

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

parthdude07 · 2026-01-16T12:52:23Z

@priyashuu can you once review this
it will be great if this PR can be merge
today

priyashuu · 2026-01-16T13:26:06Z

@priyashuu can you once review this it will be great if this PR can be merge today

sure

priyashuu

I’ve reviewed the UI. On md screens, there’s a lot of unused space on the right, making the layout feel unbalanced, this could be utilized better.

Also, the Network subtabs dropdown isn’t needed on md+ screens. It would be better to show the dropdown only on small devices

parthdude07 · 2026-01-29T18:50:01Z

+      {/* Navigation Area */}
      <div className="border-b border-gray-800">
+        {/* Mobile View: Dropdown (Hidden on small screens and up) */}
+        <div className="sm:hidden mb-4 px-2">


@priyashuu the dropdown for network subtab is show for smaller screens only below sm

priyashuu · 2026-01-29T18:51:00Z

As mentioned, I’ve reviewed the UI on md screens. Based on basic UI/UX principles, the current layout leaves a lot of unused space on the right and still uses a dropdown for the Network subtabs. Since sufficient space is available on md screens

parthdude07 · 2026-01-29T18:53:48Z

I’ve reviewed the UI. On md screens, there’s a lot of unused space on the right, making the layout feel unbalanced, this could be utilized better.

Also, the Network subtabs dropdown isn’t needed on md+ screens. It would be better to show the dropdown only on small devices

thanks for review @priyashuu . for i had changed the break points to sm in last commits.
yeah but still there is lot of unused space on the right . should i increase the length of the dropdown inorder to occupy some more space and layout feel balanced??

priyashuu · 2026-01-29T19:01:50Z

I’ve reviewed the UI. On md screens, there’s a lot of unused space on the right, making the layout feel unbalanced, this could be utilized better.
Also, the Network subtabs dropdown isn’t needed on md+ screens. It would be better to show the dropdown only on small devices

thanks for review @priyashuu . for i had changed the break points to sm in last commits. yeah but still there is lot of unused space on the right . should i increase the length of the dropdown inorder to occupy some more space and layout feel balanced??

You can try that, but my suggestion would be to remove the dropdown on md screens altogether. The dropdown should ideally only trigger on small screens and below.

parthdude07 · 2026-01-29T19:21:08Z

@priyashuu sorry but i had used sm 640 px as break point which means dropdown shows for smaller screens only . do you want me to make even smaller the breakpoint??

parthdude07 · 2026-02-02T09:29:33Z

@priyashuu had you reviewed the code??

parthdude07 · 2026-02-06T10:04:51Z

@priyashuu i had made the requested changes and now the UI looks more consistent than before no unused space btw . can you please review the code changes. thanks

priyashuu

The issue still persists after the latest changes. Please re-test locally and push an updated fix.

parthdude07 · 2026-02-07T09:30:48Z

Screencast.from.2026-02-07.14-57-53.webm

@priyashuu Can you check this changes please and suggest any changes if required . thanks

priyashuu · 2026-02-21T10:18:20Z

hey @parthdude07 , is there any update on this pr?

parthdude07 · 2026-02-21T10:21:41Z

@priyashuu my midsems are ongoing. Will raise PR soon.

priyashuu · 2026-03-12T08:40:10Z

Hey @parthdude07, do you have any updates on this PR?

parthdude07 · 2026-03-13T04:06:51Z

Hey @parthdude07, do you have any updates on this PR?

@priyashuu will raise the PR by EOD.

parthdude07 · 2026-03-16T05:01:56Z

Screencast from 2026-03-16 10-08-58.webm
@priyashuu i have added the collapsible side for for beadexplorer tab

priyashuu

Here are some suggestions for the UI:

In the future, we are removing the “BEADS EXPLORER” section, so you need to change the tab name from “Beads Explorer” to “Braid Visualization”. You can check the constants.ts file under the tabs constants.

Also, you added a new sidebar, but we already have an existing sidebar for the navbar. Can you match your design with the existing one instead?

priyashuu · 2026-05-15T09:18:28Z

Here are some suggestions for the UI:

In the future, we are removing the “BEADS EXPLORER” tab, so you need to change the tab name from “Beads Explorer” to “Braid Visualization”. You can check the constants.ts file under the tabs constants.

* Also, you added a new sidebar, but we already have an existing sidebar for the navbar. Can you match your design with the existing one instead?

Copilot AI review requested due to automatic review settings December 27, 2025 09:24

Copilot started reviewing on behalf of parthdude07 December 27, 2025 09:24 View session

parthdude07 force-pushed the added_dropdown branch from 78b5d38 to bec9528 Compare December 27, 2025 09:26

Copilot AI reviewed Dec 27, 2025

View reviewed changes

parthdude07 force-pushed the added_dropdown branch from 0b42a9a to 3429e53 Compare December 27, 2025 10:16

parthdude07 commented Dec 27, 2025

View reviewed changes

parthdude07 force-pushed the added_dropdown branch from 3429e53 to 4a3be6b Compare December 27, 2025 10:20

priyashuu self-requested a review December 27, 2025 11:26

priyashuu reviewed Dec 27, 2025

View reviewed changes

priyashuu assigned parthdude07 Dec 27, 2025

priyashuu added dashboard design frontend labels Dec 27, 2025

priyashuu previously approved these changes Jan 1, 2026

View reviewed changes

priyashuu reviewed Jan 1, 2026

View reviewed changes

parthdude07 force-pushed the added_dropdown branch from 75327bf to 5f9a6f6 Compare January 3, 2026 12:42

parthdude07 dismissed priyashuu’s stale review via b69ab44 January 12, 2026 09:32

parthdude07 requested a review from priyashuu January 12, 2026 09:48

priyashuu requested a review from Copilot January 15, 2026 17:44

Copilot AI reviewed Jan 15, 2026

View reviewed changes

parthdude07 force-pushed the added_dropdown branch from 3820b4f to 26c7edb Compare January 15, 2026 18:28

priyashuu requested a review from Copilot January 16, 2026 10:55

Copilot AI reviewed Jan 16, 2026

View reviewed changes

Comment thread dashboard/src/components/BeadsTab/DashboardHeader.tsx Outdated

priyashuu reviewed Jan 29, 2026

View reviewed changes

parthdude07 commented Jan 29, 2026

View reviewed changes

Merge branch 'dev' into added_dropdown

6834c7e

parthdude07 requested a review from zaidmstrr as a code owner February 2, 2026 09:28

parthdude07 added 2 commits February 6, 2026 15:20

Merge branch 'dev' into added_dropdown

fe49618

made dropdowm to occupy more space for consistent UI

6c772c8

parthdude07 requested a review from priyashuu February 6, 2026 09:55

priyashuu reviewed Feb 6, 2026

View reviewed changes

make dropdown occupy even space and enhance UI

5bfecf8

priyashuu marked this pull request as draft February 22, 2026 06:58

parthdude07 added 2 commits March 16, 2026 09:54

Merge branch 'dev' into added_dropdown

d86ef4b

added sidebar instead of dropdown

47504ed

parthdude07 marked this pull request as ready for review March 16, 2026 05:00

parthdude07 and others added 2 commits April 9, 2026 18:25

Merge branch 'dev' into added_dropdown

a4a9d73

Merge branch 'dev' into added_dropdown

828730b

mcelrath marked this pull request as draft April 10, 2026 16:50

priyashuu reviewed May 15, 2026

View reviewed changes

Uh oh!

Conversation

parthdude07 commented Dec 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📱 Description

🛠 Key Changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

parthdude07 left a comment

Choose a reason for hiding this comment

Uh oh!

priyashuu left a comment

Choose a reason for hiding this comment

Uh oh!

parthdude07 commented Dec 27, 2025

Uh oh!

priyashuu left a comment

Choose a reason for hiding this comment

Uh oh!

priyashuu left a comment

Choose a reason for hiding this comment

Uh oh!

parthdude07 commented Jan 3, 2026

Uh oh!

parthdude07 commented Jan 12, 2026

Uh oh!

priyashuu commented Jan 12, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

priyashuu Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

priyashuu commented Jan 15, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

parthdude07 commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

priyashuu commented Jan 16, 2026

Uh oh!

priyashuu left a comment

Choose a reason for hiding this comment

Uh oh!

parthdude07 Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

priyashuu commented Jan 29, 2026

Uh oh!

parthdude07 commented Jan 29, 2026

Uh oh!

priyashuu commented Jan 29, 2026

Uh oh!

parthdude07 commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

parthdude07 commented Dec 27, 2025 •

edited

Loading

priyashuu Jan 19, 2026 •

edited

Loading

parthdude07 commented Jan 16, 2026 •

edited

Loading

parthdude07 commented Jan 29, 2026 •

edited

Loading