Use font-relative units instead of pixels

All spacing/margins now scale with baseFontSize:
- Table cell padding: 0.5em horizontal, 0.25em vertical
- Table margins: 0.75em
- Column spacing: 1.5em
- Code block margins: 0.5em
- Border radius: fontSize/3
- Left rule width: fontSize/6

Ensures proper display at any DPI/font size.
This commit is contained in:
Levi Neely 2026-10-01 10:23:20 +02:00
parent 09962cc800
commit 9e48a89c92
1 changed files with 16 additions and 13 deletions

View File

@ -346,11 +346,11 @@ ListView {
Component { Component {
id: textBlockComponent id: textBlockComponent
RowLayout { RowLayout {
spacing: 8 spacing: outline.baseFontSize * 0.5
Rectangle { Rectangle {
width: 2 width: outline.baseFontSize / 6
Layout.fillHeight: true Layout.fillHeight: true
Layout.leftMargin: 2 Layout.leftMargin: outline.baseFontSize / 6
color: theme.midColor color: theme.midColor
} }
Label { Label {
@ -369,14 +369,14 @@ ListView {
id: codeBlockComponent id: codeBlockComponent
Rectangle { Rectangle {
color: theme.alternateBaseColor color: theme.alternateBaseColor
radius: 4 radius: outline.baseFontSize / 3
implicitHeight: codeColumn.implicitHeight + 12 implicitHeight: codeColumn.implicitHeight + outline.baseFontSize
ColumnLayout { ColumnLayout {
id: codeColumn id: codeColumn
anchors.fill: parent anchors.fill: parent
anchors.margins: 6 anchors.margins: outline.baseFontSize * 0.5
spacing: 4 spacing: outline.baseFontSize * 0.3
// Language label // Language label
Label { Label {
@ -406,8 +406,8 @@ ListView {
Rectangle { Rectangle {
id: tableRect id: tableRect
color: theme.alternateBaseColor color: theme.alternateBaseColor
radius: 4 radius: outline.baseFontSize / 3
implicitHeight: tableColumn.implicitHeight + 16 implicitHeight: tableColumn.implicitHeight + outline.baseFontSize * 1.5
property var tableData: modelData property var tableData: modelData
@ -415,8 +415,8 @@ ListView {
id: tableColumn id: tableColumn
anchors.left: parent.left anchors.left: parent.left
anchors.top: parent.top anchors.top: parent.top
anchors.margins: 8 anchors.margins: outline.baseFontSize * 0.75
spacing: 2 spacing: outline.baseFontSize * 0.25
Repeater { Repeater {
model: tableRect.tableData.rows ?? [] model: tableRect.tableData.rows ?? []
@ -425,14 +425,17 @@ ListView {
required property var modelData required property var modelData
required property int index required property int index
property bool isHeader: index === 0 && (tableRect.tableData.hasHeader ?? false) property bool isHeader: index === 0 && (tableRect.tableData.hasHeader ?? false)
spacing: 16 spacing: outline.baseFontSize * 1.5
Repeater { Repeater {
model: modelData model: modelData
Label { Label {
required property string modelData required property string modelData
Layout.minimumWidth: 60 leftPadding: outline.baseFontSize * 0.5
rightPadding: outline.baseFontSize * 0.5
topPadding: outline.baseFontSize * 0.25
bottomPadding: outline.baseFontSize * 0.25
text: modelData text: modelData
color: parent.isHeader ? theme.textColor : theme.placeholderTextColor color: parent.isHeader ? theme.textColor : theme.placeholderTextColor
font.bold: parent.isHeader font.bold: parent.isHeader