From 469626b4c4bd073c5a7d139f20f45a988b041fa3 Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Mon, 9 Sep 2024 00:51:59 +0200
Subject: [PATCH] Add a tooltip for artist's popular tracks with full track
 name

---
 .../ArtistView/PopularTracks/index.tsx        |  44 +-
 .../ArtistView/PopularTracks/styles.scss      |   8 +
 .../ArtistViewContainer.test.tsx.snap         | 623 +++++++++---------
 .../GridTrackTable/Cells/TitleCell.tsx        |   9 +-
 .../ui/lib/components/StreamInfo/index.tsx    |   1 -
 5 files changed, 359 insertions(+), 326 deletions(-)

diff --git a/packages/app/app/components/ArtistView/PopularTracks/index.tsx b/packages/app/app/components/ArtistView/PopularTracks/index.tsx
index f5408adabe..0d1fe8fa8b 100644
--- a/packages/app/app/components/ArtistView/PopularTracks/index.tsx
+++ b/packages/app/app/components/ArtistView/PopularTracks/index.tsx
@@ -6,14 +6,13 @@ import { Button } from 'semantic-ui-react';
 import { useTranslation } from 'react-i18next';
 import { TFunction } from 'i18next';
 
+import { ArtistTopTrack } from '@nuclear/core/src/plugins/plugins.types';
+import { TextCell } from '@nuclear/ui/lib/components/GridTrackTable/Cells/TextCell';
+import { Track } from '@nuclear/ui/lib/types';
 
 import trackRowStyles from '../../TrackRow/styles.scss';
-import styles from './styles.scss';
-import { ArtistTopTrack } from '@nuclear/core/src/plugins/plugins.types';
 import TrackTableContainer from '../../../containers/TrackTableContainer';
-import TrackTableCell from '@nuclear/ui/lib/components/TrackTable/Cells/TrackTableCell';
-import { Cell, CellProps } from 'react-table';
-import { Track } from '@nuclear/ui/lib/types';
+import styles from './styles.scss';
 
 type AddAllButtonProps = {
   handleAddAll: React.MouseEventHandler;
@@ -71,8 +70,8 @@ const PopularTracks: React.FC<PopularTracksProps> = ({
   const customColumns = useMemo(() => [{
     id: PlaycountColumnId,
     Header: t('count'),
-    accessor: (track: Track) => track.playcount,
-    Cell: ({value, ...rest}: CellProps<Track, string>) => <TrackTableCell value={Number(value).toLocaleString()} {...rest} />
+    accessor: (track: Track) => Number(track.playcount).toLocaleString(),
+    Cell: TextCell
   }], []);
 
   return (
@@ -86,19 +85,24 @@ const PopularTracks: React.FC<PopularTracksProps> = ({
           handleAddAll={handleAddAll}
           t={t}
         />
-        <TrackTableContainer
-          tracks={
-            _(tracks)
-              .sortBy('playcount')
-              .takeRight(expanded ? 15 : 5)
-              .value()
-          }
-          displayDeleteButton={false}
-          displayAlbum={false}
-          displayPosition={false}
-          displayArtist={false}
-          customColumns={customColumns}
-        />
+        <div 
+          className={styles.popular_tracks_table_container}
+          style={{ height: expanded ? `calc(48px + (${tracks.length}*42px))` : undefined }}
+        >
+          <TrackTableContainer
+            tracks={
+              _(tracks)
+                .sortBy('playcount')
+                .takeRight(expanded ? 15 : 5)
+                .value()
+            }
+            displayDeleteButton={false}
+            displayAlbum={false}
+            displayPosition={false}
+            displayArtist={false}
+            customColumns={customColumns}
+          />
+        </div>
         <div className='expand_button' onClick={toggleExpand}>
           <FontAwesome
             name={expanded ? 'angle-double-up' : 'angle-double-down'}
diff --git a/packages/app/app/components/ArtistView/PopularTracks/styles.scss b/packages/app/app/components/ArtistView/PopularTracks/styles.scss
index 197ff7ab67..39c4bb0f1b 100644
--- a/packages/app/app/components/ArtistView/PopularTracks/styles.scss
+++ b/packages/app/app/components/ArtistView/PopularTracks/styles.scss
@@ -14,6 +14,14 @@
     font-variant: all-small-caps;
   }
 
+  .popular_tracks_table_container {
+    height: calc(48px + (42px * 5)); // header + 5 rows
+
+    &.expanded {
+      height: auto;
+    }
+  }
+
   .expand_button {
     display: flex;
     justify-content: center;
diff --git a/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap b/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
index b87077ae9b..4afeab63a4 100644
--- a/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
@@ -111,185 +111,77 @@ exports[`Artist view container should display an artist 1`] = `
                Add all
             </a>
             <div
-              class="track_table_wrapper"
+              class="popular_tracks_table_container"
             >
               <div
-                class="grid_track_table"
-                role="table"
+                class="track_table_wrapper"
               >
                 <div
-                  class="track_table_head"
+                  class="grid_track_table"
+                  role="table"
                 >
                   <div
-                    class="track_table_header_row"
-                    role="row"
-                    style="grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em auto;"
+                    class="track_table_head"
                   >
                     <div
-                      class="track_table_header_cell"
-                      colspan="1"
-                      role="columnheader"
-                      style="cursor: pointer;"
-                      title="Toggle SortBy"
+                      class="track_table_header_row"
+                      role="row"
+                      style="grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em auto;"
                     >
                       <div
-                        class="text_header"
+                        class="track_table_header_cell"
+                        colspan="1"
+                        role="columnheader"
+                        style="cursor: pointer;"
+                        title="Toggle SortBy"
                       >
-                        <i
-                          aria-hidden="true"
-                          class="image icon"
-                        />
+                        <div
+                          class="text_header"
+                        >
+                          <i
+                            aria-hidden="true"
+                            class="image icon"
+                          />
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="track_table_header_cell"
-                      colspan="1"
-                      role="columnheader"
-                      style="cursor: pointer;"
-                      title="Toggle SortBy"
-                    >
-                       
-                    </div>
-                    <div
-                      class="track_table_header_cell"
-                      colspan="1"
-                      role="columnheader"
-                      style="cursor: pointer;"
-                      title="Toggle SortBy"
-                    >
                       <div
-                        class="text_header"
+                        class="track_table_header_cell"
+                        colspan="1"
+                        role="columnheader"
+                        style="cursor: pointer;"
+                        title="Toggle SortBy"
                       >
-                        Title
+                         
                       </div>
-                    </div>
-                    <div
-                      class="track_table_header_cell"
-                      colspan="1"
-                      role="columnheader"
-                      style="cursor: pointer;"
-                      title="Toggle SortBy"
-                    >
-                      Playcount
-                    </div>
-                    <div
-                      class="track_table_header_cell"
-                      colspan="1"
-                      role="columnheader"
-                    >
                       <div
-                        class="selection_header"
+                        class="track_table_header_cell"
+                        colspan="1"
+                        role="columnheader"
+                        style="cursor: pointer;"
+                        title="Toggle SortBy"
                       >
                         <div
-                          class="ui fitted checkbox nuclear checkbox"
-                          style="cursor: pointer;"
+                          class="text_header"
                         >
-                          <input
-                            class="hidden"
-                            readonly=""
-                            tabindex="0"
-                            title="Toggle All Rows Selected"
-                            type="checkbox"
-                            value=""
-                          />
-                          <label />
+                          Title
                         </div>
                       </div>
-                    </div>
-                    <div
-                      class="track_table_header_spacer"
-                      data-testid="track-table-header-spacer"
-                    />
-                  </div>
-                </div>
-                <div
-                  class="track_table_body"
-                  data-rbd-droppable-context-id="0"
-                  data-rbd-droppable-id="track_table"
-                  data-testid="track-table-body"
-                  role="rowgroup"
-                >
-                  <div
-                    class="track_table_virtualized_list"
-                    style="position: relative; height: 600px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
-                  >
-                    <div
-                      style="height: 126px; width: 100%;"
-                    >
                       <div
-                        class="grid_track_table_row"
-                        data-rbd-draggable-context-id="0"
-                        data-rbd-draggable-id="2"
-                        data-testid="track-table-row"
-                        role="row"
-                        style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
-                        tabindex="2"
+                        class="track_table_header_cell"
+                        colspan="1"
+                        role="columnheader"
+                        style="cursor: pointer;"
+                        title="Toggle SortBy"
+                      >
+                        Playcount
+                      </div>
+                      <div
+                        class="track_table_header_cell"
+                        colspan="1"
+                        role="columnheader"
                       >
                         <div
-                          class="grid_track_table_cell thumbnail_cell"
-                          role="cell"
-                        >
-                          <img
-                            class="thumbnail_cell_thumbnail"
-                            src="test-file-stub"
-                          />
-                        </div>
-                        <div
-                          class="grid_track_table_cell favorite_cell"
-                          data-testid="favorite-cell"
-                          role="cell"
-                        >
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless"
-                            data-testid="favorite-button"
-                          >
-                            <i
-                              aria-hidden="true"
-                              class="heart outline icon"
-                            />
-                          </button>
-                        </div>
-                        <div
-                          class="grid_track_table_cell text_cell title_cell"
-                          data-testid="title-cell"
-                          role="cell"
-                        >
-                          <span
-                            class="title_cell_content"
-                          >
-                            <span
-                              class="title_cell_value"
-                            >
-                              test artist top track 1
-                            </span>
-                            <span
-                              class="title_cell_buttons"
-                            >
-                              <button
-                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                data-testid="add-to-queue"
-                              >
-                                <i
-                                  aria-hidden="true"
-                                  class="plus icon"
-                                />
-                              </button>
-                              <button
-                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                data-testid="track-popup-trigger"
-                              >
-                                <i
-                                  aria-hidden="true"
-                                  class="ellipsis horizontal icon"
-                                />
-                              </button>
-                            </span>
-                          </span>
-                        </div>
-                        6,900,237
-                        <div
-                          class="selection_cell"
-                          role="cell"
+                          class="selection_header"
                         >
                           <div
                             class="ui fitted checkbox nuclear checkbox"
@@ -298,8 +190,8 @@ exports[`Artist view container should display an artist 1`] = `
                             <input
                               class="hidden"
                               readonly=""
-                              tabindex="-1"
-                              title="Toggle Row Selected"
+                              tabindex="0"
+                              title="Toggle All Rows Selected"
                               type="checkbox"
                               value=""
                             />
@@ -308,184 +200,311 @@ exports[`Artist view container should display an artist 1`] = `
                         </div>
                       </div>
                       <div
-                        class="grid_track_table_row"
-                        data-rbd-draggable-context-id="0"
-                        data-rbd-draggable-id="1"
-                        data-testid="track-table-row"
-                        role="row"
-                        style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
-                        tabindex="1"
+                        class="track_table_header_spacer"
+                        data-testid="track-table-header-spacer"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="track_table_body"
+                    data-rbd-droppable-context-id="0"
+                    data-rbd-droppable-id="track_table"
+                    data-testid="track-table-body"
+                    role="rowgroup"
+                  >
+                    <div
+                      class="track_table_virtualized_list"
+                      style="position: relative; height: 600px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
+                    >
+                      <div
+                        style="height: 126px; width: 100%;"
                       >
                         <div
-                          class="grid_track_table_cell thumbnail_cell"
-                          role="cell"
-                        >
-                          <img
-                            class="thumbnail_cell_thumbnail"
-                            src="test-file-stub"
-                          />
-                        </div>
-                        <div
-                          class="grid_track_table_cell favorite_cell"
-                          data-testid="favorite-cell"
-                          role="cell"
+                          class="grid_track_table_row"
+                          data-rbd-draggable-context-id="0"
+                          data-rbd-draggable-id="2"
+                          data-testid="track-table-row"
+                          role="row"
+                          style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
+                          tabindex="2"
                         >
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless"
-                            data-testid="favorite-button"
+                          <div
+                            class="grid_track_table_cell thumbnail_cell"
+                            role="cell"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="heart outline icon"
+                            <img
+                              class="thumbnail_cell_thumbnail"
+                              src="test-file-stub"
                             />
-                          </button>
-                        </div>
-                        <div
-                          class="grid_track_table_cell text_cell title_cell"
-                          data-testid="title-cell"
-                          role="cell"
-                        >
-                          <span
-                            class="title_cell_content"
+                          </div>
+                          <div
+                            class="grid_track_table_cell favorite_cell"
+                            data-testid="favorite-cell"
+                            role="cell"
                           >
-                            <span
-                              class="title_cell_value"
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless"
+                              data-testid="favorite-button"
                             >
-                              test artist top track 2
-                            </span>
+                              <i
+                                aria-hidden="true"
+                                class="heart outline icon"
+                              />
+                            </button>
+                          </div>
+                          <div
+                            class="grid_track_table_cell text_cell title_cell"
+                            data-testid="title-cell"
+                            role="cell"
+                          >
                             <span
-                              class="title_cell_buttons"
+                              class="title_cell_content"
                             >
-                              <button
-                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                data-testid="add-to-queue"
+                              <span
+                                class="title_cell_value"
                               >
-                                <i
-                                  aria-hidden="true"
-                                  class="plus icon"
-                                />
-                              </button>
-                              <button
-                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                data-testid="track-popup-trigger"
+                                test artist top track 1
+                              </span>
+                              <span
+                                class="title_cell_buttons"
                               >
-                                <i
-                                  aria-hidden="true"
-                                  class="ellipsis horizontal icon"
-                                />
-                              </button>
+                                <button
+                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                  data-testid="add-to-queue"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="plus icon"
+                                  />
+                                </button>
+                                <button
+                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                  data-testid="track-popup-trigger"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="ellipsis horizontal icon"
+                                  />
+                                </button>
+                              </span>
                             </span>
-                          </span>
-                        </div>
-                        6,969
-                        <div
-                          class="selection_cell"
-                          role="cell"
-                        >
+                          </div>
                           <div
-                            class="ui fitted checkbox nuclear checkbox"
-                            style="cursor: pointer;"
+                            class="grid_track_table_cell text_cell"
+                            role="cell"
                           >
-                            <input
-                              class="hidden"
-                              readonly=""
-                              tabindex="-1"
-                              title="Toggle Row Selected"
-                              type="checkbox"
-                              value=""
-                            />
-                            <label />
+                            6,900,237
+                          </div>
+                          <div
+                            class="selection_cell"
+                            role="cell"
+                          >
+                            <div
+                              class="ui fitted checkbox nuclear checkbox"
+                              style="cursor: pointer;"
+                            >
+                              <input
+                                class="hidden"
+                                readonly=""
+                                tabindex="-1"
+                                title="Toggle Row Selected"
+                                type="checkbox"
+                                value=""
+                              />
+                              <label />
+                            </div>
                           </div>
-                        </div>
-                      </div>
-                      <div
-                        class="grid_track_table_row"
-                        data-rbd-draggable-context-id="0"
-                        data-rbd-draggable-id="0"
-                        data-testid="track-table-row"
-                        role="row"
-                        style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
-                        tabindex="0"
-                      >
-                        <div
-                          class="grid_track_table_cell thumbnail_cell"
-                          role="cell"
-                        >
-                          <img
-                            class="thumbnail_cell_thumbnail"
-                            src="test-file-stub"
-                          />
                         </div>
                         <div
-                          class="grid_track_table_cell favorite_cell"
-                          data-testid="favorite-cell"
-                          role="cell"
+                          class="grid_track_table_row"
+                          data-rbd-draggable-context-id="0"
+                          data-rbd-draggable-id="1"
+                          data-testid="track-table-row"
+                          role="row"
+                          style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
+                          tabindex="1"
                         >
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless"
-                            data-testid="favorite-button"
+                          <div
+                            class="grid_track_table_cell thumbnail_cell"
+                            role="cell"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="heart outline icon"
+                            <img
+                              class="thumbnail_cell_thumbnail"
+                              src="test-file-stub"
                             />
-                          </button>
-                        </div>
-                        <div
-                          class="grid_track_table_cell text_cell title_cell"
-                          data-testid="title-cell"
-                          role="cell"
-                        >
-                          <span
-                            class="title_cell_content"
+                          </div>
+                          <div
+                            class="grid_track_table_cell favorite_cell"
+                            data-testid="favorite-cell"
+                            role="cell"
                           >
-                            <span
-                              class="title_cell_value"
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless"
+                              data-testid="favorite-button"
                             >
-                              test artist top track 3
-                            </span>
+                              <i
+                                aria-hidden="true"
+                                class="heart outline icon"
+                              />
+                            </button>
+                          </div>
+                          <div
+                            class="grid_track_table_cell text_cell title_cell"
+                            data-testid="title-cell"
+                            role="cell"
+                          >
                             <span
-                              class="title_cell_buttons"
+                              class="title_cell_content"
                             >
-                              <button
-                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                data-testid="add-to-queue"
+                              <span
+                                class="title_cell_value"
                               >
-                                <i
-                                  aria-hidden="true"
-                                  class="plus icon"
-                                />
-                              </button>
-                              <button
-                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                data-testid="track-popup-trigger"
+                                test artist top track 2
+                              </span>
+                              <span
+                                class="title_cell_buttons"
                               >
-                                <i
-                                  aria-hidden="true"
-                                  class="ellipsis horizontal icon"
-                                />
-                              </button>
+                                <button
+                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                  data-testid="add-to-queue"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="plus icon"
+                                  />
+                                </button>
+                                <button
+                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                  data-testid="track-popup-trigger"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="ellipsis horizontal icon"
+                                  />
+                                </button>
+                              </span>
                             </span>
-                          </span>
+                          </div>
+                          <div
+                            class="grid_track_table_cell text_cell"
+                            role="cell"
+                          >
+                            6,969
+                          </div>
+                          <div
+                            class="selection_cell"
+                            role="cell"
+                          >
+                            <div
+                              class="ui fitted checkbox nuclear checkbox"
+                              style="cursor: pointer;"
+                            >
+                              <input
+                                class="hidden"
+                                readonly=""
+                                tabindex="-1"
+                                title="Toggle Row Selected"
+                                type="checkbox"
+                                value=""
+                              />
+                              <label />
+                            </div>
+                          </div>
                         </div>
-                        1
                         <div
-                          class="selection_cell"
-                          role="cell"
+                          class="grid_track_table_row"
+                          data-rbd-draggable-context-id="0"
+                          data-rbd-draggable-id="0"
+                          data-testid="track-table-row"
+                          role="row"
+                          style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
+                          tabindex="0"
                         >
                           <div
-                            class="ui fitted checkbox nuclear checkbox"
-                            style="cursor: pointer;"
+                            class="grid_track_table_cell thumbnail_cell"
+                            role="cell"
                           >
-                            <input
-                              class="hidden"
-                              readonly=""
-                              tabindex="-1"
-                              title="Toggle Row Selected"
-                              type="checkbox"
-                              value=""
+                            <img
+                              class="thumbnail_cell_thumbnail"
+                              src="test-file-stub"
                             />
-                            <label />
+                          </div>
+                          <div
+                            class="grid_track_table_cell favorite_cell"
+                            data-testid="favorite-cell"
+                            role="cell"
+                          >
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless"
+                              data-testid="favorite-button"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="heart outline icon"
+                              />
+                            </button>
+                          </div>
+                          <div
+                            class="grid_track_table_cell text_cell title_cell"
+                            data-testid="title-cell"
+                            role="cell"
+                          >
+                            <span
+                              class="title_cell_content"
+                            >
+                              <span
+                                class="title_cell_value"
+                              >
+                                test artist top track 3
+                              </span>
+                              <span
+                                class="title_cell_buttons"
+                              >
+                                <button
+                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                  data-testid="add-to-queue"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="plus icon"
+                                  />
+                                </button>
+                                <button
+                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                  data-testid="track-popup-trigger"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="ellipsis horizontal icon"
+                                  />
+                                </button>
+                              </span>
+                            </span>
+                          </div>
+                          <div
+                            class="grid_track_table_cell text_cell"
+                            role="cell"
+                          >
+                            1
+                          </div>
+                          <div
+                            class="selection_cell"
+                            role="cell"
+                          >
+                            <div
+                              class="ui fitted checkbox nuclear checkbox"
+                              style="cursor: pointer;"
+                            >
+                              <input
+                                class="hidden"
+                                readonly=""
+                                tabindex="-1"
+                                title="Toggle Row Selected"
+                                type="checkbox"
+                                value=""
+                              />
+                              <label />
+                            </div>
                           </div>
                         </div>
                       </div>
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/TitleCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/TitleCell.tsx
index 6d3dcb768d..c4542573ef 100644
--- a/packages/ui/lib/components/GridTrackTable/Cells/TitleCell.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Cells/TitleCell.tsx
@@ -6,6 +6,7 @@ import { TrackTableColumn, TrackTableExtraProps } from '../../TrackTable/types';
 import { Track } from '../../../types';
 import Button from '../../Button';
 import TrackPopup from '../../TrackPopup';
+import Tooltip from '../../Tooltip';
 import styles from '../styles.scss';
 
 export const TitleCell: React.FC<CellProps<Track> & TrackTableExtraProps<Track>> = ({
@@ -28,9 +29,11 @@ export const TitleCell: React.FC<CellProps<Track> & TrackTableExtraProps<Track>>
   className={cx(styles.grid_track_table_cell, styles.text_cell, styles.title_cell)}
 >
   <span className={styles.title_cell_content}>
-    <span className={styles.title_cell_value}>
-      {value}
-    </span>
+    <Tooltip
+      on='hover'
+      content={value}
+      trigger={<span className={styles.title_cell_value}>{value}</span>}
+    />
     <span className={styles.title_cell_buttons}>
       <Button
         className={styles.title_cell_button}
diff --git a/packages/ui/lib/components/StreamInfo/index.tsx b/packages/ui/lib/components/StreamInfo/index.tsx
index 4bee7ebc13..0b3c628223 100644
--- a/packages/ui/lib/components/StreamInfo/index.tsx
+++ b/packages/ui/lib/components/StreamInfo/index.tsx
@@ -1,6 +1,5 @@
 import React, { memo } from 'react';
 import Img from 'react-image';
-import cx from 'classnames';
 
 import { StreamData } from '@nuclear/core/src/plugins/plugins.types';