Reduce share query button size (#2059)

microsoftgraph · Aug 25, 2022 · 7987e01 · 7987e01
1 parent 0cafe3d
commit 7987e01
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/src/app/views/query-runner/QueryRunner.styles.ts b/src/app/views/query-runner/QueryRunner.styles.ts
@@ -21,6 +21,11 @@ export const queryRunnerStyles = () => {
       root: {
         flexBasis: '75px'
       }
+    },
+    shareQueryButtonStyles: {
+      root: {
+        flexBasis: '40px'
+      }
     }
   };
 };
diff --git a/src/app/views/query-runner/query-input/QueryInput.tsx b/src/app/views/query-runner/query-input/QueryInput.tsx
@@ -39,7 +39,7 @@ const QueryInput = (props: IQueryInputProps) => {
   const { mobileScreen } = sidebarProperties;
 
   const showError = !authenticated && sampleQuery.selectedVerb !== 'GET';
-  const { queryButtonStyles, verbSelector } = queryRunnerStyles();
+  const { queryButtonStyles, verbSelector, shareQueryButtonStyles } = queryRunnerStyles();
   verbSelector.title = {
     ...verbSelector.title,
     background: getStyleFor(sampleQuery.selectedVerb)
@@ -114,7 +114,7 @@ const QueryInput = (props: IQueryInputProps) => {
             allowDisabledFocus={true}
           />
         </Stack.Item>
-        <Stack.Item shrink styles={!mobileScreen ? queryButtonStyles : {}}>
+        <Stack.Item shrink styles={!mobileScreen ? shareQueryButtonStyles : {}}>
           <ShareQuery />
         </Stack.Item>
       </Stack>

diff --git a/src/app/views/query-runner/query-runner.scss b/src/app/views/query-runner/query-runner.scss
@@ -3,7 +3,7 @@
 .run-query-button {
   button {
     width: 100%;
-    padding: 0;
+    padding: 3;
   }
 }