[PR #868] [MERGED] Improve sidebar auto-floating behavior #3377

New Issue

GiteaMirror · 2026-02-28T20:40:45-06:00

GiteaMirror commented

2026-02-28 20:40:45 -06:00

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/868
Author: @j-f1
Created: 4/7/2023
Status: ✅ Merged
Merged: 4/21/2023
Merged by: @j-f1

Base: master ← Head: jed/always-float-revision

📝 Commits (10+)

8c5a811 Centralize logic for whether sidebar should always float
d5c4576 Force floating at a smaller screen width
f712b17 Add release note
65cbf73 Lint fix
27d775a fix “typo” in release note
1c4f091 Fix context
82f15e5 Increase from 512 to 668
c4556dd Ignore pinch zooming when computing window width
ca66979 Autohide the sidebar when floating it
90e3e97 Update 868.md

📊 Changes

13 files changed (+399 additions, -472 deletions)

View changed files

📝 .eslintrc.js (+2 -0)
📝 packages/desktop-client/src/components/FinancesApp.js (+1 -4)
📝 packages/desktop-client/src/components/FloatableSidebar.js (+47 -100)
📝 packages/desktop-client/src/components/Titlebar.js (+19 -44)
📝 packages/desktop-client/src/components/accounts/MobileTransaction.js (+37 -39)
📝 packages/desktop-client/src/components/accounts/TransactionsTable.js (+20 -22)
📝 packages/desktop-client/src/components/manager/ConfigServer.js (+95 -97)
📝 packages/desktop-client/src/components/manager/subscribe/Bootstrap.js (+45 -47)
📝 packages/desktop-client/src/components/manager/subscribe/ChangePassword.js (+46 -48)
📝 packages/desktop-client/src/components/manager/subscribe/Login.js (+49 -51)
📝 packages/desktop-client/src/components/select/RecurringSchedulePicker.js (+7 -9)
📝 packages/desktop-client/src/components/sidebar.js (+25 -11)
➕ upcoming-release-notes/868.md (+6 -0)

📄 Description

I got some feedback in the discord that this behavior was disruptive when zooming in.

I’ve reduced the breakpoint so hopefully the disruption of the transition is matched by a significant improvement in available space now.
Also the 2 places in the app that use window width (including here) now check for the width of the <html> tag, not the width of the viewport (those 2 values can be different when doing a pinch-zoom, causing undesirable layout shifts.)
Most of the logic has been rewritten to improve the transitions

Mobile & desktop experience

https://user-images.githubusercontent.com/25517624/233653721-b13c5e22-ae11-4bdf-a494-a6916556d05e.mov

https://user-images.githubusercontent.com/25517624/233654784-b6cc1006-44ea-4066-be7a-8d0dd786fb5b.mov

(I’d like tapping on something to close the sidebar on mobile, but that can be approached in a future PR)

_{🔄 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/actualbudget/actual/pull/868 **Author:** [@j-f1](https://github.com/j-f1) **Created:** 4/7/2023 **Status:** ✅ Merged **Merged:** 4/21/2023 **Merged by:** [@j-f1](https://github.com/j-f1) **Base:** `master` ← **Head:** `jed/always-float-revision` --- ### 📝 Commits (10+) - [`8c5a811`](https://github.com/actualbudget/actual/commit/8c5a8119a4dcc6e043e7c6dd5ca0eda60dced383) Centralize logic for whether sidebar should always float - [`d5c4576`](https://github.com/actualbudget/actual/commit/d5c45764f8c168f268a5a0ff4dd6abb8cd7a6a43) Force floating at a smaller screen width - [`f712b17`](https://github.com/actualbudget/actual/commit/f712b17d7095e57eb576b6af27de3d5c27eef1f0) Add release note - [`65cbf73`](https://github.com/actualbudget/actual/commit/65cbf739060e873464b2e8c4aa2be6f6328bc948) Lint fix - [`27d775a`](https://github.com/actualbudget/actual/commit/27d775a94876cb13e77b1f724e5f86560b6e2b0d) fix “typo” in release note - [`1c4f091`](https://github.com/actualbudget/actual/commit/1c4f09180c1bc6d904ca217c81dcc2ed97106e3b) Fix context - [`82f15e5`](https://github.com/actualbudget/actual/commit/82f15e538ae6a8f703c6d82bd0180c335ddbc089) Increase from 512 to 668 - [`c4556dd`](https://github.com/actualbudget/actual/commit/c4556dd2346e5b909a12329c84cee72e042108cb) Ignore pinch zooming when computing window width - [`ca66979`](https://github.com/actualbudget/actual/commit/ca66979543e309d4aa1cecde020d2709bccd5307) Autohide the sidebar when floating it - [`90e3e97`](https://github.com/actualbudget/actual/commit/90e3e9703b7aa2694a3ac2bd2cd5b1a5b7628225) Update 868.md ### 📊 Changes **13 files changed** (+399 additions, -472 deletions) <details> <summary>View changed files</summary> 📝 `.eslintrc.js` (+2 -0) 📝 `packages/desktop-client/src/components/FinancesApp.js` (+1 -4) 📝 `packages/desktop-client/src/components/FloatableSidebar.js` (+47 -100) 📝 `packages/desktop-client/src/components/Titlebar.js` (+19 -44) 📝 `packages/desktop-client/src/components/accounts/MobileTransaction.js` (+37 -39) 📝 `packages/desktop-client/src/components/accounts/TransactionsTable.js` (+20 -22) 📝 `packages/desktop-client/src/components/manager/ConfigServer.js` (+95 -97) 📝 `packages/desktop-client/src/components/manager/subscribe/Bootstrap.js` (+45 -47) 📝 `packages/desktop-client/src/components/manager/subscribe/ChangePassword.js` (+46 -48) 📝 `packages/desktop-client/src/components/manager/subscribe/Login.js` (+49 -51) 📝 `packages/desktop-client/src/components/select/RecurringSchedulePicker.js` (+7 -9) 📝 `packages/desktop-client/src/components/sidebar.js` (+25 -11) ➕ `upcoming-release-notes/868.md` (+6 -0) </details> ### 📄 Description I got some feedback in the discord that this behavior was disruptive when zooming in. - I’ve reduced the breakpoint so hopefully the disruption of the transition is matched by a significant improvement in available space now. - Also the 2 places in the app that use window width (including here) now check for the width of the `<html>` tag, not the width of the viewport (those 2 values can be different when doing a pinch-zoom, causing undesirable layout shifts.) - Most of the logic has been rewritten to improve the transitions Mobile & desktop experience https://user-images.githubusercontent.com/25517624/233653721-b13c5e22-ae11-4bdf-a494-a6916556d05e.mov https://user-images.githubusercontent.com/25517624/233654784-b6cc1006-44ea-4066-be7a-8d0dd786fb5b.mov (I’d like tapping on something to close the sidebar on mobile, but that can be approached in a future PR) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2026-02-28 20:40:45 -06:00

GiteaMirror closed this issue