feat: make tag explorer modal adapt to content (#1733)

* add tooltip to TagsSelector
grafana · Nov 19, 2022 · 7bdd8a4 · 7bdd8a4
1 parent 342163b
commit 7bdd8a4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/webapp/javascript/pages/tagExplorer/components/TagsSelector.module.scss b/webapp/javascript/pages/tagExplorer/components/TagsSelector.module.scss
@@ -1,3 +1,7 @@
+.tagsSelector {
+  width: auto;
+}
+
 .title {
   display: inline-block;
   text-transform: uppercase;
@@ -7,6 +11,7 @@
 }
 
 .tags {
+  max-width: 500px;
   padding: 0;
   list-style: none;
   margin: 0;

diff --git a/webapp/javascript/pages/tagExplorer/components/TagsSelector.tsx b/webapp/javascript/pages/tagExplorer/components/TagsSelector.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Redirect, useLocation } from 'react-router-dom';
+import cl from 'classnames';
 
 import { useAppDispatch } from '@webapp/redux/hooks';
 import { actions } from '@webapp/redux/reducers/continuous';
@@ -84,7 +85,11 @@ function TagSelector({
       </span>
       <ul className={styles.tags}>
         {tags.map((tag) => (
-          <li className={sideTag === tag ? styles.selected : ''} key={tag}>
+          <li
+            title={tag}
+            className={cl({ [styles.selected]: sideTag === tag })}
+            key={tag}
+          >
             <input
               type="button"
               onClick={
@@ -120,6 +125,7 @@ function TagSelector({
 
   return (
     <ModalWithToggle
+      modalClassName={styles.tagsSelector}
       isModalOpen={isModalOpen}
       setModalOpenStatus={setModalOpenStatus}
       customHandleOutsideClick={handleOutsideClick}