Fix styling

elastic · Jul 10, 2020 · c65bc88 · c65bc88
1 parent cbd7820
commit c65bc88
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 8 deletions.
diff --git a/...ck/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx b/...ck/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/...urity_solution/public/network/components/source_destination/source_destination_arrows.tsx b/...urity_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/...rity_solution/public/timelines/components/row_renderers_browser/row_renderers_browser.tsx b/...rity_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;
 `;