Skip to content
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

fix: add fixed heights for date picker and table header (month and buttons) #26932

Merged
merged 7 commits into from
Dec 16, 2024

Conversation

adamleithp
Copy link
Contributor

@adamleithp adamleithp commented Dec 16, 2024

Problem

Date picker jumping around is poor UX

Changes

Add fixed height to date .LemonCalendar so when clicking through the months the height is set to the highest the element will be to reduce jankyness in the height when passing through months.

Before:
Fixed height for whole table
image
Fixed height for month table header
image

After:
Fixed height for whole table
image

Fixed height for month table header
image

Does this work well for both Cloud and self-hosted?

Yes

How did you test this code?

Tested the fix in major browsers, and shrunk the screen down to see if it works

@adamleithp adamleithp added design Issues that need a designer's attention ux changes concerning the users experience labels Dec 16, 2024
Copy link
Contributor

github-actions bot commented Dec 16, 2024

Size Change: +40 B (0%)

Total Size: 1.11 MB

ℹ️ View Unchanged
Filename Size Change
frontend/dist/toolbar.js 1.11 MB +40 B (0%)

compressed-size-action

@posthog-bot
Copy link
Contributor

📸 UI snapshots have been updated

32 snapshot changes in total. 0 added, 32 modified, 0 deleted:

  • chromium: 0 added, 32 modified, 0 deleted (diff for shard 1)
  • webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

@adamleithp adamleithp changed the title fix: add fixed height for date picker fix: add fixed heights for date picker and table header (month and buttons) Dec 16, 2024
@@ -7,6 +7,8 @@
// Tricky: needs to match the equivalent height button from LemonButton.scss
--lemon-calendar-time-button-height: 2.3125rem;

height: 305px;
Copy link
Contributor

Choose a reason for hiding this comment

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

Might be worth making this a variable or at least saying what this value is composed of

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Added! good call on the self documentation.

@adamleithp adamleithp enabled auto-merge (squash) December 16, 2024 14:56
@posthog-bot
Copy link
Contributor

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

  • chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
  • webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

@adamleithp adamleithp merged commit 114936e into master Dec 16, 2024
96 checks passed
@adamleithp adamleithp deleted the adam/date-picker-fixed-height-19964 branch December 16, 2024 15:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design Issues that need a designer's attention ux changes concerning the users experience
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants