From 96f93aa0d45b8a1f3e6c1922424e3b9fcc5db713 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Thu, 15 Sep 2022 15:27:04 +0200
Subject: [PATCH] change(ui): change timeline width

---
 .../Session/Layout/Player/Timeline.js         | 64 +++++++++----------
 .../Session_/Player/Controls/Timeline.js      |  2 +-
 2 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/frontend/app/components/Session/Layout/Player/Timeline.js b/frontend/app/components/Session/Layout/Player/Timeline.js
index 6332e4662..6aecca736 100644
--- a/frontend/app/components/Session/Layout/Player/Timeline.js
+++ b/frontend/app/components/Session/Layout/Player/Timeline.js
@@ -8,52 +8,48 @@ import PlayerTime from './PlayerTime';
 import cls from './timeline.module.css';
 
 export default function Timeline({ player }) {
-
-	const seekProgress = useCallback((e) => {
-		if (player.controlsDisabled) {
-			return;
-		}
+  const seekProgress = useCallback((e) => {
+    if (player.controlsDisabled) {
+      return;
+    }
     const p = e.nativeEvent.offsetX / e.target.offsetWidth;
     const time = Math.max(Math.round(p * player.state.endTime), 0);
     player.jump(time);
   });
   const scale = 100 / player.state.endTime;
-	return (
-		<div className="flex items-center" >
-			<PlayerTime  player={player} timeKey="time"/>
-			<div className={ cn(cls.progress, "relative flex items-center") } onClick={ seekProgress }>
-	      <TimeTracker player={ player } scale={ scale } />
-	      <div className={ cn("flex items-center", cls.timeline) }/>
-	      { player.lists[EVENTS].list.map(e => (
-          <div
-            key={ e.key }
-            className={ cls.event }
-            style={ { left: `${ e.time * scale }%` } }
-          />
-	      ))}
-	      { player.lists[CRASHES].list.map(e => (
+
+  return (
+    <div className="flex items-center">
+      <PlayerTime player={player} timeKey="time" />
+      <div className={cn(cls.progress, 'relative flex items-center')} onClick={seekProgress}>
+        <TimeTracker player={player} scale={scale} />
+        <div className={cn('flex items-center', cls.timeline)} />
+        {player.lists[EVENTS].list.map((e) => (
+          <div key={e.key} className={cls.event} style={{ left: `${e.time * scale}%` }} />
+        ))}
+        {player.lists[CRASHES].list.map((e) => (
           <Popup
-            key={ e.key }
+            key={e.key}
             offset="-19"
             pinned
             className="error"
-            content={ 
-              <div className={ cls.popup } >
-                <b>{ `Crash ${e.name}:` }</b>
-                <br/>
-                <span>{ e.reason }</span>
-              </div>  
+            content={
+              <div className={cls.popup}>
+                <b>{`Crash ${e.name}:`}</b>
+                <br />
+                <span>{e.reason}</span>
+              </div>
             }
           >
             <div
-                key={ e.key }
-                className={ cn(cls.markup, cls.error) }
-                style={ { left: `${ e.time * scale }%` } }
+              key={e.key}
+              className={cn(cls.markup, cls.error)}
+              style={{ left: `${e.time * scale}%` }}
             />
           </Popup>
-	      ))}
-	    </div>
-	    <PlayerTime player={player}  timeKey="endTime"/>
+        ))}
+      </div>
+      <PlayerTime player={player} timeKey="endTime" />
     </div>
-	);
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.js b/frontend/app/components/Session_/Player/Controls/Timeline.js
index febd988e0..fb7009727 100644
--- a/frontend/app/components/Session_/Player/Controls/Timeline.js
+++ b/frontend/app/components/Session_/Player/Controls/Timeline.js
@@ -220,7 +220,7 @@ export default class Timeline extends React.PureComponent {
         const scale = 100 / endTime;
 
         return (
-            <div className="flex items-center absolute w-full" style={{ top: '-4px', zIndex: 100, padding: `0 ${BOUNDRY}px`, maxWidth: '100%' }}>
+            <div className="flex items-center absolute w-full" style={{ top: '-4px', zIndex: 100, padding: `0 ${BOUNDRY}px`, maxWidth: 'calc(100% - 1rem)', left: '0.5rem' }}>
                 <div
                     className={stl.progress}
                     onClick={disabled ? null : this.jumpToTime}