Skip to content

web: fix scrollbar styling#12600

Merged
GirlBossRush merged 4 commits intogoauthentik:mainfrom
RoboMagus:fix_scrollbar_styling
Apr 22, 2025
Merged

web: fix scrollbar styling#12600
GirlBossRush merged 4 commits intogoauthentik:mainfrom
RoboMagus:fix_scrollbar_styling

Conversation

@RoboMagus
Copy link
Contributor

@RoboMagus RoboMagus commented Jan 8, 2025

Details

Closes #11936.
This PR removes unnecessary scrollbars on the .pf-c-card__body class, as well as add scrollbar styling to browsers that do not support the ::-webkit-scrollbar. (Currently on Firefox thick unstyled grey scrollbars show up whenever a container is scrollable)

Note that this only changes the color scheme, as scrollbar thickness styling is not inherited (see this issue) and therefore would require modifying a significant number of classes to add scrollbar-width.

Checklist

  • Local tests pass (ak test authentik/)
  • The code has been formatted (make lint-fix)

If an API change has been made

  • The API schema has been updated (make gen-build)

If changes to the frontend have been made

  • The code has been formatted (make web)

If applicable

  • The documentation has been updated
  • The documentation has been formatted (make website)

@RoboMagus RoboMagus requested a review from a team as a code owner January 8, 2025 16:19
@netlify
Copy link

netlify bot commented Jan 8, 2025 •
edited
Loading

✅ Deploy Preview for authentik-storybook ready!

Name Link
🔨 Latest commit 300deae
🔍 Latest deploy log https://app.netlify.com/sites/authentik-storybook/deploys/67e475a3ebac9500082cf1da
😎 Deploy Preview https://deploy-preview-12600--authentik-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify
Copy link

netlify bot commented Jan 8, 2025 •
edited
Loading

✅ Deploy Preview for authentik-docs ready!

Name Link
🔨 Latest commit 300deae
🔍 Latest deploy log https://app.netlify.com/sites/authentik-docs/deploys/67e475a36a7ad1000855132a
😎 Deploy Preview https://deploy-preview-12600--authentik-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@codecov
Copy link

codecov bot commented Jan 8, 2025 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 92.76%. Comparing base (27aed4b) to head (300deae).
Report is 324 commits behind head on main.

✅ All tests successful. No failed tests found.

Additional details and impacted files 
@@           Coverage Diff           @@
##             main   #12600   +/-   ##
=======================================
  Coverage   92.75%   92.76%           
=======================================
  Files         794      794           
  Lines       40545    40545           
=======================================
+ Hits        37609    37610    +1     
+ Misses       2936     2935    -1
Flag Coverage Δ
e2e 47.99% <ø> (+0.05%) ⬆️
integration 24.28% <ø> (ø)
unit 90.54% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@kensternberg-authentik
Copy link
Contributor

kensternberg-authentik commented Jan 24, 2025

@RoboMagus : Quick question; where would I go in the UI to observe the changes you made?

@RoboMagus
Copy link
Contributor Author

RoboMagus commented Jan 24, 2025

See linked issue #11936
Its mostly the main admin dashboard that is affected

@notion-workspace
Copy link

notion-workspace bot commented Mar 11, 2025

Unnecessary scrollbars in Admin pages [Firefox]

@melizeche
Copy link
Member

melizeche commented Mar 26, 2025

I tested this and it works as expected, no unnecessary scrollbars in Firefox
@kensternberg-authentik can you take a look to approve this please?

@GirlBossRush GirlBossRush self-requested a review March 27, 2025 16:34
kensternberg-authentik
kensternberg-authentik approved these changes Mar 27, 2025
View reviewed changes
Copy link
Contributor

@kensternberg-authentik kensternberg-authentik left a comment

Choose a reason for hiding this comment

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

Good work, but what does it mean if the browser doesn't support @supports ?

@melizeche
Copy link
Member

melizeche commented Mar 27, 2025

@kensternberg-authentik seems that's pretty well supported in all major browsers, probably many other things also could be broken in a really old browser
https://caniuse.com/mdn-css_at-rules_supports_selector

@GirlBossRush GirlBossRush merged commit bedf548 into goauthentik:main Apr 22, 2025
88 checks passed
kensternberg-authentik added a commit that referenced this pull request Apr 25, 2025
@kensternberg-authentik
Merge branch 'main' into dev
8b95840 
* main: (49 commits)
  core: bump uvicorn from 0.34.1 to v0.34.2 (#14175)
  website/integrations: add xcreds (#14163)
  core, web: update translations (#14179)
  web: update default flow background (#14115)
  web: bump API Client version (#14176)
  enterprise/policies: Add Password Uniqueness History Policy (#13453)
  web/xliff: fix duplicated translations (#14164)
  website/docs: fix postgres pool recommended settings (#14149)
  core: bump astral-sh/uv from 0.6.14 to 0.6.16 (#14161)
  web: fix scrollbar styling (#12600)
  website: integrations: gravity: fix issuer URL (#14155)
  web: Packagify live reload plugin. (#14134)
  web: bump API Client version (#14062)
  translate: Updates for file locale/en/LC_MESSAGES/django.po in zh-Hans (#14146)
  translate: Updates for file web/xliff/en.xlf in zh_CN (#14145)
  core: bump goauthentik.io/api/v3 from 3.2025024.7 to 3.2025024.8 (#14143)
  translate: Updates for file locale/en/LC_MESSAGES/django.po in zh_CN (#14144)
  translate: Updates for file web/xliff/en.xlf in zh-Hans (#14139)
  core, web: update translations (#14142)
  core: bump yarl from 1.19.0 to v1.20.0 (#14128)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@kensternberg-authentik kensternberg-authentik kensternberg-authentik approved these changes

@GirlBossRush GirlBossRush Awaiting requested review from GirlBossRush

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Unnecessary scrollbars in Admin pages [Firefox]

4 participants

@RoboMagus @kensternberg-authentik @melizeche @GirlBossRush