[plasma/plasma-mobile] containments/homescreens/folio: folio: App Icon Positioning Adjustments

Devin Lin <[email protected]>
Newsgroups gmane.comp.kde.cvs
Message-ID <[email protected]>
Git commit 9304b4f4ea5fbb70c53a4a2cdaab0951b27f0101 by Devin Lin, on behalf of Micah Stanley.
Committed on 21/07/2026 at 22:24.
Pushed by devinlin into branch 'master'.

folio: App Icon Positioning Adjustments

- Adjust the icon and label to always be centered within it's cell.
- Make app icons better position within the favorites bar and make the bar width/height expand when the icons need more space to fit.
- Adjust the hitbox touch area for the apps to be only slightly larger then the app icons so one can freely press between the cells.
- Change the maximum line count for the app labels to 1 to better center the app icons.

M  +43   -0    containments/homescreens/folio/delegatetoucharea.cpp
M  +15   -0    containments/homescreens/folio/delegatetoucharea.h
M  +8    -10   containments/homescreens/folio/favouritesmodel.cpp
M  +47   -1    containments/homescreens/folio/homescreenstate.cpp
M  +20   -0    containments/homescreens/folio/homescreenstate.h
M  +1    -1    containments/homescreens/folio/qml/AppDrawerGrid.qml
M  +3    -14   containments/homescreens/folio/qml/DelegateDragItem.qml
M  +2    -1    containments/homescreens/folio/qml/FavouritesBar.qml
M  +47   -11   containments/homescreens/folio/qml/FolioHomeScreen.qml
M  +2    -1    containments/homescreens/folio/qml/HomeScreenPage.qml
M  +5    -3    containments/homescreens/folio/qml/PlaceholderDelegate.qml
M  +11   -7    containments/homescreens/folio/qml/delegate/AbstractDelegate.qml
M  +1    -1    containments/homescreens/folio/qml/delegate/DelegateLabel.qml
M  +1    -0    containments/homescreens/folio/qml/main.qml

https://invent.kde.org/plasma/plasma-mobile/-/commit/9304b4f4ea5fbb70c53a4a2cdaab0951b27f0101

diff --git a/containments/homescreens/folio/delegatetoucharea.cpp b/containments/homescreens/folio/delegatetoucharea.cpp
index a4c92980c..4042bbb3e 100644
--- a/containments/homescreens/folio/delegatetoucharea.cpp
+++ b/containments/homescreens/folio/delegatetoucharea.cpp
@@ -80,6 +80,49 @@ QPointF DelegateTouchArea::pressPosition()
     return m_mouseDownPosition;
 }
 
+QQuickItem *DelegateTouchArea::hitItem() const
+{
+    return m_hitItem;
+}
+
+void DelegateTouchArea::setHitItem(QQuickItem *hitItem)
+{
+    if (m_hitItem == hitItem) {
+        return;
+    }
+    m_hitItem = hitItem;
+    Q_EMIT hitItemChanged();
+}
+
+qreal DelegateTouchArea::hitPadding() const
+{
+    return m_hitPadding;
+}
+
+void DelegateTouchArea::setHitPadding(qreal hitPadding)
+{
+    if (qFuzzyCompare(m_hitPadding, hitPadding)) {
+        return;
+    }
+    m_hitPadding = hitPadding;
+    Q_EMIT hitPaddingChanged();
+}
+
+bool DelegateTouchArea::contains(const QPointF &point) const
+{
+    // if no target item is set, fallback to normal QQuickItem bounding box behavior
+    if (!m_hitItem) {
+        return QQuickItem::contains(point);
+    }
+
+    // map touch point to the hitItem's coordinate space
+    QPointF mappedPoint = mapToItem(m_hitItem, point);
+    // calculate the hit box plus configured padding on all sides
+    QRectF paddedRect(-m_hitPadding, -m_hitPadding, m_hitItem->width() + (m_hitPadding * 2), m_hitItem->height() + (m_hitPadding * 2));
+
+    return paddedRect.contains(mappedPoint);
+}
+
 void DelegateTouchArea::mousePressEvent(QMouseEvent *event)
 {
     if (event->button() & Qt::RightButton) {
diff --git a/containments/homescreens/folio/delegatetoucharea.h b/containments/homescreens/folio/delegatetoucharea.h
index b87f84f75..d580843a0 100644
--- a/containments/homescreens/folio/delegatetoucharea.h
+++ b/containments/homescreens/folio/delegatetoucharea.h
@@ -23,6 +23,9 @@ class DelegateTouchArea : public QQuickItem
     Q_PROPERTY(Qt::CursorShape cursorShape READ cursorShape WRITE setCursorShape RESET unsetCursor NOTIFY cursorShapeChanged FINAL)
     Q_PROPERTY(QPointF pressPosition READ pressPosition NOTIFY pressPositionChanged FINAL)
 
+    Q_PROPERTY(QQuickItem *hitItem READ hitItem WRITE setHitItem NOTIFY hitItemChanged FINAL)
+    Q_PROPERTY(qreal hitPadding READ hitPadding WRITE setHitPadding NOTIFY hitPaddingChanged FINAL)
+
     QML_NAMED_ELEMENT(DelegateTouchArea)
 
 public:
@@ -35,6 +38,14 @@ public:
     void unsetCursor();
     QPointF pressPosition();
 
+    QQuickItem *hitItem() const;
+    void setHitItem(QQuickItem *hitItem);
+
+    qreal hitPadding() const;
+    void setHitPadding(qreal hitPadding);
+
+    bool contains(const QPointF &point) const override;
+
 Q_SIGNALS:
     void clicked();
     void rightMousePress();
@@ -44,6 +55,8 @@ Q_SIGNALS:
     void hoveredChanged(bool hovered);
     void cursorShapeChanged();
     void pressPositionChanged();
+    void hitItemChanged();
+    void hitPaddingChanged();
 
 protected:
     void mousePressEvent(QMouseEvent *event) override;
@@ -72,6 +85,8 @@ private:
     bool m_pressAndHeld{false};
     Qt::CursorShape m_cursorShape{Qt::ArrowCursor};
     QPointF m_mouseDownPosition{};
+    QPointer<QQuickItem> m_hitItem{nullptr};
+    qreal m_hitPadding{0.0};
 
     QTimer *m_pressAndHoldTimer{nullptr};
 };
diff --git a/containments/homescreens/folio/favouritesmodel.cpp b/containments/homescreens/folio/favouritesmodel.cpp
index 955fd1403..b42a5f857 100644
--- a/containments/homescreens/folio/favouritesmodel.cpp
+++ b/containments/homescreens/folio/favouritesmodel.cpp
@@ -351,35 +351,33 @@ QPointF FavouritesModel::getDelegateScreenPosition(int position) const
     position = adjustIndex(position);
 
     auto homeScreenState = m_homeScreen->homeScreenState();
-    qreal screenHeight = homeScreenState->viewHeight();
     qreal screenWidth = homeScreenState->viewWidth();
-    qreal pageHeight = homeScreenState->pageHeight();
-    qreal pageWidth = homeScreenState->pageWidth();
-    qreal screenTopPadding = homeScreenState->viewTopPadding();
+    qreal screenHeight = homeScreenState->viewHeight();
     qreal screenBottomPadding = homeScreenState->viewBottomPadding();
     qreal screenLeftPadding = homeScreenState->viewLeftPadding();
     qreal screenRightPadding = homeScreenState->viewRightPadding();
     qreal cellHeight = homeScreenState->pageCellHeight();
     qreal cellWidth = homeScreenState->pageCellWidth();
 
+    qreal favouritesBarWidth = homeScreenState->favouritesBarWidth();
+    qreal favouritesBarHeight = homeScreenState->favouritesBarHeight();
+    qreal distanceFromEdge = homeScreenState->favouritesBarDistanceFromEdge();
+
     qreal startPosition = getDelegateRowStartPos();
 
     switch (homeScreenState->favouritesBarLocation()) {
     case HomeScreenState::Bottom: {
-        qreal favouritesHeight = screenHeight - pageHeight - screenBottomPadding - screenTopPadding;
         qreal x = screenLeftPadding + startPosition + cellWidth * position;
-        qreal y = screenTopPadding + pageHeight + (favouritesHeight / 2) - (cellHeight / 2);
+        qreal y = screenHeight - screenBottomPadding - distanceFromEdge - favouritesBarHeight + (favouritesBarHeight / 2) - (cellHeight / 2);
         return {x, y};
     }
     case HomeScreenState::Left: {
-        qreal favouritesWidth = screenWidth - screenLeftPadding - pageWidth - screenRightPadding;
-        qreal x = screenLeftPadding + (favouritesWidth / 2) - (cellWidth / 2);
+        qreal x = screenLeftPadding + distanceFromEdge + favouritesBarWidth + (favouritesBarWidth / 2) - (cellWidth / 2);
         qreal y = startPosition + cellHeight * position;
         return {x, y};
     }
     case HomeScreenState::Right: {
-        qreal favouritesWidth = screenWidth - screenLeftPadding - pageWidth - screenRightPadding;
-        qreal x = screenLeftPadding + pageWidth + (favouritesWidth / 2) - (cellWidth / 2);
+        qreal x = screenWidth - screenRightPadding- distanceFromEdge - favouritesBarWidth + (favouritesBarWidth / 2) - (cellWidth / 2);
         qreal y = startPosition + cellHeight * position;
         return {x, y};
     }
diff --git a/containments/homescreens/folio/homescreenstate.cpp b/containments/homescreens/folio/homescreenstate.cpp
index d7432a716..c890b7bb7 100644
--- a/containments/homescreens/folio/homescreenstate.cpp
+++ b/containments/homescreens/folio/homescreenstate.cpp
@@ -392,6 +392,45 @@ void HomeScreenState::calculatePageContentHeight()
     }
 }
 
+qreal HomeScreenState::favouritesBarWidth() const
+{
+    return m_favouritesBarWidth;
+}
+
+void HomeScreenState::setFavouritesBarWidth(qreal favouritesBarHeight)
+{
+    if (m_favouritesBarWidth != favouritesBarHeight) {
+        m_favouritesBarWidth = favouritesBarHeight;
+        Q_EMIT favouritesBarWidthChanged();
+    }
+}
+
+qreal HomeScreenState::favouritesBarHeight() const
+{
+    return m_favouritesBarHeight;
+}
+
+void HomeScreenState::setFavouritesBarHeight(qreal favouritesBarHeight)
+{
+    if (m_favouritesBarHeight != favouritesBarHeight) {
+        m_favouritesBarHeight = favouritesBarHeight;
+        Q_EMIT favouritesBarHeightChanged();
+    }
+}
+
+qreal HomeScreenState::favouritesBarDistanceFromEdge() const
+{
+    return m_favouritesBarDistanceFromEdge;
+}
+
+void HomeScreenState::setFavouritesBarDistanceFromEdge(qreal favouritesBarDistanceFromEdge)
+{
+    if (m_favouritesBarDistanceFromEdge != favouritesBarDistanceFromEdge) {
+        m_favouritesBarDistanceFromEdge = favouritesBarDistanceFromEdge;
+        Q_EMIT favouritesBarDistanceFromEdgeChanged();
+    }
+}
+
 qreal HomeScreenState::pageCellWidth() const
 {
     return m_pageCellWidth;
@@ -732,12 +771,16 @@ QPointF HomeScreenState::getPageDelegateScreenPosition(int page, int row, int co
     Q_UNUSED(page)
     qreal x = m_viewLeftPadding + ((m_pageWidth - m_pageContentWidth) / 2) + (m_pageCellWidth * column);
     qreal y = m_viewTopPadding + ((m_pageHeight - m_pageContentHeight) / 2) + (m_pageCellHeight * row);
+    y -= m_homeScreen->folioSettings()->showPagesAppLabels() ? (m_pageDelegateLabelHeight + m_pageDelegateLabelSpacing) * 0.5 : 0;
     return QPointF{x, y};
 }
 
 QPointF HomeScreenState::getFavouritesDelegateScreenPosition(int position)
 {
-    return m_homeScreen->favouritesModel()->getDelegateScreenPosition(position);
+    auto pos = m_homeScreen->favouritesModel()->getDelegateScreenPosition(position);
+    qreal x = pos.x();
+    qreal y = pos.y() - (m_homeScreen->folioSettings()->showFavouritesAppLabels() ? (m_pageDelegateLabelHeight + m_pageDelegateLabelSpacing) * 0.5 : 0);
+    return QPointF{x, y};
 }
 
 QPointF HomeScreenState::getFolderDelegateScreenPosition(int position)
@@ -751,6 +794,7 @@ QPointF HomeScreenState::getFolderDelegateScreenPosition(int position)
     qreal y = pos.y() + (m_viewHeight - m_viewTopPadding - m_viewBottomPadding - m_folderPageHeight) / 2;
     x += m_viewLeftPadding;
     y += m_viewTopPadding;
+    y -= m_homeScreen->folioSettings()->showPagesAppLabels() ? (m_pageDelegateLabelHeight + m_pageDelegateLabelSpacing) * 0.5 : 0;
 
     return {x, y};
 }
@@ -1079,6 +1123,8 @@ void HomeScreenState::swipeMoved(qreal totalDeltaX, qreal totalDeltaY, qreal del
         setFolderViewX(m_folderViewX + deltaX);
         break;
     case SwipeState::AwaitingDraggingDelegate:
+        setDelegateDragX(m_delegateDragX + totalDeltaX);
+        setDelegateDragY(m_delegateDragY + totalDeltaY);
         setSwipeState(SwipeState::DraggingDelegate);
         Q_EMIT delegateDragStarted();
         break;
diff --git a/containments/homescreens/folio/homescreenstate.h b/containments/homescreens/folio/homescreenstate.h
index e5d02a4be..12294d501 100644
--- a/containments/homescreens/folio/homescreenstate.h
+++ b/containments/homescreens/folio/homescreenstate.h
@@ -50,6 +50,10 @@ class HomeScreenState : public QObject
     Q_PROPERTY(qreal pageContentWidth READ pageContentWidth NOTIFY pageContentWidthChanged)
     Q_PROPERTY(qreal pageContentHeight READ pageContentHeight NOTIFY pageContentHeightChanged)
 
+    Q_PROPERTY(qreal favouritesBarWidth READ favouritesBarWidth WRITE setFavouritesBarWidth NOTIFY favouritesBarWidthChanged)
+    Q_PROPERTY(qreal favouritesBarHeight READ favouritesBarHeight WRITE setFavouritesBarHeight NOTIFY favouritesBarHeightChanged)
+    Q_PROPERTY(qreal favouritesBarDistanceFromEdge READ favouritesBarDistanceFromEdge WRITE setFavouritesBarDistanceFromEdge NOTIFY favouritesBarDistanceFromEdgeChanged)
+
     // cell measurements
     Q_PROPERTY(qreal pageCellWidth READ pageCellWidth NOTIFY pageCellWidthChanged)
     Q_PROPERTY(qreal pageCellHeight READ pageCellHeight NOTIFY pageCellHeightChanged)
@@ -180,6 +184,15 @@ public:
     qreal pageContentHeight() const;
     void calculatePageContentHeight();
 
+    qreal favouritesBarWidth() const;
+    void setFavouritesBarWidth(qreal favouritesBarWidth);
+
+    qreal favouritesBarHeight() const;
+    void setFavouritesBarHeight(qreal favouritesBarHeight);
+
+    qreal favouritesBarDistanceFromEdge() const;
+    void setFavouritesBarDistanceFromEdge(qreal favouritesBarDistanceFromEdge);
+
     qreal pageCellWidth() const;
     void calculatePageCellWidth();
 
@@ -289,6 +302,9 @@ Q_SIGNALS:
     void pageHeightChanged();
     void pageContentWidthChanged();
     void pageContentHeightChanged();
+    void favouritesBarWidthChanged();
+    void favouritesBarHeightChanged();
+    void favouritesBarDistanceFromEdgeChanged();
     void pageCellWidthChanged();
     void pageCellHeightChanged();
     void pageDelegateLabelHeightChanged();
@@ -400,6 +416,10 @@ private:
     qreal m_pageContentWidth{0};
     qreal m_pageContentHeight{0};
 
+    qreal m_favouritesBarWidth{0};
+    qreal m_favouritesBarHeight{0};
+    qreal m_favouritesBarDistanceFromEdge{0};
+
     qreal m_pageCellWidth{0};
     qreal m_pageCellHeight{0};
     qreal m_pageDelegateLabelHeight{0};
diff --git a/containments/homescreens/folio/qml/AppDrawerGrid.qml b/containments/homescreens/folio/qml/AppDrawerGrid.qml
index f9cc16770..2b698d60e 100644
--- a/containments/homescreens/folio/qml/AppDrawerGrid.qml
+++ b/containments/homescreens/folio/qml/AppDrawerGrid.qml
@@ -109,7 +109,7 @@ MobileShell.GridView {
             // prevent editing if lock layout is enabled
             if (folio.FolioSettings.lockLayout) return;
 
-            const mappedCoords = root.homeScreen.prepareStartDelegateDrag(model.delegate, appDelegate.delegateItem, true);
+            const mappedCoords = root.homeScreen.prepareStartDelegateDrag(model.delegate, appDelegate.delegateItem, true, true);
             folio.HomeScreenState.closeAppDrawer();
             haptics.buttonVibrate();
 
diff --git a/containments/homescreens/folio/qml/DelegateDragItem.qml b/containments/homescreens/folio/qml/DelegateDragItem.qml
index 2d381d810..3d0ed2e5b 100644
--- a/containments/homescreens/folio/qml/DelegateDragItem.qml
+++ b/containments/homescreens/folio/qml/DelegateDragItem.qml
@@ -157,7 +157,8 @@ Item {
 
     // simulate an icon delegate
     ColumnLayout {
-        anchors.fill: parent
+        id: appIconVisual
+        anchors.centerIn: parent
         spacing: 0
 
         // icon
@@ -165,7 +166,7 @@ Item {
             id: loader
             folio: root.folio
             maskManager: root.maskManager
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+            Layout.alignment: Qt.AlignHCenter
             Layout.minimumWidth: folio.FolioSettings.delegateIconSize
             Layout.minimumHeight: folio.FolioSettings.delegateIconSize
             Layout.preferredHeight: Layout.minimumHeight
@@ -175,17 +176,5 @@ Item {
             layer.enabled: true
             layer.effect: DelegateShadow {}
         }
-
-        // simulate the delegate label for positioning purposes
-        DelegateLabel {
-            id: label
-            opacity: 0
-
-            Layout.fillWidth: true
-            Layout.preferredHeight: folio.HomeScreenState.pageDelegateLabelHeight
-            Layout.topMargin: folio.HomeScreenState.pageDelegateLabelSpacing
-            Layout.leftMargin: -parent.anchors.leftMargin + Kirigami.Units.smallSpacing
-            Layout.rightMargin: -parent.anchors.rightMargin + Kirigami.Units.smallSpacing
-        }
     }
 }
diff --git a/containments/homescreens/folio/qml/FavouritesBar.qml b/containments/homescreens/folio/qml/FavouritesBar.qml
index 810e4f407..b883bac1c 100644
--- a/containments/homescreens/folio/qml/FavouritesBar.qml
+++ b/containments/homescreens/folio/qml/FavouritesBar.qml
@@ -163,6 +163,7 @@ MouseArea {
                     folio: root.folio
                     width: folio.HomeScreenState.pageCellWidth
                     height: folio.HomeScreenState.pageCellHeight
+                    labelVisible: folio.FolioSettings.showFavouritesAppLabels
                 }
             }
 
@@ -190,7 +191,7 @@ MouseArea {
                         // prevent editing if lock layout is enabled
                         if (folio.FolioSettings.lockLayout) return;
 
-                        let mappedCoords = root.homeScreen.prepareStartDelegateDrag(delegate.delegateModel, appDelegate.delegateItem);
+                        let mappedCoords = root.homeScreen.prepareStartDelegateDrag(delegate.delegateModel, appDelegate.delegateItem, false, folio.FolioSettings.showFavouritesAppLabels);
                         folio.HomeScreenState.startDelegateFavouritesDrag(
                             mappedCoords.x,
                             mappedCoords.y,
diff --git a/containments/homescreens/folio/qml/FolioHomeScreen.qml b/containments/homescreens/folio/qml/FolioHomeScreen.qml
index 2f09b6f8c..cff22dbf2 100644
--- a/containments/homescreens/folio/qml/FolioHomeScreen.qml
+++ b/containments/homescreens/folio/qml/FolioHomeScreen.qml
@@ -50,7 +50,7 @@ Item {
 
     // called by any delegates when starting drag
     // returns the mapped coordinates to be used in the home screen state
-    function prepareStartDelegateDrag(delegate, item, skipSwipeThreshold) {
+    function prepareStartDelegateDrag(delegate, item, skipSwipeThreshold, hasLabel = false) {
 
         // If the user is prompted with a context menu, they may want to let go, and so we keep the detect swipe threshold.
         // Otherwise, we want to skip detecting a swipe because we know we immediately go into delegate dragging.
@@ -61,7 +61,7 @@ Item {
         if (delegate) {
             delegateDragItem.delegate = delegate;
         }
-        return root.mapFromItem(item, 0, 0);
+        return root.mapFromItem(item, 0, hasLabel ? (folio.HomeScreenState.pageDelegateLabelHeight + folio.HomeScreenState.pageDelegateLabelSpacing) * -0.5 : 0);
     }
 
     function cancelDelegateDrag() {
@@ -213,7 +213,8 @@ Item {
                     anchors.topMargin: root.topMargin
                     anchors.leftMargin: folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Left ? 0 : root.leftMargin
                     anchors.rightMargin: folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Right ? 0 : root.rightMargin
-                    anchors.bottomMargin: folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Bottom ? 0 : root.bottomMargin
+                    // when the favorites bar is below the home screen pages, we add an extra bottom margin for better framing and aesthetics
+                    anchors.bottomMargin: folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Bottom ? Kirigami.Units.largeSpacing : root.bottomMargin
 
                     // update the model with page dimensions
                     onWidthChanged: {
@@ -345,14 +346,49 @@ Item {
                     opacity: 1 - folio.HomeScreenState.settingsOpenProgress
                     visible: opacity > 0
 
+                    readonly property int preferredHeight: Math.max(Kirigami.Units.gridUnit * 5, folio.FolioSettings.delegateIconSize + folio.HomeScreenState.pageDelegateLabelSpacing + folio.HomeScreenState.pageDelegateLabelHeight + Kirigami.Units.gridUnit)
+                    readonly property int preferredWidth: Math.max(Kirigami.Units.gridUnit * 5, folio.FolioSettings.delegateIconSize + Kirigami.Units.gridUnit)
+
+                    readonly property real distanceFromEdge: {
+                        switch (folio.HomeScreenState.favouritesBarLocation) {
+                            case Folio.HomeScreenState.Bottom:
+                                // when the favorites bar is at the bottom, we add an extra bottom margin between it and the bottom of the screen for better framing and aesthetics
+                                return Math.max((Kirigami.Units.gridUnit * 2) - root.bottomMargin, 0);
+                            case Folio.HomeScreenState.Right:
+                                return 0;
+                            case Folio.HomeScreenState.Left:
+                                return 0;
+                            default:
+                                return 0;
+                        }
+                    }
+
                     // one is ignored as anchors are set
-                    height: Kirigami.Units.gridUnit * 6
-                    width: Kirigami.Units.gridUnit * 6
+                    height: favouritesBar.preferredHeight
+                    width: favouritesBar.preferredWidth
+
+                    Binding {
+                        target: folio.HomeScreenState
+                        property: "favouritesBarDistanceFromEdge"
+                        value: favouritesBar.distanceFromEdge
+                    }
+
+                    Binding {
+                        target: folio.HomeScreenState
+                        property: "favouritesBarWidth"
+                        value: favouritesBar.width
+                    }
+
+                    Binding {
+                        target: folio.HomeScreenState
+                        property: "favouritesBarHeight"
+                        value: favouritesBar.height
+                    }
 
                     anchors.topMargin: root.topMargin
-                    anchors.bottomMargin: root.bottomMargin
-                    anchors.leftMargin: root.leftMargin
-                    anchors.rightMargin: root.rightMargin
+                    anchors.bottomMargin: root.bottomMargin + (folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Bottom ? distanceFromEdge : 0)
+                    anchors.leftMargin: root.leftMargin + (folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Left ? distanceFromEdge : 0)
+                    anchors.rightMargin: root.rightMargin + (folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Right ? distanceFromEdge : 0)
 
                     // Keyboard navigation on favorites bar
                     Keys.onPressed: (event) => {
@@ -403,7 +439,7 @@ Item {
                             }
                             PropertyChanges {
                                 target: favouritesBar
-                                height: Kirigami.Units.gridUnit * 6
+                                height: favouritesBar.preferredHeight
                             }
                         }, State {
                             name: "left"
@@ -417,7 +453,7 @@ Item {
                             }
                             PropertyChanges {
                                 target: favouritesBar
-                                width: Kirigami.Units.gridUnit * 6
+                                width: favouritesBar.preferredWidth
                             }
                         }, State {
                             name: "right"
@@ -431,7 +467,7 @@ Item {
                             }
                             PropertyChanges {
                                 target: favouritesBar
-                                width: Kirigami.Units.gridUnit * 6
+                                width: favouritesBar.preferredWidth
                             }
                         }
                     ]
diff --git a/containments/homescreens/folio/qml/HomeScreenPage.qml b/containments/homescreens/folio/qml/HomeScreenPage.qml
index cf28b5d85..81b51bb2b 100644
--- a/containments/homescreens/folio/qml/HomeScreenPage.qml
+++ b/containments/homescreens/folio/qml/HomeScreenPage.qml
@@ -118,6 +118,7 @@ Item {
         folio: root.folio
         width: folio.HomeScreenState.pageCellWidth
         height: folio.HomeScreenState.pageCellHeight
+        labelVisible: folio.FolioSettings.showPagesAppLabels
 
         property var dropPosition: folio.HomeScreenState.dragState.candidateDropPosition
         property var dropDelegate: folio.HomeScreenState.dragState.dropDelegate
@@ -291,7 +292,7 @@ Item {
                         // prevent editing if lock layout is enabled
                         if (folio.FolioSettings.lockLayout) return;
 
-                        let mappedCoords = root.homeScreen.prepareStartDelegateDrag(delegate.pageDelegate, appDelegate.delegateItem);
+                        let mappedCoords = root.homeScreen.prepareStartDelegateDrag(delegate.pageDelegate, appDelegate.delegateItem, false, folio.FolioSettings.showPagesAppLabels);
                         folio.HomeScreenState.startDelegatePageDrag(
                             mappedCoords.x,
                             mappedCoords.y,
diff --git a/containments/homescreens/folio/qml/PlaceholderDelegate.qml b/containments/homescreens/folio/qml/PlaceholderDelegate.qml
index 3c8cc988c..5e03099cd 100644
--- a/containments/homescreens/folio/qml/PlaceholderDelegate.qml
+++ b/containments/homescreens/folio/qml/PlaceholderDelegate.qml
@@ -13,12 +13,14 @@ Item {
     id: root
     property Folio.HomeScreen folio
 
+    property bool labelVisible: false
+
     width: folio.HomeScreenState.pageCellWidth
     height: folio.HomeScreenState.pageCellHeight
 
     // we need to simulate the position of the icon if it is placed at this spot
     ColumnLayout {
-        anchors.fill: parent
+        anchors.centerIn: parent
         spacing: 0
 
         // icon position placement
@@ -27,7 +29,7 @@ Item {
             color: Qt.rgba(255, 255, 255, 0.3)
             radius: Kirigami.Units.cornerRadius
 
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+            Layout.alignment: Qt.AlignHCenter
             Layout.minimumWidth: folio.FolioSettings.delegateIconSize
             Layout.minimumHeight: folio.FolioSettings.delegateIconSize
             Layout.preferredHeight: Layout.minimumHeight
@@ -38,7 +40,7 @@ Item {
         // simulate a delegate's label for positioning purposes
         DelegateLabel {
             id: label
-            opacity: 0
+            visible: root.labelVisible
             Layout.fillWidth: true
             Layout.preferredHeight: folio.HomeScreenState.pageDelegateLabelHeight
             Layout.topMargin: folio.HomeScreenState.pageDelegateLabelSpacing
diff --git a/containments/homescreens/folio/qml/delegate/AbstractDelegate.qml b/containments/homescreens/folio/qml/delegate/AbstractDelegate.qml
index 01f23af3f..fdf0e23b7 100644
--- a/containments/homescreens/folio/qml/delegate/AbstractDelegate.qml
+++ b/containments/homescreens/folio/qml/delegate/AbstractDelegate.qml
@@ -17,6 +17,9 @@ import org.kde.plasma.private.mobileshell as MobileShell
 
 Folio.DelegateTouchArea {
     id: root
+    hitItem: visualItem
+    hitPadding: Math.max(0, Math.min(Kirigami.Units.smallSpacing, (root.width - visualItem.width) * 0.5))
+
     property Folio.HomeScreen folio
     property MobileShell.MaskManager maskManager
 
@@ -98,7 +101,9 @@ Folio.DelegateTouchArea {
         }
 
         ColumnLayout {
-            anchors.fill: parent
+            id: visualLayout
+            anchors.centerIn: parent
+            width: parent.width
             spacing: 0
 
             layer.enabled: root.shadow
@@ -108,8 +113,8 @@ Folio.DelegateTouchArea {
             // affects the delegate's x and y position, which messes up the starting drag and drop
             // position (for mapFromItem in HomeScreen.qml)
             transform: Scale {
-                origin.x: root.width / 2;
-                origin.y: root.height / 2;
+                origin.x: visualLayout.width / 2;
+                origin.y: visualLayout.height / 2;
                 xScale: root.scaleAmount
                 yScale: root.scaleAmount
             }
@@ -117,7 +122,7 @@ Folio.DelegateTouchArea {
             MobileShell.BaseItem {
                 id: visualItem
 
-                Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                Layout.alignment: Qt.AlignHCenter
                 Layout.minimumWidth: folio.FolioSettings.delegateIconSize
                 Layout.minimumHeight: folio.FolioSettings.delegateIconSize
                 Layout.preferredHeight: Layout.minimumHeight
@@ -134,8 +139,9 @@ Folio.DelegateTouchArea {
 
             DelegateLabel {
                 id: label
-                opacity: text.length > 0
+                visible: text.length > 0
 
+                Layout.alignment: Qt.AlignHCenter
                 Layout.fillWidth: true
                 Layout.preferredHeight: folio.HomeScreenState.pageDelegateLabelHeight
                 Layout.topMargin: folio.HomeScreenState.pageDelegateLabelSpacing
@@ -148,5 +154,3 @@ Folio.DelegateTouchArea {
         }
     }
 }
-
-
diff --git a/containments/homescreens/folio/qml/delegate/DelegateLabel.qml b/containments/homescreens/folio/qml/delegate/DelegateLabel.qml
index 1f4ce9549..fd2d1de24 100644
--- a/containments/homescreens/folio/qml/delegate/DelegateLabel.qml
+++ b/containments/homescreens/folio/qml/delegate/DelegateLabel.qml
@@ -12,7 +12,7 @@ import plasma.applet.org.kde.plasma.mobile.homescreen.folio as Folio
 PC3.Label {
     id: label
     wrapMode: Text.WordWrap
-    maximumLineCount: 2
+    maximumLineCount: 1
     horizontalAlignment: Text.AlignHCenter
     verticalAlignment: Text.AlignTop
     elide: Text.ElideRight
diff --git a/containments/homescreens/folio/qml/main.qml b/containments/homescreens/folio/qml/main.qml
index 85721c6d8..4e91ef4af 100644
--- a/containments/homescreens/folio/qml/main.qml
+++ b/containments/homescreens/folio/qml/main.qml
@@ -29,6 +29,7 @@ ContainmentItem {
         folio.FolioSettings.load();
         folio.FavouritesModel.load();
         folio.PageListModel.load();
+        folio.HomeScreenState.pageDelegateLabelSpacing = Kirigami.Units.smallSpacing;
     }
 
     property MobileShell.MaskManager maskManager: MobileShell.MaskManager {
lmpx.com only provides a reader for public news (NNTP) servers. It is not affiliated with the servers or forums shown here and is not responsible for the content of articles, which is written by their respective authors.