From a78920216afb23d67bdd3a100726d363cd46853b Mon Sep 17 00:00:00 2001 From: Daniel Date: Mon, 8 Dec 2025 19:22:34 +0100 Subject: [PATCH] fix: borders in selection and edit cell --- webapp/IronCalc/src/components/Worksheet/Worksheet.tsx | 3 ++- .../src/components/WorksheetCanvas/worksheetCanvas.ts | 9 ++++++--- 2 files changed, 8 insertions(+), 4 deletions(-) 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