fix column lines alignment

TNO · Sep 25, 2023 · a7611a0 · a7611a0
1 parent 7155ea0
commit a7611a0
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 10 deletions.
diff --git a/src/viewer/hooks/useStyleManager.ts b/src/viewer/hooks/useStyleManager.ts
@@ -76,7 +76,6 @@ export const getHeaderColumnStyle = (
 		display: "inline-block",
 		height,
 		width: columnWidth,
-		borderLeft: BORDER,
 	};
 
 	return headerColumnStyle;
@@ -104,6 +103,7 @@ export const getHeaderColumnInnerStyle = (
 		alignItems: "center",
 		justifyContent: isHeader ? "center" : "left",
 		paddingLeft: "2px",
+		borderLeft: BORDER,
 	};
 
 	return headerColumnInnerStyle;

diff --git a/src/viewer/log/LogView.tsx b/src/viewer/log/LogView.tsx
@@ -95,7 +95,7 @@ export default class LogView extends React.Component<Props, State> {
 		colorMap: string,
 	) {
 		const height = isHeader ? LOG_HEADER_HEIGHT : LOG_ROW_HEIGHT;
-		const widthNew = width + BORDER_SIZE; //increase width with 1px, because the border is 1px
+
 		let color = "transparent";
 		let fontColor = "";
 
@@ -107,8 +107,7 @@ export default class LogView extends React.Component<Props, State> {
 				fontColor = "#ffffff";
 			}
 		}
-
-		const columnHeaderStyle = getHeaderColumnStyle(widthNew, columnIndex, height);
+		const columnHeaderStyle = getHeaderColumnStyle(width, columnIndex, height);
 		const columnHeaderInnerStyle = getHeaderColumnInnerStyle(height, isHeader);
 		const colorStyle: React.CSSProperties = { backgroundColor: color, color: fontColor };
 		const innerStyle = { ...columnHeaderInnerStyle, ...colorStyle };
@@ -415,8 +414,7 @@ export default class LogView extends React.Component<Props, State> {
 
 	renderHeaderColumn(value: string, columnIndex: number, isHeader: boolean, width: number) {
 		const height = isHeader ? LOG_HEADER_HEIGHT : LOG_ROW_HEIGHT;
-		const widthNew = width + BORDER_SIZE; //increase width with 1px, because the border is 1px
-		const columnHeaderStyle = getHeaderColumnStyle(widthNew, columnIndex, height);
+		const columnHeaderStyle = getHeaderColumnStyle(width, columnIndex, height);
 		const columnHeaderInnerStyle = getHeaderColumnInnerStyle(height, isHeader);
 
 		return (

diff --git a/src/viewer/structures/StructureTable.tsx b/src/viewer/structures/StructureTable.tsx
@@ -107,8 +107,7 @@ export default class StructureTable extends React.Component<Props, State> {
 
 	renderHeaderColumn(value: string, columnIndex: number, width: number) {
 		const height = LOG_HEADER_HEIGHT;
-		const widthNew = width + BORDER_SIZE;
-		const headerColumnStyle = getHeaderColumnStyle(widthNew, columnIndex, height);
+		const headerColumnStyle = getHeaderColumnStyle(width, columnIndex, height);
 		const headerColumnInnerStyle = getHeaderColumnInnerStyle(height, true);
 		return (
 			<ReactResizeDetector
@@ -125,8 +124,7 @@ export default class StructureTable extends React.Component<Props, State> {
 
 	renderColumn(rowIndex: number, cellIndex: number, width: number) {
 		const { structureEntries } = this.props;
-		const widthNew = width + BORDER_SIZE;
-		const columnStyle = getStructureTableColumnStyle(widthNew, cellIndex);
+		const columnStyle = getStructureTableColumnStyle(width, cellIndex);
 		const columnInnerStyle = getStructureTableCellSelectionStyle(
 			structureEntries,
 			rowIndex,