Added Feature: Information description for each tab #349 #350

krishchvn · 2025-07-01T18:17:29Z

Created a info tab, on hover, shows a small description of tab

vercel · 2025-07-01T18:17:35Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clearsky-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 2, 2025 7:33pm

thieflord06 · 2025-07-02T15:49:03Z

Failed checks @krishchvn

Copilot

Pull Request Overview

This PR adds descriptive info tooltips to each detail panel/tab and standardizes header spacing.

Introduces a reusable InfoTooltip component with CSS for hoverable descriptions
Integrates InfoTooltip into all panel headers (packs, lists, labeled, history, blocking, etc.)
Adjusts padding and margins in several panel and list CSS files for consistent header layout

Reviewed Changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/common-components/info-tool-tip.jsx	New `InfoTooltip` component for hoverable descriptions
src/common-components/info-tool-tip.css	Styling for tooltip visibility, positioning, and transitions
src/detail-panels/packs/packs.jsx	Adds tooltip to "Starter Packs Created" header
src/detail-panels/packs/packed.jsx	Adds tooltip to "Member of Packs" header
src/detail-panels/lists/lists.jsx	Imports and adds tooltip to Lists panel
src/detail-panels/lists/lists.css	Adjusts list header padding
src/detail-panels/labeled/index.jsx	Adds tooltip to LabeledPanel header
src/detail-panels/labeled/labeled.css	Refines margin and padding for labeled panel
src/detail-panels/history/history-panel.jsx	Adds tooltip to History tab
src/detail-panels/blocking/index.jsx	Adds tooltip to BlockingPanel header
src/detail-panels/blocking-lists/blocking-lists-index.jsx	Adds tooltip and refactors inline styles in BlockingLists
src/detail-panels/blocked-by/index.jsx	Adds tooltip to BlockedByPanel header
src/detail-panels/blocked-by-lists/blocked-by-lists-index.jsx	Adds tooltip to BlockedByLists header
src/detail-panels/block-panel-generic/block-panel-generic.css	Tweaks padding for blocking panel header

Comments suppressed due to low confidence (2)

src/common-components/info-tool-tip.jsx:1

[nitpick] Filename 'info-tool-tip.jsx' uses hyphens inconsistent with the InfoTooltip component name. Consider renaming the file to 'info-tooltip.jsx' to match the component naming convention.

import InfoIcon from '@mui/icons-material/Info';

src/detail-panels/lists/lists.jsx:60

[nitpick] Tooltip text should start with an uppercase letter and end with a period for consistency. Consider updating to 'This page shows the lists you're a member of.'

        <InfoTooltip text="this page shows the lists you're a member of" />

Copilot · 2025-07-03T16:44:30Z

src/common-components/info-tool-tip.jsx

+const InfoTooltip = ({ text }) => {
+  return (
+    <div
+      className="info-icon-wrapper"
+      tabIndex="0"
+      aria-describedby="tooltip-text"
+    >
+      <InfoIcon className="info-icon" />
+      <span className="tooltip-text">{text}</span>


Using a static id 'tooltip-text' for aria-describedby can lead to duplicate IDs when multiple tooltips are rendered. Consider generating unique IDs per instance or using aria-label with a role="tooltip" on the tooltip element to improve screen reader accessibility.

Suggested change

const InfoTooltip = ({ text }) => {

return (

<div

className="info-icon-wrapper"

tabIndex="0"

aria-describedby="tooltip-text"

>

<InfoIcon className="info-icon" />

<span className="tooltip-text">{text}</span>

import { useId } from 'react';

const InfoTooltip = ({ text }) => {

const tooltipId = useId();

return (

<div

className="info-icon-wrapper"

tabIndex="0"

aria-describedby={tooltipId}

>

<InfoIcon className="info-icon" />

<span id={tooltipId} className="tooltip-text">{text}</span>

Copilot · 2025-07-03T16:44:31Z

src/detail-panels/packs/packs.jsx

  return (
    <>
+      <div
+        style={{ fontWeight: '400', paddingLeft: '0.5em', paddingTop: '0.3em' }}


[nitpick] This inline style block is duplicated across multiple panels. Consider extracting it into a shared CSS class or styled component to reduce duplication and improve maintainability.

Copilot · 2025-07-03T16:44:31Z

src/detail-panels/blocking-lists/blocking-lists-index.jsx

+      <div
+        style={{
+          fontWeight: '400',
+          // paddingBottom: '0.2em',


[nitpick] Commented-out style rules can clutter the code. If this padding is no longer needed, remove the commented line to keep the code clean.

Suggested change

// paddingBottom: '0.2em',

krishchvn · 2025-07-04T17:54:14Z

@thieflord06 Should i make changes according to copilot's review?

noahm

I don't have specific changes here as much as just some general remarks.

One overall point I want to make: I know this was just literally implementing what was suggested in #349, but I think that was a bad suggestion from a design standpoint. The whole point of a tooltip is to make extra information available without taking up space when it isn't needed. This completely fails at that.

Look at all that extra unused space we added to the page in service of this single feature. Also, it's not clear that the info icon is associated with the selected tab, because it's so physically distant from the tab itself (with the exception of the very first tab, or some scrolling scenarios).

As is, this would be better off not as a tooltip, but just as an informational paragraph in the new space. Something that's always visible and requires zero interaction to discover. Something that at least makes use of the space being reserved by this change.

But that's not even the right way to handle this. The information should be something directly connected to the tab itself, and it should take up almost zero new space in the layout.

noahm · 2025-07-15T14:16:46Z

src/common-components/info-tool-tip.jsx

+    <div
+      className="info-icon-wrapper"
+      tabIndex="0"
+      aria-describedby="tooltip-text"


why is this here when there's no element with an id of tooltip-text for it to refer to?

noahm · 2025-07-15T15:00:29Z

src/detail-panels/blocked-by-lists/blocked-by-lists-index.jsx

-        {(isLoadingTotal && !listsTotal) && <span style={{ opacity: 0.5 }}>{"Counting block lists..."}</span>}
-        {listsTotal ?
+      <h3 className="lists-header">
+        <div style={{ fontWeight: '400', paddingBottom: '0.2em' }}>


I agree with copilot: if this same div and style is repeated everywhere we use the tooltip component, then just include it inside the tooltip directly

noahm · 2025-07-15T15:02:02Z

src/detail-panels/blocking-lists/blocking-lists-index.jsx

+          paddingTop: '0.3em',
+        }}
+      >
+        <InfoTooltip text="this page shows panel members you have blocked via lists" />


the wording on some of these are confusing to me. what is a "panel member"?

these are also all worded using the 2nd person voice, assuming the reader is only viewing their own profile: "members YOU have blocked"
I feel it may also add some confusion if someone is relying on these to understand the tab contents from a different profile than their own.

thieflord06 · 2025-09-17T00:59:08Z

@krishchvn any update on this?

thieflord06 · 2025-09-20T14:33:06Z

@krishchvn This still needs to be reworked.

krishchvn added 2 commits July 1, 2025 14:12

added feature: Information description for each tab

8cd5ec5

removed comments

b133a4d

vercel bot deployed to Preview July 1, 2025 18:18 View deployment

fix: stylelint error

ce458ed

vercel bot deployed to Preview July 2, 2025 17:43 View deployment

thieflord06 requested review from Copilot, noahm and thieflord06 July 2, 2025 18:55

This comment was marked as outdated.

Sign in to view

thieflord06 enabled auto-merge July 2, 2025 18:58

fix: typos and copilot suggestions

aa5f6d6

auto-merge was automatically disabled July 2, 2025 19:33
Head branch was pushed to by a user without write access

vercel bot deployed to Preview July 2, 2025 19:33 View deployment

thieflord06 enabled auto-merge July 3, 2025 16:42

thieflord06 requested a review from Copilot July 3, 2025 16:42

Copilot AI reviewed Jul 3, 2025

View reviewed changes

noahm linked an issue Jul 15, 2025 that may be closed by this pull request

Information description for each tab #349

Open

noahm reviewed Jul 15, 2025

View reviewed changes

Uh oh!

Added Feature: Information description for each tab #349 #350

Are you sure you want to change the base?

Added Feature: Information description for each tab #349 #350

Uh oh!

Conversation

krishchvn commented Jul 1, 2025

Uh oh!

vercel bot commented Jul 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thieflord06 commented Jul 2, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 3, 2025

Choose a reason for hiding this comment

Uh oh!

krishchvn commented Jul 4, 2025

Uh oh!

noahm left a comment

Choose a reason for hiding this comment

Uh oh!

noahm Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

noahm Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

noahm Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

thieflord06 commented Sep 17, 2025

Uh oh!

thieflord06 commented Sep 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel bot commented Jul 1, 2025 •

edited

Loading