Add a 'Preserve Aspect Ratio' checkbox to Properties panel (#923)

* Add the link button

* Transform around pivot

* Remove log

* Fix tests

* Add a hacky two-line layout for the checkbox

Co-authored-by: Keavon Chambers <keavon@keavon.com>

frontend/src/components/widgets/WidgetRow.vue

@@ -76,7 +76,6 @@
 .widget-row {
 	flex: 0 0 auto;
 	display: flex;
-	overflow: hidden;
 	min-height: 32px;
 
 	> * {
@@ -96,6 +95,31 @@
 			--widget-height: 16px;
 		}
 	}
+
+	// TODO: Target this in a better way than using the tooltip, which will break if changed, or when localized/translated
+	.checkbox-input [title="Preserve Aspect Ratio"] {
+		margin-bottom: -32px;
+		position: relative;
+
+		&::before,
+		&::after {
+			content: "";
+			pointer-events: none;
+			position: absolute;
+			left: 8px;
+			width: 1px;
+			height: 16px;
+			background: var(--color-7-middlegray);
+		}
+
+		&::before {
+			top: calc(-4px - 16px);
+		}
+
+		&::after {
+			bottom: calc(-4px - 16px);
+		}
+	}
 }
 </style>
 

frontend/src/components/widgets/groups/WidgetSection.vue

@@ -85,6 +85,7 @@
 		margin-bottom: 4px;
 		border: 1px solid var(--color-5-dullgray);
 		border-radius: 0 0 4px 4px;
+		overflow: hidden;
 
 		.widget-row {
 			&:first-child {