fix replicaset section styling

dashboard/src/components/ResourceTab.tsx

@@ -142,7 +142,6 @@ export default class ResourceTab extends Component<PropsType, StateType> {
 const StyledResourceTab = styled.div`
   width: 100%;
   margin-bottom: 2px;
-  overflow: hidden;
   background: #ffffff11;
   border-bottom-left-radius: ${(props: {
     isLast: boolean;

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/ControllerTab.tsx

@@ -381,9 +381,8 @@ const ControllerTabFC: React.FunctionComponent<Props> = ({
             <div key={firstItem.replicaSetName + index}>
               <ReplicaSetContainer>
                 <ReplicaSetName>
-                  Replicaset: {firstItem.replicaSetName}
+                  <Bold>Revision 301:</Bold> {firstItem.replicaSetName}
                 </ReplicaSetName>
-                <div> Revision: {firstItem.revisionNumber}</div>
               </ReplicaSetContainer>
               {mapPods(subArray)}
             </div>
@@ -402,10 +401,35 @@ const ControllerTabFC: React.FunctionComponent<Props> = ({
 
 export default ControllerTabFC;
 
+const Bold = styled.span`
+  font-weight: 500;
+  display: inline;
+  color: #ffffff;
+`;
+
+const RevisionLabel = styled.div`
+  font-size: 12px;
+  color: #ffffff33;
+  width: 78px;
+  text-align: right;
+  padding-top: 7px;
+  margin-right: 10px;
+  margin-left: 10px;
+  overflow-wrap: anywhere;
+`;
+
 const ReplicaSetContainer = styled.div`
   padding: 10px 5px;
   display: flex;
+  overflow-wrap: anywhere;
   justify-content: space-between;
+  border-top: 2px solid #ffffff11;
 `;
 
-const ReplicaSetName = styled.span``;
+const ReplicaSetName = styled.span`
+  padding-left: 10px;
+  overflow-wrap: anywhere;
+  max-width: calc(100% - 45px);
+  line-height: 1.5em;
+  color: #ffffff33;
+`;

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/PodRow.tsx

@@ -39,24 +39,15 @@ const PodRow: React.FunctionComponent<PodRowProps> = ({
       >
         {pod?.name}
       </Name>
-      {showTooltip && <Tooltip>{pod?.name}</Tooltip>}
-      <DetailsWrapper
-        onMouseOver={() => {
-          setShowInfoTooltip(true);
-        }}
-        onMouseOut={() => {
-          setShowInfoTooltip(false);
-        }}
-      >
-        <div>
-          <i className="material-icons">info</i>
-        </div>
-        {showInfoTooltip && (
-          <DetailsTooltip>
-            <span>Restart count: {pod.restartCount}</span>
-            <span>Created on: {pod.podAge}</span>
-          </DetailsTooltip>
-        )}
+      {
+        showTooltip && (
+          <Tooltip>
+            {pod?.name}
+            <Grey>Restart count: {pod.restartCount}</Grey>
+            <Grey>Created on: {pod.podAge}</Grey>
+          </Tooltip>
+        )
+      }
 
         <Status>
           <StatusColor status={podStatus} />
@@ -70,13 +61,21 @@ const PodRow: React.FunctionComponent<PodRowProps> = ({
             </CloseIcon>
           )}
         </Status>
-      </DetailsWrapper>
     </Tab>
   );
 };
 
 export default PodRow;
 
+const InfoIcon = styled.div`
+  width: 22px;
+`;
+
+const Grey = styled.div`
+  margin-top: 5px;
+  color: #aaaabb;
+`;
+
 const Tooltip = styled.div`
   position: absolute;
   left: 35px;
@@ -84,9 +83,11 @@ const Tooltip = styled.div`
   top: 38px;
   min-height: 18px;
   max-width: calc(100% - 75px);
-  padding: 2px 5px;
-  background: #383842dd;
+  padding: 5px 7px;
+  background: #272731;
+  z-index: 999;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   flex: 1;
   color: white;
@@ -213,44 +214,9 @@ const StatusColor = styled.div`
 const Name = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 16px;
-  word-wrap: break-word;
-  max-height: 32px;
+  line-height: 1.5em;
   display: -webkit-box;
+  overflow-wrap: anywhere;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
-`;
-
-const DetailsWrapper = styled.div`
-  position: relative;
-  display: flex;
-`;
-
-const DetailsTooltip = styled.div`
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: 1px;
-  right: 90px;
-
-  width: 200px;
-  padding: 2px 5px;
-  background: #383842dd;
-  color: white;
-  text-transform: none;
-  font-size: 12px;
-  font-family: "Work Sans", sans-serif;
-  word-wrap: unset;
-  outline: 1px solid #ffffff55;
-  opacity: 0;
-  animation: faded-in 0.1s 0.05s;
-  animation-fill-mode: forwards;
-  @keyframes faded-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-`;
+`;