CSS issue with side navigation panel of project dashboard : logo stacking beneath other items

[JaykumarPatel1998]

Bug report

• [✔ ] I confirm this is a bug with Supabase, not with my own application.
• [ ✔] I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

Slight CSS issues in the side navigation panel of the project dashboard page: When the side panel is expanded and scrolled - supabase logo appears at the bottom layer and other items are layered above it.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to 'https://supabase.com/dashboard/projects'.
2. Open any project from your projects.
3. hover above the side navigation panel and scroll through the items.
4. Focus on the supabase logo at the top-left corner of the screen - it appears awkwardly positioned - IMO, it should appear at top and all items should scroll under it.

Expected behavior

Focus on the supabase logo at the top-left corner of the screen - it appears awkwardly positioned - IMO, it should appear at top and all items should scroll under it.

Screenshots

before scroll:

after scroll:

after side panel is collapsed:

[smitgol]

I'll take a look at this one

[Neeraj-gagat]

hi @JaykumarPatel1998 i am getting error while installing dependencies
on npm install i come across this error

npm warn deprecated puppeteer@16.2.0: < 19.4.0 is no longer supported
npm error code 1
npm error path /home/neeraj/Desktop/repos-to-contribute/supabase/node_modules/libpg-query
npm error command failed
npm error command sh -c node-pre-gyp install --fallback-to-build
npm error Failed to execute '/home/neeraj/.nvm/versions/node/v21.5.0/bin/node /home/neeraj/.nvm/versions/node/v21.5.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/home/neeraj/Desktop/repos-to-contribute/supabase/node_modules/libpg-query/build/Release/queryparser.node --module_name=queryparser --module_path=/home/neeraj/Desktop/repos-to-contribute/supabase/node_modules/libpg-query/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v120' (1)
npm error node-pre-gyp info it worked if it ends with ok
npm error node-pre-gyp info using node-pre-gyp@1.0.11
npm error node-pre-gyp info using node@21.5.0 | linux | x64
npm error (node:7271) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
npm error (Use node --trace-deprecation ... to show where the warning was created)
npm error node-pre-gyp info check checked for "/home/neeraj/Desktop/repos-to-contribute/supabase/node_modules/libpg-query/build/Release/queryparser.node" (not found)
npm error node-pre-gyp http GET https://supabase-public-artifacts-bucket.s3.amazonaws.com/libpg-query-node/queryparser-v13.3.1-node-v120-linux-x64.tar.gz
npm error node-pre-gyp ERR! install response status 404 Not Found on https://supabase-public-artifacts-bucket.s3.amazonaws.com/libpg-query-node/queryparser-v13.3.1-node-v120-linux-x64.tar.gz
npm error node-pre-gyp WARN Pre-built binaries not installable for libpg-query@13.3.1 and node@21.5.0 (node-v120 ABI, glibc) (falling back to source compile with node-gyp)
npm error node-pre-gyp WARN Hit error response status 404 Not Found on https://supabase-public-artifacts-bucket.s3.amazonaws.com/libpg-query-node/queryparser-v13.3.1-node-v120-linux-x64.tar.gz
npm error gyp info it worked if it ends with ok
npm error gyp info using node-gyp@10.1.0
npm error gyp info using node@21.5.0 | linux | x64
npm error gyp info ok
npm error gyp info it worked if it ends with ok
npm error gyp info using node-gyp@10.1.0
npm error gyp info using node@21.5.0 | linux | x64
npm error gyp info find Python using Python version 3.10.12 found at "/usr/bin/python3"
npm error gyp info spawn /usr/bin/python3
npm error gyp info spawn args [
npm error gyp info spawn args '/home/neeraj/.nvm/versions/node/v21.5.0/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
npm error gyp info spawn args 'binding.gyp',
npm error gyp info spawn args '-f',
npm error gyp info spawn args 'make',
npm error gyp info spawn args '-I',
npm error gyp info spawn args '/home/neeraj/Desktop/repos-to-contribute/supabase/node_modules/libpg-query/build/config.gypi',
npm error gyp info spawn args '-I',
npm error gyp info spawn args '/home/neeraj/.nvm/versions/node/v21.5.0/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm error gyp info spawn args '-I',
npm error gyp info spawn args '/home/neeraj/.cache/node-gyp/21.5.0/include/node/common.gypi',
npm error gyp info spawn args '-Dlibrary=shared_library',
npm error gyp info spawn args '-Dvisibility=default',
npm error gyp info spawn args '-Dnode_root_dir=/home/neeraj/.cache/node-gyp/21.5.0',
npm error gyp info spawn args '-Dnode_gyp_dir=/home/neeraj/.nvm/versions/node/v21.5.0/lib/node_modules/npm/node_modules/node-gyp',
npm error gyp info spawn args '-Dnode_lib_file=/home/neeraj/.cache/node-gyp/21.5.0/<(target_arch)/node.lib',
npm error gyp info spawn args '-Dmodule_root_dir=/home/neeraj/Desktop/repos-to-contribute/supabase/node_modules/libpg-query',
npm error gyp info spawn args '-Dnode_engine=v8',
npm error gyp info spawn args '--depth=.',
npm error gyp info spawn args '--no-parallel',
npm error gyp info spawn args '--generator-output',
npm error gyp info spawn args 'build',
npm error gyp info spawn args '-Goutput_dir=.'
npm error gyp info spawn args ]
npm error gyp info ok
npm error gyp info it worked if it ends with ok
npm error gyp info using node-gyp@10.1.0
npm error gyp info using node@21.5.0 | linux | x64
npm error gyp ERR! build error
npm error gyp ERR! stack Error: not found: make
npm error gyp ERR! stack at getNotFoundError (/home/neeraj/.nvm/versions/node/v21.5.0/lib/node_modules/npm/node_modules/which/lib/index.js:16:17)
npm error gyp ERR! stack at which (/home/neeraj/.nvm/versions/node/v21.5.0/lib/node_modules/npm/node_modules/which/lib/index.js:77:9)
npm error gyp ERR! stack at async doWhich (/home/neeraj/.nvm/versions/node/v21.5.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:112:22)
npm error gyp ERR! stack at async loadConfigGypi (/home/neeraj/.nvm/versions/node/v21.5.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:77:7)
npm error gyp ERR! stack at async build (/home/neeraj/.nvm/versions/node/v21.5.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:35:3)
npm error gyp ERR! stack at async run (/home/neeraj/.nvm/versions/node/v21.5.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js:81:18)
npm error gyp ERR! System Linux 6.5.0-26-generic
npm error gyp ERR! command "/home/neeraj/.nvm/versions/node/v21.5.0/bin/node" "/home/neeraj/.nvm/versions/node/v21.5.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--module=/home/neeraj/Desktop/repos-to-contribute/supabase/node_modules/libpg-query/build/Release/queryparser.node" "--module_name=queryparser" "--module_path=/home/neeraj/Desktop/repos-to-contribute/supabase/node_modules/libpg-query/build/Release" "--napi_version=9" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v120"
npm error gyp ERR! cwd /home/neeraj/Desktop/repos-to-contribute/supabase/node_modules/libpg-query
npm error gyp ERR! node -v v21.5.0
npm error gyp ERR! node-gyp -v v10.1.0
npm error gyp ERR! not ok
npm error node-pre-gyp ERR! build error
npm error node-pre-gyp ERR! stack Error: Failed to execute '/home/neeraj/.nvm/versions/node/v21.5.0/bin/node /home/neeraj/.nvm/versions/node/v21.5.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/home/neeraj/Desktop/repos-to-contribute/supabase/node_modules/libpg-query/build/Release/queryparser.node --module_name=queryparser --module_path=/home/neeraj/Desktop/repos-to-contribute/supabase/node_modules/libpg-query/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v120' (1)
npm error node-pre-gyp ERR! stack at ChildProcess. (/home/neeraj/Desktop/repos-to-contribute/supabase/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm error node-pre-gyp ERR! stack at ChildProcess.emit (node:events:519:28)
npm error node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1105:16)
npm error node-pre-gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:305:5)
npm error node-pre-gyp ERR! System Linux 6.5.0-26-generic
npm error node-pre-gyp ERR! command "/home/neeraj/.nvm/versions/node/v21.5.0/bin/node" "/home/neeraj/Desktop/repos-to-contribute/supabase/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
npm error node-pre-gyp ERR! cwd /home/neeraj/Desktop/repos-to-contribute/supabase/node_modules/libpg-query
npm error node-pre-gyp ERR! node -v v21.5.0
npm error node-pre-gyp ERR! node-pre-gyp -v v1.0.11
npm error node-pre-gyp ERR! not ok

npm error A complete log of this run can be found in: /home/neeraj/.npm/_logs/2024-04-25T19_44_03_259Z-debug-0.log

can you help me with this error

[Mohammed-Yasin-Mulla]

@JaykumarPatel1998 I looked into the issue, it does exist but I do not see this to be an issue unless you have your monitor screen height short or you are zoomed in.
Never the less it should not be happening like this

[smitgol]

@Mohammed-Yasin-Mulla still we should have that fix

[liambirkin]

The active and hover states look ok though and they sroll over the top of the logo and hide the logo.
Maybe take a look at the classes of the first item in the nav links and what is applied there and apply something similar to the default state.

[liambirkin]

Looks like the Supabase icon also shows through the gaps between the nav links too when they're in the active state.

Solved for this in the PR above.

[liambirkin]

^Alternative fix that adds scrolling to the side menu links below the supabase logo instead of scrolling over the top of the logo

[chetan-187]

@smitgol Are you still checking this? I can have a look.