Fix styling

patrykkopycinski · patrykkopycinski · commit c65bc8871a2f · 2020-07-10T10:20:53.000+02:00
diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx
@@ -77,7 +77,6 @@ Wrapper.displayName = 'Wrapper';
 const ProviderContentWrapper = styled.span`
   > span.euiToolTipAnchor {
     display: block; /* allow EuiTooltip content to be truncatable */
-    white-space: nowrap;
   }
 `;
 
diff --git a/x-pack/plugins/security_solution/public/network/components/source_destination/source_destination_arrows.tsx b/x-pack/plugins/security_solution/public/network/components/source_destination/source_destination_arrows.tsx
@@ -35,6 +35,10 @@ Percent.displayName = 'Percent';
 
 const SourceDestinationArrowsContainer = styled(EuiFlexGroup)`
   margin: 0 2px;
+
+  .euiToolTipAnchor {
+    white-space: nowrap;
+  }
 `;
 
 SourceDestinationArrowsContainer.displayName = 'SourceDestinationArrowsContainer';
diff --git a/x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/row_renderers_browser.tsx b/x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/row_renderers_browser.tsx
@@ -72,7 +72,9 @@ const initialSorting = {
   },
 };
 
-const StyledNameButton = styled.button``;
+const StyledNameButton = styled.button`
+  text-align: left;
+`;
 
 const RowRenderersBrowserComponent = React.forwardRef(
   ({ excludedRowRendererIds = [], setExcludedRowRendererIds }: RowRenderersBrowserProps, ref) => {
@@ -92,7 +94,11 @@ const RowRenderersBrowserComponent = React.forwardRef(
     );
 
     const nameColumnRenderCallback = useCallback(
-      (value, item) => <StyledNameButton onClick={handleNameClick(item)}>{value}</StyledNameButton>,
+      (value, item) => (
+        <StyledNameButton className="kbn-resetFocusState" onClick={handleNameClick(item)}>
+          {value}
+        </StyledNameButton>
+      ),
       [handleNameClick]
     );
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx
@@ -118,9 +118,9 @@ export const Actions = React.memo<Props>(
 
         <EventsTd>
           <EventsTdContent textAlign="center" width={DEFAULT_ICON_BUTTON_WIDTH}>
-            {loading && <EventsLoading />}
-
-            {!loading && (
+            {loading ? (
+              <EventsLoading />
+            ) : (
               <EuiButtonIcon
                 aria-label={expanded ? i18n.COLLAPSE : i18n.EXPAND}
                 data-test-subj="expand-event"
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/styles.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/styles.tsx
@@ -347,6 +347,5 @@ export const EventsHeadingHandle = styled.div.attrs(({ className = '' }) => ({
  */
 
 export const EventsLoading = styled(EuiLoadingSpinner)`
-  margin: ${({ theme }) => theme.eui.euiSizeXS};
-  vertical-align: top;
+  vertical-align: middle;
 `;

Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,6 @@ Wrapper.displayName = 'Wrapper';`
`77`	`77`	const ProviderContentWrapper = styled.span`
`78`	`78`	`> span.euiToolTipAnchor {`
`79`	`79`	`display: block; /* allow EuiTooltip content to be truncatable */`
`80`		`- white-space: nowrap;`
`81`	`80`	`}`
`82`	`81`	`;
`83`	`82`