feat: add css for event list for explain button column

devtron-labs · Nov 5, 2024 · f3a2ffa · f3a2ffa
1 parent 389847c
commit f3a2ffa
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/src/components/ResourceBrowser/ResourceBrowser.scss b/src/components/ResourceBrowser/ResourceBrowser.scss
@@ -205,12 +205,18 @@
 
             .event-list-row {
                 display: grid;
-                grid-template-columns: 80px minmax(200px, auto) 130px 150px 150px repeat(4, 70px);
+                grid-template-columns: 80px minmax(200px, auto) 130px 200px 150px repeat(3, 70px);
                 column-gap: 16px;
 
-                &:hover {
-                    .explain-ai-button {
-                        visibility: visible;
+                &__explain {
+                    display: grid;
+                    grid-template-columns: 80px minmax(200px, auto) 130px 150px 150px repeat(4, 70px);
+                    column-gap: 16px;
+
+                    &:hover {
+                        .explain-ai-button {
+                            visibility: visible;
+                        }
                     }
                 }
             }

diff --git a/src/components/ResourceBrowser/ResourceList/EventList.tsx b/src/components/ResourceBrowser/ResourceList/EventList.tsx
@@ -34,7 +34,9 @@ export const EventList = ({
     setWidgetEventDetails,
 }: EventListType) => (
     <div className="dc__overflow-scroll">
-        <div className="event-list-row dc__zi-1 dc__min-width-fit-content dc__position-sticky bcn-0 dc__top-0 fw-6 cn-7 fs-13 dc__border-bottom pl-20 pr-8 pt-8 pb-8 dc__uppercase h-36">
+        <div
+            className={`event-list-row${ExplainEventButton ? '__explain' : ''} dc__zi-1 dc__min-width-fit-content dc__position-sticky bcn-0 dc__top-0 fw-6 cn-7 fs-13 dc__border-bottom px-20 py-8 dc__uppercase h-36`}
+        >
             {Object.values(EVENT_LIST.headerKeys).map((title) => (
                 <Tooltip key={title} content={title}>
                     <span className="dc__ellipsis-right">{title}</span>
@@ -61,7 +63,7 @@ export const EventList = ({
                 return (
                     <div
                         key={Object.values(eventData).join('-')}
-                        className="event-list-row cn-9 fs-13 dc__border-bottom-n1 pl-20 pr-8 pt-12 pb-12 hover-class"
+                        className={`event-list-row${ExplainEventButton ? '__explain' : ''} cn-9 fs-13 dc__border-bottom-n1 px-20 py-12 hover-class`}
                     >
                         <div
                             className={`app-summary__status-name dc__highlight-text f-${(eventData.type as string)?.toLowerCase()}`}