From aed06950632b5f691e1174f60cb697d328a9eb10 Mon Sep 17 00:00:00 2001
From: Or Geva <orgab@jfrog.com>
Date: Wed, 13 Sep 2023 14:03:07 +0300
Subject: [PATCH] Minor UI changes (#43)

Co-authored-by: Shay Dahan <shayd@jfrog.com>
---
 src/components/UI/Collapse/Collapse.module.css   |  2 +-
 src/components/UI/Header/Header.module.css       |  4 +++-
 .../UI/List/AnalysisStepsListElement.module.css  | 12 ++++++++++++
 src/components/UI/List/TimelineContent.tsx       | 16 ++++++++++------
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/UI/Collapse/Collapse.module.css b/src/components/UI/Collapse/Collapse.module.css
index 7cb25bc..987ca8f 100644
--- a/src/components/UI/Collapse/Collapse.module.css
+++ b/src/components/UI/Collapse/Collapse.module.css
@@ -68,7 +68,7 @@ h1 {
 	box-shadow: none;
 	border-radius: 6px;
 	width: 100%;
-	min-width: 530px;
+	min-width: 230px;
 }
 .accordionDetails {
 	padding: 0 16px 16px 16px;
diff --git a/src/components/UI/Header/Header.module.css b/src/components/UI/Header/Header.module.css
index b5aa657..7de24d1 100644
--- a/src/components/UI/Header/Header.module.css
+++ b/src/components/UI/Header/Header.module.css
@@ -8,7 +8,8 @@
 	border-radius: 6px;
 	background: #333;
 	max-height: 100px;
-	min-width: 390px;
+	min-width: 190px;
+	overflow: hidden;
 }
 
 .labelContainer {
@@ -56,6 +57,7 @@
 	font-style: normal;
 	font-weight: 400;
 	line-height: 18px;
+	text-wrap: nowrap;
 }
 .cveInformationContainerCol {
 	display: flex;
diff --git a/src/components/UI/List/AnalysisStepsListElement.module.css b/src/components/UI/List/AnalysisStepsListElement.module.css
index 18a7627..8974970 100644
--- a/src/components/UI/List/AnalysisStepsListElement.module.css
+++ b/src/components/UI/List/AnalysisStepsListElement.module.css
@@ -28,6 +28,8 @@
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
+	text-overflow: ellipsis;
+	overflow: hidden;
 }
 
 .showMoreLabel {
@@ -91,6 +93,14 @@
 	width: 100%;
 }
 
+.rowContainer {
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	align-items: center;
+	width: 100%;
+	gap: 8px;
+}
+
 .connector {
 	width: 1px !important;
 	background-color: #7f7f7f;
@@ -112,10 +122,12 @@
 .timeline {
 	flex: 1;
 	cursor: pointer;
+	overflow: hidden;
 }
 .timeline:hover {
 	background: #3b3b3b;
 }
 .timeline:before {
 	max-width: 0;
+	padding: 0;
 }
diff --git a/src/components/UI/List/TimelineContent.tsx b/src/components/UI/List/TimelineContent.tsx
index df5af62..e0a95e7 100644
--- a/src/components/UI/List/TimelineContent.tsx
+++ b/src/components/UI/List/TimelineContent.tsx
@@ -3,9 +3,15 @@ import { IAnalysisStep } from '../../../model'
 import css from './AnalysisStepsListElement.module.css'
 import { ReactComponent as AttackerEntry } from '../../../assets/icons/attacker_entry.svg'
 import { ReactComponent as ExploitExecution } from '../../../assets/icons/exploit_execution.svg'
-const SNIPPET_TRIM_LENGTH = 40
+
 const FILE_NAME_TRIM_LENGTH = 20
-export const timelineContentStyle = { display: 'flex', alignItems: 'center', gap: 6 }
+export const timelineContentStyle = {
+	display: 'flex',
+	alignItems: 'center',
+	gap: 6,
+	textWrap: 'nowrap',
+	overflow: 'hidden'
+}
 interface TimelineContentLogicProps {
 	item: IAnalysisStep
 	totalItems: number
@@ -30,14 +36,12 @@ export const TimelineContentLogic = ({
 
 	return (
 		<TimelineContent style={timelineContentStyle}>
-			<div className={css.flexCenter}>
+			<div className={css.rowContainer}>
 				<span className={css.row}>
 					{item.fileName && hideOverflowText(item.fileName, FILE_NAME_TRIM_LENGTH)} ({item.startRow}
 					):
 				</span>
-				<span className={css.snippet}>
-					{item.snippet && <div>{hideOverflowText(item.snippet, SNIPPET_TRIM_LENGTH)}</div>}
-				</span>
+				<span className={css.snippet}>{item.snippet}</span>
 				<span className={css.badge}>
 					{isFirstStep && <AttackerEntry />}
 					{isLastStep && <ExploitExecution />}