frame label fix (#2016)

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

@@ -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 {

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)

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}