From 92b39951014eb5463cf397695b0e5aef35a225f6 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Thu, 8 Dec 2022 17:33:18 +0100
Subject: [PATCH] chore(recorder): align toolbar buttons correctly (#19357)

---
 .../src/server/injected/roleSelectorEngine.ts                | 2 +-
 packages/web/src/components/toolbarButton.tsx                | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/playwright-core/src/server/injected/roleSelectorEngine.ts b/packages/playwright-core/src/server/injected/roleSelectorEngine.ts
index e83389ab20..f468c1e52c 100644
--- a/packages/playwright-core/src/server/injected/roleSelectorEngine.ts
+++ b/packages/playwright-core/src/server/injected/roleSelectorEngine.ts
@@ -175,7 +175,7 @@ function queryRole(scope: SelectorRoot, options: RoleEngineOptions, internal: bo
 
   query(scope);
   return result;
-};
+}
 
 export function createRoleEngine(internal: boolean): SelectorEngine {
   return {
diff --git a/packages/web/src/components/toolbarButton.tsx b/packages/web/src/components/toolbarButton.tsx
index 61e95f2276..0eb75e24af 100644
--- a/packages/web/src/components/toolbarButton.tsx
+++ b/packages/web/src/components/toolbarButton.tsx
@@ -37,5 +37,8 @@ export const ToolbarButton: React.FC<React.PropsWithChildren<ToolbarButtonProps>
   let className = `toolbar-button ${icon}`;
   if (toggled)
     className += ' toggled';
-  return <button className={className} onClick={onClick} title={title} disabled={!!disabled}><span className={`codicon codicon-${icon}`}></span>{ children }</button>;
+  return <button className={className} onClick={onClick} title={title} disabled={!!disabled}>
+    <span className={`codicon codicon-${icon}`} style={children ? { marginRight: 5 } : {}}></span>
+    {children}
+  </button>;
 };