mobile/UI: update dive edit layout

This feels much more responsive to various screen widths to me.
Instead of a fixed grid this is now a Flow that is tries to make much
better use of the space available on the user's device. It's not always
perfect, but to me at least a massive improvement.

The commit is almost unreadable because of the re-indentation and the
move of a block of fields to earlier in the form (as that made it much
easier to flow everything). But with show -w you can get a better idea.

We have a Flow around all the fields, we pair each label with the
corresponding input field, and then have a few additional Flows to
ensure that the cylinders always start in the first column.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>

CHANGELOG.md

@@ -3,6 +3,7 @@
 - undo: reset dive-mode on undo of set-point addition
 - desktop: complete rewrite of the statistics code, significantly expanding capabilities
 - desktop: add preferences option to disable default cylinder types
+- mobile: redesigned dive edit experience
 - mobile: fix broken 'use current location' in dive edit
 - mobile: add ability to show fundamentally the same statistics as on the desktop
 - mobile: add settings for DC and calculated ceilings and show calculated ceilings

mobile-widgets/qml/DiveDetailsEdit.qml

@@ -128,41 +128,113 @@ Item {
 		clearDetailsEdit()
 	}
 
-	height: editArea.height
+	height: editArea.height + Kirigami.Units.gridUnit * 3
 	width: diveDetailsPage.width - diveDetailsPage.leftPadding - diveDetailsPage.rightPadding - Kirigami.Units.smallSpacing * 2
-	ColumnLayout {
+	Item {
+		// there is a maximum width above which this becomes less pleasant to use. 42 gridUnits
+		// allows for two of the large drop downs or four of the text fields or all of a cylinder
+		// to be in one row. More just doesn't look good
+		width: Math.min(parent.width - Kirigami.Units.smallSpacing, Kirigami.Units.gridUnit * 42)
+		// weird way to create a little space from the left edge - but I can't do a margin here
+		x: Kirigami.Units.smallSpacing
+		Flow {
 			id: editArea
-		spacing: Kirigami.Units.smallSpacing
+			// with larger fonts we need more space, or things look too crowded
+			spacing: subsurfaceTheme.currentScale > 1.0 ? 1.5 * Kirigami.Units.largeSpacing : Kirigami.Units.largeSpacing
 			width: parent.width
-
+			flow: GridLayout.LeftToRight
-		GridLayout {
+			RowLayout {
-			id: editorDetails
-			width: parent.width
-			columns: 2
 				TemplateLabelSmall {
-				Layout.alignment: Qt.AlignRight
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 4
+					horizontalAlignment: Text.AlignRight
+					text: qsTr("Date/Time:")
+				}
+				SsrfTextField {
+					id: txtDate;
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 10
+					flickable: detailsEditFlickable
+				}
+			}
+			RowLayout {
+				TemplateLabelSmall {
+					horizontalAlignment: Text.AlignRight
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 4
 					text: qsTr("Dive number:")
 				}
 				SsrfTextField {
 					id: txtNumber;
-				Layout.fillWidth: true
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 3
+					flickable: detailsEditFlickable
+				}
+				Item {
+					// if date and dive number are on the same line, don't have the Depth behind them
+					// to ensure that we add an element that fills enough of the line that the flow
+					// will not pull the next element up
+					visible: editArea.width > Kirigami.Units.gridUnit * 27
+					Layout.preferredWidth: editArea.width - Kirigami.Units.gridUnit * 26
+				}
+			}
+			RowLayout {
+				TemplateLabelSmall {
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 4
+					horizontalAlignment: Text.AlignRight
+					text: qsTr("Depth:")
+				}
+				SsrfTextField {
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 3
+					id: txtDepth
+					validator: RegExpValidator { regExp: /[^-]*/ }
+					flickable: detailsEditFlickable
+				}
+			}
+			RowLayout {
+				TemplateLabelSmall {
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 4
+					horizontalAlignment: Text.AlignRight
+					text: qsTr("Duration:")
+				}
+				SsrfTextField {
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 3
+					id: txtDuration
+					validator: RegExpValidator { regExp: /[^-]*/ }
 					flickable: detailsEditFlickable
 				}
 
+			}
+			RowLayout {
 				TemplateLabelSmall {
-				Layout.alignment: Qt.AlignRight
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 4
-				text: qsTr("Date:")
+					horizontalAlignment: Text.AlignRight
+					text: qsTr("Air Temp:")
 				}
 				SsrfTextField {
-				id: txtDate;
+					id: txtAirTemp
-				Layout.fillWidth: true
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 3
 					flickable: detailsEditFlickable
 				}
+
+			}
+			RowLayout {
 				TemplateLabelSmall {
-				Layout.alignment: Qt.AlignRight
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 4
+					horizontalAlignment: Text.AlignRight
+					text: qsTr("Water Temp:")
+				}
+				SsrfTextField {
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 3
+					id: txtWaterTemp
+					flickable: detailsEditFlickable
+				}
+			}
+			RowLayout {
+				width: Kirigami.Units.gridUnit * 20
+				TemplateLabelSmall {
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 4
+					horizontalAlignment: Text.AlignRight
 					text: qsTr("Location:")
 				}
 				TemplateEditComboBox {
+					// this one needs more space
 					id: locationBox
 					flickable: detailsEditFlickable
 					model: diveDetailsListView.currentItem && diveDetailsListView.currentItem.modelData !== null ?
@@ -176,23 +248,31 @@ Item {
 						gpsText = manager.getGpsFromSiteName(editText)
 					}
 				}
-
+			}
+			RowLayout {
+				spacing: Kirigami.Units.smallSpacing
+				Layout.preferredWidth: Kirigami.Units.gridUnit * 20
 				TemplateLabelSmall {
-				Layout.alignment: Qt.AlignRight
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 4
+					horizontalAlignment: Text.AlignRight
 					text: qsTr("Coordinates:")
 				}
 				SsrfTextField {
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 16
 					id: txtGps
-				Layout.fillWidth: true
 					flickable: detailsEditFlickable
 				}
-
+			}
+			RowLayout {
+				width: manager.locationServiceAvailable ? Kirigami.Units.gridUnit * 12 : 0
 				TemplateLabelSmall {
-				Layout.alignment: Qt.AlignRight
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 6
+					horizontalAlignment: Text.AlignRight
 					text: qsTr("Use current\nGPS location:")
 					visible: manager.locationServiceAvailable
 				}
 				TemplateCheckBox {
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 6
 					id: checkboxGPS
 					visible: manager.locationServiceAvailable
 					onCheckedChanged: {
@@ -200,6 +280,8 @@ Item {
 							gpsText = manager.getCurrentPosition()
 					}
 				}
+			}
+
 			Connections {
 				target: manager
 				onWaitingForPositionChanged: {
@@ -207,50 +289,11 @@ Item {
 					manager.appendTextToLog("received updated position info " + gpsText)
 				}
 			}
-
+			RowLayout {
+				width: Kirigami.Units.gridUnit * 20
 				TemplateLabelSmall {
-				Layout.alignment: Qt.AlignRight
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 4
-				text: qsTr("Depth:")
+					horizontalAlignment: Text.AlignRight
-			}
-			SsrfTextField {
-				id: txtDepth
-				Layout.fillWidth: true
-				validator: RegExpValidator { regExp: /[^-]*/ }
-				flickable: detailsEditFlickable
-			}
-			TemplateLabelSmall {
-				Layout.alignment: Qt.AlignRight
-				text: qsTr("Duration:")
-			}
-			SsrfTextField {
-				id: txtDuration
-				Layout.fillWidth: true
-				validator: RegExpValidator { regExp: /[^-]*/ }
-				flickable: detailsEditFlickable
-			}
-
-			TemplateLabelSmall {
-				Layout.alignment: Qt.AlignRight
-				text: qsTr("Air Temp:")
-			}
-			SsrfTextField {
-				id: txtAirTemp
-				Layout.fillWidth: true
-				flickable: detailsEditFlickable
-			}
-
-			TemplateLabelSmall {
-				Layout.alignment: Qt.AlignRight
-				text: qsTr("Water Temp:")
-			}
-			SsrfTextField {
-				id: txtWaterTemp
-				Layout.fillWidth: true
-				flickable: detailsEditFlickable
-			}
-
-			TemplateLabelSmall {
-				Layout.alignment: Qt.AlignRight
 					text: qsTr("Suit:")
 				}
 				TemplateEditComboBox  {
@@ -259,9 +302,12 @@ Item {
 					model: diveDetailsListView.currentItem && diveDetailsListView.currentItem.modelData !== null ?
 						       manager.suitList : null
 				}
-
+			}
+			RowLayout {
+				width: Kirigami.Units.gridUnit * 20
 				TemplateLabelSmall {
-				Layout.alignment: Qt.AlignRight
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 4
+					horizontalAlignment: Text.AlignRight
 					text: qsTr("Buddy:")
 				}
 				TemplateEditComboBox {
@@ -270,9 +316,12 @@ Item {
 					model: diveDetailsListView.currentItem && diveDetailsListView.currentItem.modelData !== null ?
 						       manager.buddyList : null
 				}
-
+			}
+			RowLayout {
+				width: Kirigami.Units.gridUnit * 20
 				TemplateLabelSmall {
-				Layout.alignment: Qt.AlignRight
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 4
+					horizontalAlignment: Text.AlignRight
 					text: qsTr("Divemaster:")
 				}
 				TemplateEditComboBox {
@@ -281,21 +330,37 @@ Item {
 					model: diveDetailsListView.currentItem && diveDetailsListView.currentItem.modelData !== null ?
 						       manager.divemasterList : null
 				}
+			}
 
+
+			RowLayout {
+				width: Kirigami.Units.gridUnit * 16
 				TemplateLabelSmall {
-				Layout.alignment: Qt.AlignRight
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 4
+					horizontalAlignment: Text.AlignRight
 					text: qsTr("Weight:")
 				}
 				SsrfTextField {
 					id: txtWeight
+					Layout.preferredWidth: Kirigami.Units.gridUnit * 12
 					readOnly: text === "cannot edit multiple weight systems"
-				Layout.fillWidth: true
 					flickable: detailsEditFlickable
 				}
-// all cylinder info should be able to become dynamic instead of this blob of code.
+			}
-// first cylinder
+
+			// all cylinder info should be able to become dynamic instead of this blob of code.
+			// first cylinder
+			Flow {
+				width: parent.width
+
+
+				RowLayout {
+					width: Kirigami.Units.gridUnit * 12
+					id: cb1
+
 					TemplateLabelSmall {
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 4
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("Cylinder1:")
 					}
 					TemplateComboBox {
@@ -305,11 +370,14 @@ Item {
 						model: diveDetailsListView.currentItem && diveDetailsListView.currentItem.modelData !== null ?
 							       diveDetailsListView.currentItem.modelData.cylinderList : null
 						inputMethodHints: Qt.ImhNoPredictiveText
-				Layout.fillWidth: true
 					}
-
+				}
+				RowLayout {
+					height: cb1.height
+					width: Kirigami.Units.gridUnit * 8
 					TemplateLabelSmall {
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 4
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("Gas mix:")
 					}
 					SsrfTextField {
@@ -319,9 +387,13 @@ Item {
 						validator: RegExpValidator { regExp: /(EAN100|EAN\d\d|AIR|100|\d{1,2}|\d{1,2}\/\d{1,2})/i }
 						flickable: detailsEditFlickable
 					}
-
+				}
+				RowLayout {
+					height: cb1.height
+					width: Kirigami.Units.gridUnit * 10
 					TemplateLabelSmall {
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 6
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("Start Pressure:")
 					}
 					SsrfTextField {
@@ -330,9 +402,13 @@ Item {
 						Layout.fillWidth: true
 						flickable: detailsEditFlickable
 					}
-
+				}
+				RowLayout {
+					height: cb1.height
+					width: Kirigami.Units.gridUnit * 10
 					TemplateLabelSmall {
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 6
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("End Pressure:")
 					}
 					SsrfTextField {
@@ -341,10 +417,19 @@ Item {
 						Layout.fillWidth: true
 						flickable: detailsEditFlickable
 					}
-//second cylinder
+				}
+			}
+			//second cylinder
+			Flow {
+				width: parent.width
+
+				RowLayout {
+					id: cb2
+					width: Kirigami.Units.gridUnit * 12
 					TemplateLabelSmall {
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 4
 						visible: usedCyl[1] != null ? true : false
-				Layout.alignment: Qt.AlignRight
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("Cylinder2:")
 					}
 					TemplateComboBox {
@@ -355,12 +440,15 @@ Item {
 						model: diveDetailsListView.currentItem && diveDetailsListView.currentItem.modelData !== null ?
 							       diveDetailsListView.currentItem.modelData.cylinderList : null
 						inputMethodHints: Qt.ImhNoPredictiveText
-				Layout.fillWidth: true
 					}
-
+				}
+				RowLayout {
+					width: Kirigami.Units.gridUnit * 8
+					height: cb2.height
 					TemplateLabelSmall {
 						visible: usedCyl[1] != null ? true : false
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 4
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("Gas mix:")
 					}
 					SsrfTextField {
@@ -371,10 +459,14 @@ Item {
 						validator: RegExpValidator { regExp: /(EAN100|EAN\d\d|AIR|100|\d{1,2}|\d{1,2}\/\d{1,2})/i }
 						flickable: detailsEditFlickable
 					}
-
+				}
+				RowLayout {
+					width: Kirigami.Units.gridUnit * 10
+					height: cb2.height
 					TemplateLabelSmall {
 						visible: usedCyl[1] != null ? true : false
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 6
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("Start Pressure:")
 					}
 					SsrfTextField {
@@ -384,10 +476,14 @@ Item {
 						Layout.fillWidth: true
 						flickable: detailsEditFlickable
 					}
-
+				}
+				RowLayout {
+					width: Kirigami.Units.gridUnit * 10
+					height: cb2.height
 					TemplateLabelSmall {
 						visible: usedCyl[1] != null ? true : false
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 6
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("End Pressure:")
 					}
 					SsrfTextField {
@@ -397,10 +493,18 @@ Item {
 						Layout.fillWidth: true
 						flickable: detailsEditFlickable
 					}
-// third cylinder
+				}
+			}
+			// third cylinder
+			Flow {
+				width: parent.width
+				RowLayout {
+					id: cb3
+					width: Kirigami.Units.gridUnit * 12
 					TemplateLabelSmall {
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 4
 						visible: usedCyl[2] != null ? true : false
-				Layout.alignment: Qt.AlignRight
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("Cylinder3:")
 					}
 					TemplateComboBox {
@@ -412,12 +516,15 @@ Item {
 						model: diveDetailsListView.currentItem && diveDetailsListView.currentItem.modelData !== null ?
 							       diveDetailsListView.currentItem.modelData.cylinderList : null
 						inputMethodHints: Qt.ImhNoPredictiveText
-				Layout.fillWidth: true
 					}
-
+				}
+				RowLayout {
+					width: Kirigami.Units.gridUnit * 8
+					height: cb3.height
 					TemplateLabelSmall {
 						visible: usedCyl[2] != null ? true : false
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 4
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("Gas mix:")
 					}
 					SsrfTextField {
@@ -426,11 +533,16 @@ Item {
 						text: usedGas[2] != null ? usedGas[2] : null
 						Layout.fillWidth: true
 						validator: RegExpValidator { regExp: /(EAN100|EAN\d\d|AIR|100|\d{1,2}|\d{1,2}\/\d{1,2})/i }
+						flickable: detailsEditFlickable
 					}
-
+				}
+				RowLayout {
+					width: Kirigami.Units.gridUnit * 10
+					height: cb3.height
 					TemplateLabelSmall {
 						visible: usedCyl[2] != null ? true : false
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 6
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("Start Pressure:")
 					}
 					SsrfTextField {
@@ -440,10 +552,14 @@ Item {
 						Layout.fillWidth: true
 						flickable: detailsEditFlickable
 					}
-
+				}
+				RowLayout {
+					width: Kirigami.Units.gridUnit * 10
+					height: cb3.height
 					TemplateLabelSmall {
 						visible: usedCyl[2] != null ? true : false
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 6
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("End Pressure:")
 					}
 					SsrfTextField {
@@ -453,10 +569,18 @@ Item {
 						Layout.fillWidth: true
 						flickable: detailsEditFlickable
 					}
-// fourth cylinder
+				}
+			}
+			// fourth cylinder
+			Flow {
+				width: parent.width
+				RowLayout {
+					id: cb4
+					width: Kirigami.Units.gridUnit * 12
 					TemplateLabelSmall {
 						visible: usedCyl[3] != null ? true : false
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 4
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("Cylinder4:")
 					}
 					TemplateComboBox {
@@ -468,12 +592,16 @@ Item {
 						model: diveDetailsListView.currentItem && diveDetailsListView.currentItem.modelData !== null ?
 							       diveDetailsListView.currentItem.modelData.cylinderList : null
 						inputMethodHints: Qt.ImhNoPredictiveText
-				Layout.fillWidth: true
 					}
 
+				}
+				RowLayout {
+					width: Kirigami.Units.gridUnit * 8
+					height: cb4.height
 					TemplateLabelSmall {
 						visible: usedCyl[3] != null ? true : false
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 4
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("Gas mix:")
 					}
 					SsrfTextField {
@@ -485,9 +613,14 @@ Item {
 						flickable: detailsEditFlickable
 					}
 
+				}
+				RowLayout {
+					width: Kirigami.Units.gridUnit * 10
+					height: cb4.height
 					TemplateLabelSmall {
 						visible: usedCyl[3] != null ? true : false
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 6
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("Start Pressure:")
 					}
 					SsrfTextField {
@@ -498,9 +631,14 @@ Item {
 						flickable: detailsEditFlickable
 					}
 
+				}
+				RowLayout {
+					width: Kirigami.Units.gridUnit * 10
+					height: cb4.height
 					TemplateLabelSmall {
 						visible: usedCyl[3] != null ? true : false
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 6
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("End Pressure:")
 					}
 					SsrfTextField {
@@ -510,10 +648,18 @@ Item {
 						Layout.fillWidth: true
 						flickable: detailsEditFlickable
 					}
-// fifth cylinder
+				}
+			}
+			// fifth cylinder
+			Flow {
+				width: parent.width
+				RowLayout {
+					id: cb5
+					width: Kirigami.Units.gridUnit * 12
 					TemplateLabelSmall {
 						visible: usedCyl[4] != null ? true : false
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 4
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("Cylinder5:")
 					}
 					TemplateComboBox {
@@ -528,9 +674,14 @@ Item {
 						Layout.fillWidth: true
 					}
 
+				}
+				RowLayout {
+					width: Kirigami.Units.gridUnit * 8
+					height: cb5.height
 					TemplateLabelSmall {
 						visible: usedCyl[4] != null ? true : false
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 4
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("Gas mix:")
 					}
 					SsrfTextField {
@@ -542,9 +693,14 @@ Item {
 						flickable: detailsEditFlickable
 					}
 
+				}
+				RowLayout {
+					width: Kirigami.Units.gridUnit * 10
+					height: cb5.height
 					TemplateLabelSmall {
 						visible: usedCyl[4] != null ? true : false
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 6
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("Start Pressure:")
 					}
 					SsrfTextField {
@@ -555,9 +711,14 @@ Item {
 						flickable: detailsEditFlickable
 					}
 
+				}
+				RowLayout {
+					width: Kirigami.Units.gridUnit * 10
+					height: cb5.height
 					TemplateLabelSmall {
 						visible: usedCyl[4] != null ? true : false
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 6
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("End Pressure:")
 					}
 					SsrfTextField {
@@ -567,38 +728,55 @@ Item {
 						Layout.fillWidth: true
 						flickable: detailsEditFlickable
 					}
+				}
+			}
+			// rating / visibility
+			RowLayout {
+				width: parent.width
 
+				RowLayout {
+					width: Kirigami.Units.gridUnit * 10
 					TemplateLabelSmall {
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 4
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("Rating:")
 					}
 					TemplateSpinBox {
 						id: ratingPicker
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 6
 						from: 0
 						to: 5
 						value: rating
 						onValueChanged: rating = value
 					}
 
+				}
+				RowLayout {
+					width: Kirigami.Units.gridUnit * 10
 					TemplateLabelSmall {
-				Layout.alignment: Qt.AlignRight
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 4
+						horizontalAlignment: Text.AlignRight
 						text: qsTr("Visibility:")
 					}
 					TemplateSpinBox {
 						id: visibilityPicker
+						Layout.preferredWidth: Kirigami.Units.gridUnit * 6
 						from: 0
 						to: 5
 						value: visibility
 						onValueChanged: visibility = value
 					}
-
+					Item { Layout.fillWidth: true }
+				}
+			}
+			ColumnLayout {
+				width: parent.width
 				TemplateLabelSmall {
-				Layout.columnSpan: 2
+					Layout.preferredWidth: parent.width
-				Layout.alignment: Qt.AlignLeft
 					text: qsTr("Notes:")
 				}
 				Controls.TextArea {
-				Layout.columnSpan: 2
+					Layout.preferredWidth: parent.width
 					width: parent.width
 					id: txtNotes
 					textFormat: TextEdit.RichText
@@ -643,7 +821,9 @@ Item {
 					}
 				}
 			}
+		}
 		Item {
+			anchors.top: editArea.bottom
 			height: Kirigami.Units.gridUnit * 3
 			width: height // just to make sure the spacer doesn't produce scrollbars, but also isn't null
 		}