From 98bafd9afab062291f5a33739cf6dcd8f51a75fa Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Wed, 3 Jul 2024 15:29:26 +0200
Subject: [PATCH] fix ui: fix text position in events and player controls

---
 frontend/app/components/Session_/EventsBlock/Event.tsx    | 8 +++++---
 .../components/Session_/Player/Controls/ControlButton.tsx | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/Session_/EventsBlock/Event.tsx b/frontend/app/components/Session_/EventsBlock/Event.tsx
index fbcf469a1..b5ee09a76 100644
--- a/frontend/app/components/Session_/EventsBlock/Event.tsx
+++ b/frontend/app/components/Session_/EventsBlock/Event.tsx
@@ -136,7 +136,9 @@ const Event: React.FC<Props> = ({
       >
         <div className={cn(cls.main, 'flex flex-col w-full')}>
           <div className={cn('flex items-center w-full', { 'px-4': isLocation })}>
-            {event.type && iconName ? <Icon name={iconName} size='16' color={'gray-dark'} /> : icon}
+            <div style={{ minWidth: '16px' }}>
+              {event.type && iconName ? <Icon name={iconName} size='16' color={'gray-dark'} /> : icon}
+            </div>
             <div className='ml-3 w-full'>
               <div className='flex w-full items-first justify-between'>
                 <div className='flex items-center w-full' style={{ minWidth: '0' }}>
@@ -202,8 +204,8 @@ const Event: React.FC<Props> = ({
           {event.target ? 'Copy CSS' : 'Copy URL'}
         </button>
       )}
-      <div className={cn(cls.topBlock, 'w-full')}>
-        <div className={cn(cls.firstLine, 'w-full')}>{renderBody()}</div>
+      <div className={cn(cls.topBlock, cls.firstLine, 'w-full')}>
+        {renderBody()}
       </div>
       {isLocation &&
         (event.fcpTime || event.visuallyComplete || event.timeToInteractive) && (
diff --git a/frontend/app/components/Session_/Player/Controls/ControlButton.tsx b/frontend/app/components/Session_/Player/Controls/ControlButton.tsx
index 3e3b87435..2d02136e7 100644
--- a/frontend/app/components/Session_/Player/Controls/ControlButton.tsx
+++ b/frontend/app/components/Session_/Player/Controls/ControlButton.tsx
@@ -34,7 +34,7 @@ const ControlButton = ({
       id={'control-button-' + label.toLowerCase()}
       disabled={disabled}
     >
-      <div className={stl.labels}>{hasErrors && <div className={stl.errorSymbol} />}</div>
+      {hasErrors && <div className={stl.labels}><div className={stl.errorSymbol} /></div>}
       <span className={cn('font-semibold hover:text-main', active ? 'color-main' : 'color-gray-darkest')}>
         {label}
       </span>