diff --git a/webapp/IronCalc/src/components/Worksheet/Worksheet.tsx b/webapp/IronCalc/src/components/Worksheet/Worksheet.tsx index 80350e6..e7edb52 100644 --- a/webapp/IronCalc/src/components/Worksheet/Worksheet.tsx +++ b/webapp/IronCalc/src/components/Worksheet/Worksheet.tsx @@ -539,7 +539,8 @@ const EditorWrapper = styled("div")` vertical-align: bottom; overflow: hidden; text-align: left; - outline: 3px solid ${outlineColor}40; + outline: 3px solid #FBE0C9; + z-index: 1000; span { min-width: 1px; } diff --git a/webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts b/webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts index 31d0a42..fe4c6f7 100644 --- a/webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts +++ b/webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts @@ -1633,10 +1633,13 @@ export default class WorksheetCanvas { ); handleX = areaX + areaWidth; handleY = areaY + areaHeight; + const isSelecting = this.workbookState.isSelecting(); + // Add 1px when selecting to compensate for missing border + const borderCompensation = isSelecting ? 1 : 0; areaOutline.style.left = `${areaX - padding - 1}px`; areaOutline.style.top = `${areaY - padding - 1}px`; - areaOutline.style.width = `${areaWidth + 2 * padding + 1}px`; - areaOutline.style.height = `${areaHeight + 2 * padding + 1}px`; + areaOutline.style.width = `${areaWidth + 2 * padding + 1 + borderCompensation}px`; + areaOutline.style.height = `${areaHeight + 2 * padding + 1 + borderCompensation}px`; const clipLeft = rowStart < topLeftCell.row && rowStart > frozenRows; const clipTop = columnStart < topLeftCell.column && columnStart > frozenColumns; @@ -1648,7 +1651,7 @@ export default class WorksheetCanvas { clipLeft, clipTop, ); - areaOutline.style.border = this.workbookState.isSelecting() + areaOutline.style.border = isSelecting ? "none" : `1px solid ${outlineColor}`; // hide the handle if it is out of the visible area