[PR #2015] [MERGED] Lock the App Bar position when scrolling #1983

New issue

Closed

opened 2026-02-25 23:31:26 +03:00 by kerem · 0 comments

kerem commented

2026-02-25 23:31:26 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/floccusaddon/floccus/pull/2015
Author: @yougotwill
Created: 8/2/2025
Status: ✅ Merged
Merged: 8/3/2025
Merged by: @marcelklehr

Base: develop ← Head: fix/no-ref/fixed-app-bar

📝 Commits (10+)

13d2da5 fix: keep app bar fixed when scrolling
a9925b0 fix: use NativeApp for global scroll fix
9f9d565 feat: added native view scroll container class
d914cbb feat: make newAccount native view so we can use native scroll
d129571 fix: new account bottom buttons cut off at the bottom
e274782 fix: NewAccount v-stepper is styled like a card already
4f7ba4c fix: radio buttons no longer get cut off for all new account steps
35eda11 feat: updated tree native view to use native-scroll-container
6cd3005 feat: updated options native view to use native-scroll-container
51009fa feat: updated import export native view to use native-scroll-container

📊 Changes

32 files changed (+553 additions, -342 deletions)

View changed files

📝 CHANGELOG.md (+24 -0)
📝 _locales/en/messages.json (+2 -2)
📝 android/app/build.gradle (+2 -2)
📝 android/app/capacitor.build.gradle (+1 -0)
📝 android/app/src/main/assets/capacitor.config.json (+3 -0)
📝 android/app/src/main/assets/capacitor.plugins.json (+4 -0)
📝 android/capacitor.settings.gradle (+3 -0)
📝 capacitor.config.json (+3 -0)
📝 ios/App/App/capacitor.config.json (+4 -0)
📝 ios/App/Podfile (+1 -0)
📝 ios/App/Podfile.lock (+29 -23)
📝 manifest.chrome.json (+1 -1)
📝 manifest.firefox.json (+1 -1)
📝 package-lock.json (+15 -5)
📝 package.json (+2 -1)
📝 src/lib/Diff.ts (+38 -15)
📝 src/lib/Mappings.ts (+9 -2)
📝 src/lib/browser/BrowserTree.ts (+4 -0)
📝 src/lib/strategies/Default.ts (+62 -35)
📝 src/lib/strategies/Merge.ts (+3 -3)

...and 12 more files

📄 Description

This PR locks the position of the App Bar in the iOS and Android so that when you scroll it is still accessible. This is mostly useful when searching for bookmarks. When scrolling down the app contents will also no longer scroll on top of the top status bar on mobile thanks to capacitor's status bar plugin.

Tested with the iOS and Android Simulators with different screen sizes.
Loaded a temporary browser extension in Firefox to make sure I didn't break anything there.
My flow was starting with a fresh app and adding a Google Drive profile and adding bookmarks.

I also fixed the buttons being cutoff in different parts of the UI and adjusted the spacing of some elements so they are accessible on smaller screens since they were related to my scroll code changes.

First time messing with capacitor and vue so happy to hear any feedback on best practices etc.

Demo

Github wasn't uploading the video for some reason so have just uploaded it elsewhere.

https://limewire.com/d/Ajcxc#3ze6OF68CV

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/floccusaddon/floccus/pull/2015 **Author:** [@yougotwill](https://github.com/yougotwill) **Created:** 8/2/2025 **Status:** ✅ Merged **Merged:** 8/3/2025 **Merged by:** [@marcelklehr](https://github.com/marcelklehr) **Base:** `develop` ← **Head:** `fix/no-ref/fixed-app-bar` --- ### 📝 Commits (10+) - [`13d2da5`](https://github.com/floccusaddon/floccus/commit/13d2da500aadba6f5cfaa96ae71d39d3e0cc87ff) fix: keep app bar fixed when scrolling - [`a9925b0`](https://github.com/floccusaddon/floccus/commit/a9925b0f643b880b8fbf17ac39562f318ae66c2a) fix: use NativeApp for global scroll fix - [`9f9d565`](https://github.com/floccusaddon/floccus/commit/9f9d5650581a260a83548a1ea787ce34fa1c9e32) feat: added native view scroll container class - [`d914cbb`](https://github.com/floccusaddon/floccus/commit/d914cbb1e5d4aeaca003d8a7582adca5fe29f74f) feat: make newAccount native view so we can use native scroll - [`d129571`](https://github.com/floccusaddon/floccus/commit/d1295710549cdbe1cb9359f470f1e9bfc5dfad63) fix: new account bottom buttons cut off at the bottom - [`e274782`](https://github.com/floccusaddon/floccus/commit/e274782b3e84f04c94a03ed232287ca9168e6f36) fix: NewAccount v-stepper is styled like a card already - [`4f7ba4c`](https://github.com/floccusaddon/floccus/commit/4f7ba4c090bb3681a7a20ef0aafd97147742b37c) fix: radio buttons no longer get cut off for all new account steps - [`35eda11`](https://github.com/floccusaddon/floccus/commit/35eda11b41394f0a7121ed0d1b38a90f64dc48da) feat: updated tree native view to use native-scroll-container - [`6cd3005`](https://github.com/floccusaddon/floccus/commit/6cd30053541d387f37482b81763f6f333a84c1a0) feat: updated options native view to use native-scroll-container - [`51009fa`](https://github.com/floccusaddon/floccus/commit/51009faa6ed2708dbd6ad8c99b98bff0cbfd6c7b) feat: updated import export native view to use native-scroll-container ### 📊 Changes **32 files changed** (+553 additions, -342 deletions) <details> <summary>View changed files</summary> 📝 `CHANGELOG.md` (+24 -0) 📝 `_locales/en/messages.json` (+2 -2) 📝 `android/app/build.gradle` (+2 -2) 📝 `android/app/capacitor.build.gradle` (+1 -0) 📝 `android/app/src/main/assets/capacitor.config.json` (+3 -0) 📝 `android/app/src/main/assets/capacitor.plugins.json` (+4 -0) 📝 `android/capacitor.settings.gradle` (+3 -0) 📝 `capacitor.config.json` (+3 -0) 📝 `ios/App/App/capacitor.config.json` (+4 -0) 📝 `ios/App/Podfile` (+1 -0) 📝 `ios/App/Podfile.lock` (+29 -23) 📝 `manifest.chrome.json` (+1 -1) 📝 `manifest.firefox.json` (+1 -1) 📝 `package-lock.json` (+15 -5) 📝 `package.json` (+2 -1) 📝 `src/lib/Diff.ts` (+38 -15) 📝 `src/lib/Mappings.ts` (+9 -2) 📝 `src/lib/browser/BrowserTree.ts` (+4 -0) 📝 `src/lib/strategies/Default.ts` (+62 -35) 📝 `src/lib/strategies/Merge.ts` (+3 -3) _...and 12 more files_ </details> ### 📄 Description This PR locks the position of the App Bar in the iOS and Android so that when you scroll it is still accessible. This is mostly useful when searching for bookmarks. When scrolling down the app contents will also no longer scroll on top of the top status bar on mobile thanks to capacitor's status bar plugin. - Tested with the iOS and Android Simulators with different screen sizes. - Loaded a temporary browser extension in Firefox to make sure I didn't break anything there. - My flow was starting with a fresh app and adding a Google Drive profile and adding bookmarks. I also fixed the buttons being cutoff in different parts of the UI and adjusted the spacing of some elements so they are accessible on smaller screens since they were related to my scroll code changes. First time messing with capacitor and vue so happy to hear any feedback on best practices etc. # Demo Github wasn't uploading the video for some reason so have just uploaded it elsewhere. https://limewire.com/d/Ajcxc#3ze6OF68CV --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

kerem

2026-02-25 23:31:26 +03:00

closed this issue
added the
pull-request
label

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/floccus#1983

No description provided.

Rows
Columns