From 647977ceecd08f662c3b6c72014d0014fea8b75c Mon Sep 17 00:00:00 2001
From: David Sheldrick <d.j.sheldrick@gmail.com>
Date: Wed, 4 Oct 2023 16:46:59 +0100
Subject: [PATCH] frame label fix (#2016)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Frame labels lost their editing outline at some point. 🤷🏼 any idea how
this happened?

## Before
![Kapture 2023-10-04 at 13 47
28](https://github.com/tldraw/tldraw/assets/1242537/5da612e3-6456-493d-a4d7-4a5b953284bb)

## After
![Kapture 2023-10-04 at 13 49
55](https://github.com/tldraw/tldraw/assets/1242537/1608af3b-aac8-4f1c-8a9b-09aab19b07fb)


### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Add a step-by-step description of how to test your PR here.
2.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Add a brief release note for your PR here.
---
 packages/editor/editor.css                                      | 2 ++
 packages/editor/src/lib/components/Shape.tsx                    | 2 +-
 .../tldraw/src/lib/shapes/frame/components/FrameHeading.tsx     | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/editor/editor.css b/packages/editor/editor.css
index 885a2031a..efc980c46 100644
--- a/packages/editor/editor.css
+++ b/packages/editor/editor.css
@@ -1352,6 +1352,7 @@ input,
 	position: relative;
 	font-size: inherit;
 	white-space: pre;
+	border: 1px solid transparent;
 }
 
 .tl-frame-label__editing {
@@ -1361,6 +1362,7 @@ input,
 	overflow: visible;
 	background-color: var(--color-panel);
 	border-radius: var(--radius-1);
+	border-color: var(--color-selected);
 }
 
 .tl-frame-name-input {
diff --git a/packages/editor/src/lib/components/Shape.tsx b/packages/editor/src/lib/components/Shape.tsx
index e9f948739..7c2b7f483 100644
--- a/packages/editor/src/lib/components/Shape.tsx
+++ b/packages/editor/src/lib/components/Shape.tsx
@@ -81,7 +81,7 @@ export const Shape = track(function Shape({
 			if (!shape) return null
 
 			const bounds = editor.getShapeGeometry(shape).bounds
-			const dpr = editor.instanceState.devicePixelRatio
+			const dpr = Math.floor(editor.instanceState.devicePixelRatio * 100) / 100
 			// dprMultiple is the smallest number we can multiply dpr by to get an integer
 			// it's usually 1, 2, or 4 (for e.g. dpr of 2, 2.5 and 2.25 respectively)
 			const dprMultiple = nearestMultiple(dpr)
diff --git a/packages/tldraw/src/lib/shapes/frame/components/FrameHeading.tsx b/packages/tldraw/src/lib/shapes/frame/components/FrameHeading.tsx
index 1ddeb36eb..e26340118 100644
--- a/packages/tldraw/src/lib/shapes/frame/components/FrameHeading.tsx
+++ b/packages/tldraw/src/lib/shapes/frame/components/FrameHeading.tsx
@@ -97,7 +97,7 @@ export const FrameHeading = function FrameHeading({
 				maxWidth: `calc(var(--tl-zoom) * ${
 					labelSide === 'top' || labelSide === 'bottom' ? Math.ceil(width) : Math.ceil(height)
 				}px + var(--space-5))`,
-				bottom: Math.ceil(height),
+				bottom: '100%',
 				transform: `${labelTranslate} scale(var(--tl-scale)) translateX(calc(-1 * var(--space-3))`,
 			}}
 			onPointerDown={handlePointerDown}