Add scrollbar for desktop devices by xkello · Pull Request #4620 · MerginMaps/mobile

xkello · 2026-07-22T16:49:08Z

Description

Adds a proper scrollbar for desktop builds. Mobile builds rely on touch/flick scrolling and never had or needed a visible scrollbar, but on desktop there was no scroll indicator at all, and once turned on in ScrollView it was drawn over the left side of content instead of reserving space for itself. ListView based lists had no scrollbar handling at all, so the same content-overlap problem applied there too, across many pages.

Fixes: #4127
Original PR: #4145

Problem

The obvious first approach was to just declare ScrollBar.vertical directly on the shared MMListView component, since ListView/Flickable auto-positions an attached scrollbar correctly on its own. The problem is that a ListView's scrollbar is drawn as an overlay on top of its content - Flickable has no concept of padding the way a Control does, so there's nothing built in to reserve space for it.

In practice, that meant every delegate, header, footer, and section-delegate across the ~17 different lists in the app would need to know a scrollbar might be there and manually subtract its width from their own sizing to avoid being drawn underneath it. That's a lot of duplicated logic to keep in sync, easy to miss in a new or existing list, and it still didn't cover every case cleanly (e.g. footers/section headers don't automatically inherit a delegate's width-adjustment logic, so each one needed the same fix repeated separately). Wrapping each list in MMScrollView instead moves that reservation into one real padding value on a Control, so no list, delegate, or header needs to know a scrollbar exists at all.

What changed

Added rightPadding to the shared MMScrollView component so the scrollbar reserves its own space instead of overlapping content, headers, footers, etc.
Wrapped every ListView in the app (via the shared MMListView component) in MMScrollView, rather than handling scrollbars per-list. ScrollView is able to reuse a ListView as its own scrollable content directly, so this didn't require a rewrite of any list, just a wrapper, and now every list in the app shares the exact same scrollbar behavior and styling from one place instead of duplicating it.
The scrollbar now only appears on desktop builds. Mobile keeps its normal touch/flick scrolling untouched - only the visible scrollbar and its reserved padding are suppressed there.

Behaviour

Desktop - scrollbar visible, correctly positioned on the right edge, content no longer drawn underneath it:

Desktop - scrollbar hides and shows as needed:

Screencast.From.2026-07-22.18-38-09.webm

Mobile — no scrollbar shown, touch scrolling behaves exactly as before:

Withalion

Okay, so I'm not against the approach you chose it sounds good. However the idea is that if you are using MMListView component you are not supposed to know/care that it's a ListView wrapped in ScrollView or that you need to wrap it again in ScrollView. The API for MMListView should stay the same and if necessary the component needs to deal with scrollbar internally.

xkello · 2026-08-25T10:47:04Z

Okay, so I'm not against the approach you chose it sounds good. However the idea is that if you are using MMListView component you are not supposed to know/care that it's a ListView wrapped in ScrollView or that you need to wrap it again in ScrollView. The API for MMListView should stay the same and if necessary the component needs to deal with scrollbar internally.

Fair point, didn't think of this. Reverted files to their master version and updated MMListView. Had to add some properties as QMLs ScrollView does not support those.

…ar-for-desktop-lists

github-actions · 2026-08-25T11:09:48Z

Coverage Report for CI Build 34356898153

Coverage increased (+0.03%) to 59.575%

Details

Coverage increased (+0.03%) from the base build.
Patch coverage: No coverable lines changed in this PR.
4 coverage regressions across 1 file.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

4 previously-covered lines in 1 file lost coverage.

File	Lines Losing Coverage	Coverage
mm/core/merginuserinfo.cpp	4	77.12%

Coverage Stats


Relevant Lines:	15723
Covered Lines:	9367
Line Coverage:	59.58%
Coverage Strength:	94.19 hits per line

💛 - Coveralls

github-actions · 2026-08-25T11:24:21Z

📦 Build Artifacts Ready

OS	Status	Build	Info	Workflow run
macOS Build	❌	Build failed or not found.		#7208
linux Build	📬	Mergin Maps 72341 x86_64	Expires: 23/11/2026	#7234
win64 Build	📬	Mergin Maps 64101 win64	Expires: 23/11/2026	#6410
Android Build	📬	Mergin Maps 851911 APK [armeabi-v7a]	Expires: 23/11/2026	#8519
	📬	Mergin Maps 851911 APK [armeabi-v7a]	Google Play Store	#8519
Android Build	📬	Mergin Maps 851951 APK [arm64-v8a]	Expires: 23/11/2026	#8519
	📬	Mergin Maps 851951 APK [arm64-v8a]	Google Play Store	#8519
iOS Build	📬		Build number: 26.08.946011	#9460

Withalion

MMFormPage layout is broken. In MMFormGalleryEditor there should be some spacing between the photos and scrollbar, currently the scrollbar overlays the photos. MMProjectStatusPage not every element inside the MMListView gets it's width updated when scrollbar appears. Scrollbar is doing some weird things in MMChangelogPage, but it might be due to how the content is loaded.

There is a check in code_style.yml called no_stackview, which checks if there is any occurrence of StackView component in our code and throws error if it finds something. Make similar checks for ListView and Scrollview, fix any issues it finds so your PR will be complaint.

The approach looks good!

xkello · 2026-09-01T15:01:53Z

MMFormPage layout is broken. In MMFormGalleryEditor there should be some spacing between the photos and scrollbar, currently the scrollbar overlays the photos. MMProjectStatusPage not every element inside the MMListView gets it's width updated when scrollbar appears. Scrollbar is doing some weird things in MMChangelogPage, but it might be due to how the content is loaded.

There is a check in code_style.yml called no_stackview, which checks if there is any occurrence of StackView component in our code and throws error if it finds something. Make similar checks for ListView and Scrollview, fix any issues it finds so your PR will be complaint.

The approach looks good!

Thanks, went through all of these.

MMFormPage/toolbar layout - fixed. Turned out to be MMToolbar leaving a stale button behind when it swaps models on state change (readOnly -> edit); deferred the rebuild with Qt.callLater so old delegates finish clearing first.

MMFormGalleryEditor scrollbar overlay - fixed, photos now reserve space for the scrollbar instead of sitting under it.

MMProjectStatusPage width not updating - fixed. A few items were children of a ColumnLayout using a plain width: binding instead of Layout.fillWidth, which ColumnLayout doesn't reliably honor.

MMChangelogPage - left as is for now. Looks like it's from ListView estimating content height for off-screen items with variable-length descriptions, not something specific to this PR.

Added no_listview/no_scrollview checks to code_style.yml alongside no_stackview, and fixed the four raw ScrollView usages they caught (ListView was already clean).

github-actions · 2026-09-01T15:33:01Z

📦 Build Artifacts Ready

OS	Status	Build	Info	Workflow run
macOS Build	📬	Mergin Maps 72551 dmg	Expires: 30/11/2026	#7255
linux Build	❌	Build failed or not found.		#7281
win64 Build	📬	Mergin Maps 64571 win64	Expires: 30/11/2026	#6457
Android Build	📬	Mergin Maps 856551 APK [arm64-v8a]	Expires: 30/11/2026	#8565
	📬	Mergin Maps 856551 APK [arm64-v8a]	Google Play Store	#8565
Android Build	📬	Mergin Maps 856511 APK [armeabi-v7a]	Expires: 30/11/2026	#8565
	📬	Mergin Maps 856511 APK [armeabi-v7a]	Google Play Store	#8565
iOS Build	📬		Build number: 26.09.950711	#9507

…ar-for-desktop-lists

github-actions · 2026-09-09T14:21:13Z

📦 Build Artifacts Ready

OS	Status	Build	Info	Workflow run
macOS Build	📬	Mergin Maps 72761 dmg	Expires: 08/12/2026	#7276
linux Build	📬	Mergin Maps 73021 x86_64	Expires: 08/12/2026	#7302
win64 Build	📬	Mergin Maps 64781 win64	Expires: 08/12/2026	#6478
Android Build	📬	Mergin Maps 858611 APK [armeabi-v7a]	Expires: 08/12/2026	#8586
	📬		Google Play Store	#8586
Android Build	📬	Mergin Maps 858651 APK [arm64-v8a]	Expires: 08/12/2026	#8586
	📬		Google Play Store	#8586
iOS Build	📬		Build number: 26.09.952811	#9528

Withalion

Looks good, just some minor things now

Withalion · 2026-09-15T16:55:33Z

+        run: |
+          # MMListView.qml is the approved wrapper — exclude it from the search.
+          # Any other QML file with a bare "ListView" is using the raw Qt component
+          # instead of the wrapper, which breaks Squish test support.


doesn't break Squish, they are just not supposed to use it :)

Withalion · 2026-09-15T16:56:57Z

+          # MMScrollView.qml and MMListView.qml are the approved wrappers (the
+          # latter uses a plain ScrollView internally) — exclude both from the
+          # search. Any other QML file with a bare "ScrollView" is using the raw
+          # Qt component instead of the wrapper, which breaks Squish test support.


same thing as above

Withalion · 2026-09-15T16:58:59Z

+// Drop-in replacement for ListView that also shows a scrollbar on desktop.
+// Rooted in a plain Item rather than ScrollView, so only the properties
+// aliased below are exposed - ScrollView/Pane/Control have their own
+// contentWidth/spacing/padding that would otherwise shadow ListView's.


Suggested change

// Drop-in replacement for ListView that also shows a scrollbar on desktop.

// Rooted in a plain Item rather than ScrollView, so only the properties

// aliased below are exposed - ScrollView/Pane/Control have their own

// contentWidth/spacing/padding that would otherwise shadow ListView's.

// Drop-in replacement for ListView that also shows a scrollbar on desktop.

Withalion · 2026-09-15T17:11:56Z

Don't shrink the photo cards here. Rather make the cards keep the original size and if scrollbar is necessary increase the ListView height by the margin.

Withalion · 2026-09-15T17:14:54Z

        ScrollBar.vertical.policy: ScrollBar.AlwaysOff
-        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
        ScrollBar.horizontal.interactive: true


let the ScrollView element decide the necessity of scrollbar

I would remove the interactive property assignment

Withalion · 2026-09-15T17:17:37Z


      width: parent.width
-      ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
      ScrollBar.vertical.policy: ScrollBar.AlwaysOff


Any reason why we want to force this?

Withalion · 2026-09-15T17:18:29Z

    height: parent.height

-    contentWidth: availableWidth // to only scroll vertically
    ScrollBar.vertical.policy: ScrollBar.AlwaysOff


any reason why we want to force this?

tomasMizera · 2026-09-21T10:41:18Z

Thanks for the attempt, but the amount of changes and the impact is too risky to merge. Let's see if we'll be able to find a good solution to this..

Add scrollbar for desktop devices

7a6c484

xkello added this to the 2026.4.0 milestone Jul 22, 2026

xkello requested review from Withalion and tomasMizera July 22, 2026 16:49

Withalion reviewed Aug 18, 2026

View reviewed changes

Make ListViews more reusable

484f460

Merge remote-tracking branch 'origin/master' into feature/add-scrollb…

ecc2183

…ar-for-desktop-lists

xkello requested a review from Withalion August 25, 2026 10:50

Withalion removed this from the 2026.4.0 milestone Aug 25, 2026

Withalion reviewed Aug 31, 2026

View reviewed changes

Comment thread app/qml/components/MMListView.qml

Comment thread app/qml/components/MMListView.qml

Fix problems introduced with scrollbar

6b255a8

xkello requested a review from Withalion September 9, 2026 13:23

Merge remote-tracking branch 'origin/master' into feature/add-scrollb…

c81c756

…ar-for-desktop-lists

Withalion reviewed Sep 15, 2026

View reviewed changes

tomasMizera added the blocked Not possible to continue until other task is resolved label Sep 21, 2026

tomasMizera closed this Sep 21, 2026

Conversation

xkello commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Problem

What changed

Behaviour

Uh oh!

Withalion left a comment

Choose a reason for hiding this comment

Uh oh!

xkello commented Aug 25, 2026

Uh oh!

github-actions Bot commented Aug 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report for CI Build 34356898153

Coverage increased (+0.03%) to 59.575%

Details

Uncovered Changes

Coverage Regressions

Coverage Stats

💛 - Coveralls

Uh oh!

github-actions Bot commented Aug 25, 2026

📦 Build Artifacts Ready

Uh oh!

Withalion left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

xkello commented Sep 1, 2026

Uh oh!

github-actions Bot commented Sep 1, 2026

📦 Build Artifacts Ready

Uh oh!

github-actions Bot commented Sep 9, 2026

📦 Build Artifacts Ready

Uh oh!

Withalion left a comment

Choose a reason for hiding this comment

Uh oh!

Withalion Sep 15, 2026

Choose a reason for hiding this comment

Uh oh!

Withalion Sep 15, 2026

Choose a reason for hiding this comment

Uh oh!

Withalion Sep 15, 2026

Choose a reason for hiding this comment

Uh oh!

Withalion Sep 15, 2026

Choose a reason for hiding this comment

Uh oh!

Withalion Sep 15, 2026

Choose a reason for hiding this comment

Uh oh!

Withalion Sep 15, 2026

Choose a reason for hiding this comment

Uh oh!

Withalion Sep 15, 2026

Choose a reason for hiding this comment

Uh oh!

tomasMizera commented Sep 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

xkello commented Jul 22, 2026 •

edited

Loading

github-actions Bot commented Aug 25, 2026 •

edited

Loading