Skip to content

fix(PrimaryNavSidebar): Improve sizing, positioning and spacing#19935

Merged
noeliaSD merged 3 commits into
masterfrom
fix/issue-19912
Feb 13, 2026
Merged

fix(PrimaryNavSidebar): Improve sizing, positioning and spacing#19935
noeliaSD merged 3 commits into
masterfrom
fix/issue-19912

Conversation

@noeliaSD

@noeliaSD noeliaSD commented Feb 12, 2026

Copy link
Copy Markdown
Collaborator

Closes #19912
Closes #19914
Closes #19915

What does the PR do

  • Adjust background color to better match design on both desktop and mobile.
  • Refine internal spacing and margins between navbar elements and edges.
  • Increase left margin in portrait mode to provide safe area for floating sidebar.
  • Improve SettingsList margins for better alignment and visual consistency.
  • Ensure TopBanners behave like SafeArea, shifting both NavBar and main content.
  • Hide Notification Center unread badge when nav bar is collapsed.

Affected areas

  • PrimaryNavSidebar
  • SettingsList
  • Portrait layout left margins (general safe area adjustments)
  • Banners

Architecture compliance

Impact on end user

Better UX

How to test

1. Nav bar sizes / margins

  • On a mobile device, open the app and interact with the navigation bar.
  • Verify that the left margins are correct in portrait mode.
  • Ensure the spacing works properly with the swipe indicator / rainbow handler.
  • Confirm the navbar edge and elements margins matches the expected design proportions.

2. Activity Center badge behavior

  • Confirm Activity Center notification badge is not shown when navigation bar is collapsed.
Screen.Recording.2026-02-13.at.11.02.11.mov

3. Banners

  • Ensure banners push back main content + nav bar
Screenshot 2026-02-12 at 17 58 57 image

Risk

Low

@noeliaSD noeliaSD requested review from a team, alexjba, caybro and micieslak as code owners February 12, 2026 15:56
@noeliaSD noeliaSD requested review from Khushboo-dev-cpp, jrainville and sunleos and removed request for a team and Khushboo-dev-cpp February 12, 2026 15:56
@noeliaSD noeliaSD changed the title fix(PrimaryNavSidebar): Improve dimensions, positioning and spacing fix(PrimaryNavSidebar): Improve sizing, positioning and spacing Feb 12, 2026
@status-im-auto

status-im-auto commented Feb 12, 2026

Copy link
Copy Markdown
Member

Jenkins Builds

Click to see older builds (36)
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 3587ddd0 1 2026-02-12 16:13:47 ~16 min android/arm64 🤖apk 📲
e048cf1 1 2026-02-12 16:17:41 ~20 min macos/aarch64-nwaku 📄log
✔️ e048cf1 1 2026-02-12 16:19:26 ~22 min tests/nim 📄log
✔️ e048cf1 1 2026-02-12 16:19:40 ~22 min ios/aarch64 📱ipa 📲
e048cf1 1 2026-02-12 16:21:13 ~24 min tests/ui 📄log
✖️ e048cf1 938 2026-02-12 16:24:59 ~11 min tests/e2e-android 📦pkg
✔️ e048cf1 1 2026-02-12 16:25:42 ~28 min linux/x86_64 📦tgz
✔️ e048cf1 1 2026-02-12 16:27:01 ~29 min macos/aarch64 🍎dmg
✔️ e048cf1 1 2026-02-12 16:27:12 ~30 min linux/x86_64-nwaku 📦tgz
✔️ e048cf1 1 2026-02-12 16:32:27 ~35 min windows/x86_64 💿exe
✔️ e048cf1 9770 2026-02-12 16:43:27 ~17 min tests/e2e 📊rpt
✖️ e048cf1 1890 2026-02-12 17:12:28 ~39 min tests/e2e-windows 📊rpt
✔️ 1bd8d5b 3 2026-02-12 17:25:20 ~10 min android/arm64 🤖apk 📲
✔️ 1bd8d5b 3 2026-02-12 17:25:34 ~10 min tests/nim 📄log
1bd8d5b 3 2026-02-12 17:25:58 ~10 min macos/aarch64-nwaku 📄log
1bd8d5b 3 2026-02-12 17:26:18 ~11 min tests/ui 📄log
✔️ 1bd8d5b 3 2026-02-12 17:28:34 ~13 min ios/aarch64 📱ipa 📲
✖️ 1bd8d5b 939 2026-02-12 17:32:27 ~7 min tests/e2e-android 📦pkg
✔️ 1bd8d5b 3 2026-02-12 17:32:56 ~17 min macos/aarch64 🍎dmg
✔️ 1bd8d5b 3 2026-02-12 17:36:23 ~21 min linux/x86_64-nwaku 📦tgz
✔️ 1bd8d5b 3 2026-02-12 17:36:32 ~21 min linux/x86_64 📦tgz
✔️ 1bd8d5b 3 2026-02-12 17:49:32 ~34 min windows/x86_64 💿exe
✔️ 1bd8d5b 9771 2026-02-12 17:53:54 ~17 min tests/e2e 📊rpt
✖️ 1bd8d5b 1892 2026-02-12 18:13:01 ~23 min tests/e2e-windows 📊rpt
2a47d35 5 2026-02-13 11:53:56 ~8 min macos/aarch64-nwaku 📄log
✔️ 2a47d35 5 2026-02-13 11:57:10 ~11 min tests/nim 📄log
✔️ 2a47d35 5 2026-02-13 11:57:22 ~12 min ios/aarch64 📱ipa 📲
2a47d35 5 2026-02-13 12:00:38 ~15 min tests/ui 📄log
✔️ 2a47d35 5 2026-02-13 12:02:16 ~16 min macos/aarch64 🍎dmg
✖️ 2a47d35 979 2026-02-13 12:03:26 ~8 min tests/e2e-android 📦pkg
✔️ 2a47d35 5 2026-02-13 12:05:50 ~20 min linux/x86_64 📦tgz
✔️ 2a47d35 5 2026-02-13 12:06:35 ~21 min linux/x86_64-nwaku 📦tgz
✔️ 2a47d35 5 2026-02-13 12:21:18 ~35 min windows/x86_64 💿exe
✔️ 2a47d35 9787 2026-02-13 12:24:04 ~18 min tests/e2e 📊rpt
✖️ 2a47d35 1908 2026-02-13 12:48:22 ~26 min tests/e2e-windows 📊rpt
✔️ 8cae9400 5 2026-02-13 11:54:29 ~9 min android/arm64 🤖apk 📲
Commit #️⃣ Finished (UTC) Duration Platform Result
07369bd 6 2026-02-13 17:40:44 ~8 min macos/aarch64-nwaku 📄log
✔️ 07369bd 6 2026-02-13 17:50:12 ~17 min tests/nim 📄log
✔️ 07369bd 6 2026-02-13 17:51:22 ~18 min ios/aarch64 📱ipa 📲
✔️ 07369bd 6 2026-02-13 17:52:27 ~19 min macos/aarch64 🍎dmg
✔️ 07369bd 6 2026-02-13 17:59:09 ~26 min linux/x86_64-nwaku 📦tgz
✔️ 07369bd 7 2026-02-13 17:59:11 ~26 min tests/ui 📄log
✔️ 07369bd 6 2026-02-13 17:59:41 ~27 min linux/x86_64 📦tgz
✖️ 07369bd 999 2026-02-13 18:01:55 ~14 min tests/e2e-android 📦pkg
✔️ 07369bd 6 2026-02-13 18:08:59 ~36 min windows/x86_64 💿exe
✔️ 07369bd 9805 2026-02-13 18:19:31 ~19 min tests/e2e 📊rpt
✔️ 07369bd 1926 2026-02-13 18:34:54 ~25 min tests/e2e-windows 📊rpt
✔️ 04d6909d 6 2026-02-13 17:47:14 ~14 min android/arm64 🤖apk 📲

@jrainville jrainville left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good

@alexjba alexjba left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Tested on IOS

Comment thread ui/imports/utils/Constants.qml Outdated
@sunleos

sunleos commented Feb 12, 2026

Copy link
Copy Markdown
Collaborator

Tested APK build 3
Device: Android 15

  1. the nav bar handle is visible when a bottom sheet is open, which should not be the case. This one is fixed here: fix: Navbar regression where the indicator is always visible #19940. Hence, just logging this issue here to ensure that 19940 is merged with this one as well.
image

@sunleos

sunleos commented Feb 12, 2026

Copy link
Copy Markdown
Collaborator

@noeliaSD,

The nav bar and its handle look great to me as is.

Tested APK build 3
Device: Android 15

Two very minor issues are the following. Maybe if they are trivial, we can fix them now. If not, Let's merge this PR as is.

  1. that Notification center blue dot is visible when the bar is closed. Maybe we can just place it a bit more inside that Notification center element.
image
  1. It looks that this area (see the light-green arrow) needs a bit more height to be the same as the one at the top:
image

@sunleos

sunleos commented Feb 13, 2026

Copy link
Copy Markdown
Collaborator

Hey @noeliaSD,

Tested APK build 5
Device: Android 15

  1. the two issues raised here are fixed fix(PrimaryNavSidebar): Improve sizing, positioning and spacing #19935 (comment). Thank you!

Two more comments, but not critical ones:

  1. It looks that the nav bar handle got a bit wider than it was yesterday :), and it stills the attention. I remember increased its width by 20%, let's just change it to 10%. Otherwise, it looks too prominent on the app screen
image
  1. The error message button looks a bit compressed vertically. Maybe we can add a bit to its height.
    Now:
image

I guess this PR is good to be merged from my point of view.

- Adjust background color to better match design on both desktop and mobile.
- Refine internal spacing and margins between navbar elements and edges.
- Increase left margin in portrait mode to provide safe area for floating sidebar.
- Improve `SettingsList` margins for better alignment and visual consistency.

Closes #19912
… and desktop

- Align desktop and mobile behavior where UI main content + nav bar are pushed down.
- Ensure TopBanners behave like SafeArea, shifting both NavBar and main content.
- Prevent overlapping between banners and navigation/content.

Closes #19914
…v bar is collapsed

Ensure the Activity Center unread dot/badge is only visible when the nav bar is opened.

Prevents visual glitches where the badge was still shown while the sidebar was collapsed.

Fixes #19915
@noeliaSD noeliaSD merged commit 9758c5c into master Feb 13, 2026
12 of 14 checks passed
@noeliaSD noeliaSD deleted the fix/issue-19912 branch February 13, 2026 18:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

5 participants