fix recommendation styles

Author: pd-redis

redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/recommendation/Recommendation.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react'
 import { useDispatch } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
+import styled from 'styled-components'
 import { isUndefined } from 'lodash'
 
 import { findTutorialPath, Maybe, Nullable } from 'uiSrc/utils'
@@ -33,13 +34,12 @@ import {
 } from 'uiSrc/components/base/icons'
 
 import { openTutorialByPath } from 'uiSrc/slices/panels/sidePanels'
-import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Card } from 'uiSrc/components/base/layout'
 import {
   IconButton,
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
-import { Text } from 'uiSrc/components/base/text'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { RiAccordion } from 'uiSrc/components/base/display/accordion/RiAccordion'
 import { Link } from 'uiSrc/components/base/link/Link'
@@ -58,6 +58,10 @@ export interface IProps {
   recommendationsContent: IRecommendationsStatic
 }
 
+const RecommendationContent = styled(Card)`
+  padding: var(--size-m);
+`
+
 const RecommendationTitle = ({
   redisStack,
   title,
@@ -76,6 +80,7 @@ const RecommendationTitle = ({
       style={{
         maxWidth: '60%',
         textAlign: 'left',
+        overflow: 'hidden',
       }}
     >
       {redisStack && (
@@ -104,7 +109,9 @@ const RecommendationTitle = ({
           </Link>
         </FlexItem>
       )}
-      <FlexItem className="truncateText">{title}</FlexItem>
+      <div className="truncateText">
+        <span title={title}>{title}</span>
+      </div>
     </Row>
   )
 }
@@ -197,7 +204,7 @@ const Recommendation = ({
   }
 
   const recommendationContent = () => (
-    <Text>
+    <Col>
       {!isUndefined(tutorialId) && (
         <SecondaryButton
           filled
@@ -237,52 +244,47 @@ const Recommendation = ({
           />
         </div>
       </FeatureFlagComponent>
-    </Text>
+    </Col>
   )
 
   const renderButtonContent = (
-    <Row className={styles.fullWidth} align="center" justify="between">
-      <Row className={styles.fullWidth} align="center">
-        <FlexItem grow className="truncateText">
-          {title}
-        </FlexItem>
-        <FlexItem>
-          <RiTooltip
-            title="Snooze tip"
-            content="This tip will be removed from the list and displayed again when relevant."
-            position="top"
-            anchorClassName="flex-row"
-          >
-            <IconButton
-              icon={SnoozeIcon}
-              className={styles.snoozeBtn}
-              onClick={handleDelete}
-              aria-label="snooze tip"
-              data-testid={`${name}-delete-btn`}
-            />
-          </RiTooltip>
-        </FlexItem>
-        <FlexItem>
-          <RiTooltip
-            title={`${hide ? 'Show' : 'Hide'} tip`}
-            content={`${
-              hide
-                ? 'This tip will be shown in the list.'
-                : 'This tip will be removed from the list and not displayed again.'
-            }`}
-            position="top"
-            anchorClassName="flex-row"
-          >
-            <IconButton
-              icon={hide ? HideIcon : ShowIcon}
-              className={styles.hideBtn}
-              onClick={toggleHide}
-              aria-label="hide/unhide tip"
-              data-testid={`toggle-hide-${name}-btn`}
-            />
-          </RiTooltip>
-        </FlexItem>
-      </Row>
+    <Row className={styles.fullWidth} align="center" gap="s" justify="between">
+      <FlexItem>
+        <RiTooltip
+          title="Snooze tip"
+          content="This tip will be removed from the list and displayed again when relevant."
+          position="top"
+          anchorClassName="flex-row"
+        >
+          <IconButton
+            icon={SnoozeIcon}
+            className={styles.snoozeBtn}
+            onClick={handleDelete}
+            aria-label="snooze tip"
+            data-testid={`${name}-delete-btn`}
+          />
+        </RiTooltip>
+      </FlexItem>
+      <FlexItem>
+        <RiTooltip
+          title={`${hide ? 'Show' : 'Hide'} tip`}
+          content={`${
+            hide
+              ? 'This tip will be shown in the list.'
+              : 'This tip will be removed from the list and not displayed again.'
+          }`}
+          position="top"
+          anchorClassName="flex-row"
+        >
+          <IconButton
+            icon={hide ? HideIcon : ShowIcon}
+            className={styles.hideBtn}
+            onClick={toggleHide}
+            aria-label="hide/unhide tip"
+            data-testid={`toggle-hide-${name}-btn`}
+          />
+        </RiTooltip>
+      </FlexItem>
     </Row>
   )
 
@@ -309,9 +311,12 @@ const Recommendation = ({
         data-testid={`${name}-accordion`}
         aria-label={`${name}-accordion`}
       >
-        <Card className={styles.accordionContent} color="subdued">
+        <RecommendationContent
+          className={styles.accordionContent}
+          color="subdued"
+        >
           {recommendationContent()}
-        </Card>
+        </RecommendationContent>
       </RiAccordion>
     </div>
   )