undergroundwires bc4879cfe9 Fix Chromium scrollbar-induced layout shifts
This commit addresses an issue in Chromium on Linux and Windows where
the appearance of a vertical scrollbar causes unexpected horizontal
layout shifts. This behavior typically occurs when the window is
resized, a card is opened or a script is selected, resulting in content
being pushed to the left.

The solution implemented involves using `scrollbar-gutter: stable` to
ensure space is always allocated for the scrollbar, thus preventing any
shift in the page layout. This fix primarily affects Chromium-based
browsers on Linux and Windows. It has no impact on Firefox on any
platform, or any browser on macOS (including Chromium). Because these
render the scrollbar as an overlay, and do not suffer from this issue.

Steps to reproduce the issue using Chromium browser on Linux/Windows:

1. Open the app with a height large enough where a vertical scrollbar is
   not visible.
2. Resize the window to a height that triggers a vertical scrollbar.
3. Notice the layout shift as the body content moves to the right.

Changes:

- Add a CSS mixin to handle scrollbar gutter allocation with a fallback.
- Add support for modal dialog background lock to handle
  `scrollbar-gutter: stable;` in calculations to avoid layout shift when
  a modal is open.
- Add E2E test to avoid regression.
- Update DevToolkit to accommodate new scrollbar spacing.
2024-05-09 18:35:02 +02:00
2024-01-25 12:51:51 +01:00
2022-10-09 22:38:35 +02:00
2020-08-09 03:00:13 +01:00
2024-04-16 07:45:17 +00:00
2023-09-08 16:52:41 +02:00

privacy.sexy — Privacy is sexy

Enforce privacy & security best-practices on Windows, macOS and Linux, because privacy is sexy.

donation badge contributions are welcome Maintainability
Unit tests status Integration tests status E2E tests status
Status of dependency security checks Status of Static Analysis Security Testing (SAST)
Status of quality checks Status of build checks Status of runtime error checks for the desktop application Status of script checks Status of external URL checks
Git release status Site release status Desktop application release status
Auto-versioned by bump-everywhere

Get started

See also:

💡 Regularly applying your configuration with privacy.sexy is recommended, especially after each new release and major operating system updates. Each version updates scripts to enhance stability, privacy, and security.

privacy.sexy application

Features

  • Rich: Hundreds of scripts that aims to give you control of your data.
  • Free: Both free as in "beer" and free as in "speech".
  • Transparent. Have full visibility into what the tweaks do as you enable them.
  • Reversible. Revert if something feels wrong.
  • Accessible. No need to run any compiled software on your computer with web version.
  • Secure: Security is a top priority at privacy.sexy with comprehensive safeguards in place.
  • Open. What you see as code in this repository is what you get. The application itself, its infrastructure and deployments are open-source and automated thanks to bump-everywhere.
  • Tested. A lot of tests. Automated and manual. Community-testing and verification. Stability improvements comes before new features.
  • Extensible. Effortlessly extend scripts with a custom designed templating language.
  • Portable and simple. Every script is independently executable without cross-dependencies.

Support

Sponsor 💕. Consider sponsoring on GitHub Sponsors, or you can donate using other ways such as crypto or a coffee.

Star 🤩. Feel free to give it a star .

Contribute 👷. Contributions of any type are welcome. See CONTRIBUTING.md as the starting point. It includes useful information like how to add new scripts.

Additional Install Options

  • Check the releases page for all available versions.
  • Other unofficial channels (not maintained by privacy.sexy) for Windows include:
    • Scoop 🥄 (latest version):

        scoop bucket add extras
        scoop install privacy.sexy
      
    • winget 🪟 (may be outdated):

        winget install -e --id undergroundwires.privacy.sexy
      

      With winget, updates require manual submission; the auto-update feature within privacy.sexy will notify you of new releases post-installation.

Development

Refer to development.md for Docker usage and reading more about setting up your development environment.

Check architecture.md for an overview of design and how different parts and layers work together. You can refer to application.md for a closer look at application layer codebase and presentation.md for code related to GUI layer. collection-files.md explains the YAML files that are the core of the application and templating.md documents how to use templating language in those files. In ci-cd.md, you can read more about the pipelines that automates maintenance tasks and ensures you get what see.

docs/ folder includes all other documentation.

Security

Security is a top priority at privacy.sexy. An extensive commitment to security verification ensures this priority. For any security concerns or vulnerabilities, please consult the Security Policy.

Languages
TypeScript 91.5%
Vue 6.3%
JavaScript 0.9%
SCSS 0.8%
Python 0.4%