From c5f070170765b017c86768ffb9c5e8c62324daa4 Mon Sep 17 00:00:00 2001
From: Kristina <gelicia@gelicia.com>
Date: Tue, 8 Feb 2022 08:21:34 -0600
Subject: [PATCH] Reduce spacing for Explore/Logs switches (#44935)

---
 .../src/components/Switch/Switch.tsx          |  5 +--
 public/app/features/explore/Logs.tsx          | 45 +++++++++++++++----
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx
index 070444eb848..c80c8fae90c 100644
--- a/packages/grafana-ui/src/components/Switch/Switch.tsx
+++ b/packages/grafana-ui/src/components/Switch/Switch.tsx
@@ -47,12 +47,11 @@ export interface InlineSwitchProps extends Props {
 }
 
 export const InlineSwitch = React.forwardRef<HTMLInputElement, InlineSwitchProps>(
-  ({ transparent, showLabel, label, value, id, ...props }, ref) => {
+  ({ transparent, className, showLabel, label, value, id, ...props }, ref) => {
     const theme = useTheme2();
     const styles = getSwitchStyles(theme, transparent);
-
     return (
-      <div className={styles.inlineContainer}>
+      <div className={cx(styles.inlineContainer, className)}>
         {showLabel && (
           <label
             htmlFor={id}
diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx
index ca04fc794bd..9d06682c351 100644
--- a/public/app/features/explore/Logs.tsx
+++ b/public/app/features/explore/Logs.tsx
@@ -316,24 +316,43 @@ class UnthemedLogs extends PureComponent<Props, State> {
         ) : undefined}
         <div className={styles.logOptions} ref={this.topLogsRef}>
           <InlineFieldRow>
-            <InlineField label="Time" transparent>
-              <InlineSwitch value={showTime} onChange={this.onChangeTime} transparent id="show-time" />
+            <InlineField label="Time" className={styles.horizontalInlineLabel} transparent>
+              <InlineSwitch
+                value={showTime}
+                onChange={this.onChangeTime}
+                className={styles.horizontalInlineSwitch}
+                transparent
+                id="show-time"
+              />
             </InlineField>
-            <InlineField label="Unique labels" transparent>
-              <InlineSwitch value={showLabels} onChange={this.onChangeLabels} transparent id="unique-labels" />
+            <InlineField label="Unique labels" className={styles.horizontalInlineLabel} transparent>
+              <InlineSwitch
+                value={showLabels}
+                onChange={this.onChangeLabels}
+                className={styles.horizontalInlineSwitch}
+                transparent
+                id="unique-labels"
+              />
             </InlineField>
-            <InlineField label="Wrap lines" transparent>
-              <InlineSwitch value={wrapLogMessage} onChange={this.onChangewrapLogMessage} transparent id="wrap-lines" />
+            <InlineField label="Wrap lines" className={styles.horizontalInlineLabel} transparent>
+              <InlineSwitch
+                value={wrapLogMessage}
+                onChange={this.onChangewrapLogMessage}
+                className={styles.horizontalInlineSwitch}
+                transparent
+                id="wrap-lines"
+              />
             </InlineField>
-            <InlineField label="Prettify JSON" transparent>
+            <InlineField label="Prettify JSON" className={styles.horizontalInlineLabel} transparent>
               <InlineSwitch
                 value={prettifyLogMessage}
                 onChange={this.onChangePrettifyLogMessage}
+                className={styles.horizontalInlineSwitch}
                 transparent
                 id="prettify"
               />
             </InlineField>
-            <InlineField label="Dedup" transparent>
+            <InlineField label="Dedup" className={styles.horizontalInlineLabel} transparent>
               <RadioButtonGroup
                 options={Object.values(LogsDedupStrategy).map((dedupType) => ({
                   label: capitalize(dedupType),
@@ -452,8 +471,16 @@ const getStyles = (theme: GrafanaTheme2, wrapLogMessage: boolean) => {
     headerButton: css`
       margin: ${theme.spacing(0.5, 0, 0, 1)};
     `,
+    horizontalInlineLabel: css`
+      > label {
+        margin-right: 0;
+      }
+    `,
+    horizontalInlineSwitch: css`
+      padding: 0 ${theme.spacing(1)} 0 0;
+    `,
     radioButtons: css`
-      margin: 0 ${theme.spacing(1)};
+      margin: 0;
     `,
     logsSection: css`
       display: flex;