Skip to content

history: scrollbars #1536

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 4, 2025
Merged

history: scrollbars #1536

merged 2 commits into from
Mar 4, 2025

Conversation

shakyShane
Copy link
Contributor

@shakyShane shakyShane commented Mar 4, 2025

Asana Task/Github Issue: https://app.asana.com/0/0/1209565728475049/f

Description

  • Leave the default windows scrollbars, but adjust for light/dark mode
  • re-introduce the custom scrollbar stuff for macOS to handle light/dark there too.

Testing Steps

macOS

Screenshot 2025-03-04 at 08 59 57 Screenshot 2025-03-04 at 08 59 51

Windows

Screenshot 2025-03-04 at 08 27 36 Screenshot 2025-03-04 at 08 27 47

Checklist

Please tick all that apply:

  • I have tested this change locally
  • I have tested this change locally in all supported browsers
  • This change will be visible to users
  • I have added automated tests that cover this change
  • I have ensured the change is gated by config
  • This change was covered by a ship review
  • This change was covered by a tech design
  • Any dependent config has been merged

@shakyShane
Copy link
Contributor Author

This stack of pull requests is managed by Graphite. Learn more about stacking.

Copy link

netlify bot commented Mar 4, 2025

Deploy Preview for content-scope-scripts ready!

Name Link
🔨 Latest commit a15f784
🔍 Latest deploy log https://app.netlify.com/sites/content-scope-scripts/deploys/67c6c0fbe64a2e0008111075
😎 Deploy Preview https://deploy-preview-1536--content-scope-scripts.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.

Copy link

github-actions bot commented Mar 4, 2025

Temporary Branch Update

The temporary branch has been updated with the latest changes. Below are the details:

Please use the above install command to update to the latest version.

@shakyShane shakyShane marked this pull request as ready for review March 4, 2025 08:24
@shakyShane shakyShane requested review from mgurgel and a team as code owners March 4, 2025 08:24
Copy link

github-actions bot commented Mar 4, 2025

[Beta] Generated file diff

Time updated: Tue, 04 Mar 2025 09:00:35 GMT

Integration
    - integration/pages/history/dist/index.css

File has changed

Windows
    - windows/pages/history/dist/index.css

File has changed

Apple
    - dist/pages/history/dist/index.css

File has changed

Comment on lines 74 to 107
/**
* macOS specific styling to handle dark mode - without this full
* override you cannot change the track color :(
*/
[data-platform="macos"] {
.customScroller {
--webkit-thumb-color: rgba(136, 136, 136, 0.8);

&::-webkit-scrollbar {
width: var(--scrollbar-width);
}

&::-webkit-scrollbar-track {
background-color: var(--history-background-color)
}

&::-webkit-scrollbar-thumb {
background-color: var(--webkit-thumb-color);
border-radius: calc(var(--scrollbar-width) / 2);

/** faking some padding on the thumb */
border: 4px solid var(--history-background-color);
}

&::-webkit-scrollbar-button {
display: block;
background-color: var(--history-background-color);

/** a small vertical gap to prevent it touching boundaries */
height: 2px;
}
}
} No newline at end of file
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ideally, we wouldn't need this. But for now it gets the project over the line. The window example above is preferred.

.customScroller {
overflow-y: scroll;
scrollbar-gutter: stable;
padding-right: calc(var(--main-padding-right) - var(--scrollbar-width));
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This helps the alignment of selected rows, ensuring they perfectly match the search bar in the header

@shakyShane shakyShane requested a review from a team March 4, 2025 10:17
Copy link
Contributor

@dbajpeyi dbajpeyi left a comment

Choose a reason for hiding this comment

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

Looks good to me 👍

Unrelated: we seem to be overriding a system setting seems to be a bit too smart, but this is a v1 so we will likely iterate:

(scroll always visible)
image

@shakyShane shakyShane merged commit 473595c into main Mar 4, 2025
17 checks passed
@shakyShane shakyShane deleted the 03-04-history_scrollbars branch March 4, 2025 11:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants