Wrap the panel's button rows instead of running past the card edge
The session-confirmation card lays out four buttons, which come to roughly 440px of content in a card 332px wide (360 less 14px of padding each side). A Row has no notion of how wide its parent is and no wrap, so it put them in one line and the last two ran off the right edge of the popup. Flow bound to the parent width instead, so the buttons take a second line when they need one. Applied to every button row rather than just the one that overflowed - the failure card can show four at once for the same reason, and the server form's rows would do it at a narrower card or a larger font. Labels are left as they are: "Switch and restart" says what the button does to the sessions listed above it, and two tidy rows read better than four terse ones crammed into a single line.
This commit is contained in:
@@ -680,7 +680,10 @@ Panel {
|
||||
font.pixelSize: Style.space(10)
|
||||
}
|
||||
|
||||
Row {
|
||||
// Flow, not Row: these can total more than the card is wide, and a
|
||||
// Row lays them straight past its right edge instead of wrapping.
|
||||
Flow {
|
||||
width: parent.width
|
||||
spacing: Style.space(7)
|
||||
|
||||
PillButton {
|
||||
@@ -745,7 +748,10 @@ Panel {
|
||||
onAccepted: root.saveServerSettings()
|
||||
}
|
||||
|
||||
Row {
|
||||
// Flow, not Row: these can total more than the card is wide, and a
|
||||
// Row lays them straight past its right edge instead of wrapping.
|
||||
Flow {
|
||||
width: parent.width
|
||||
spacing: Style.space(7)
|
||||
|
||||
PillButton {
|
||||
@@ -796,7 +802,10 @@ Panel {
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
// Flow, not Row: these can total more than the card is wide, and a
|
||||
// Row lays them straight past its right edge instead of wrapping.
|
||||
Flow {
|
||||
width: parent.width
|
||||
spacing: Style.space(7)
|
||||
visible: root.serverNeedsKey
|
||||
|
||||
@@ -805,7 +814,10 @@ Panel {
|
||||
|
||||
PanelSeparator { width: parent.width }
|
||||
|
||||
Row {
|
||||
// Flow, not Row: these can total more than the card is wide, and a
|
||||
// Row lays them straight past its right edge instead of wrapping.
|
||||
Flow {
|
||||
width: parent.width
|
||||
spacing: Style.space(7)
|
||||
|
||||
PillButton { label: "Save"; primary: true; onTriggered: root.saveServerSettings() }
|
||||
@@ -907,7 +919,10 @@ Panel {
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
// Flow, not Row: these can total more than the card is wide, and a
|
||||
// Row lays them straight past its right edge instead of wrapping.
|
||||
Flow {
|
||||
width: parent.width
|
||||
spacing: Style.space(7)
|
||||
|
||||
PillButton {
|
||||
|
||||
Reference in New Issue
Block a user