Skip to content

Update quick actions layout - #83

Merged
wojtekn merged 1 commit into
trunkfrom
fix/overview-actions-layout
May 6, 2024
Merged

Update quick actions layout#83
wojtekn merged 1 commit into
trunkfrom
fix/overview-actions-layout

Conversation

@matt-west

@matt-west matt-west commented May 3, 2024

Copy link
Copy Markdown
Contributor

Fixes #46

Proposed Changes

  • Update the quick actions section on the Overview tab to use a two-col layout below the lg breakpoint. This helps to make the button labels more readable in various translations. The current three-column layout still applies at lg.
  • Updated the overview tab max-width to use 3xl. Also updated the demo sites empty state container to match.

At default screen width:

Screenshot 2024-05-03 at 12 50 29

At lg breakpoint:

スクリーンショット 2024-05-03 12 50 49

It's not possible to account for all translations, so I’ve kept the existing behaviour that truncates long button labels and displays the full label in a tooltip on hover.

Testing Instructions

  • Change your system language to Japanese or French.
  • Open Studio.
  • Add a site.
  • Note that the quick actions on the Overview tab use a two-column layout at smaller window sizes.

Pre-merge Checklist

  • Have you checked for TypeScript, React or other console errors?
3 column layout is used above the lg breakpoint.
@matt-west matt-west self-assigned this May 3, 2024
@matt-west
matt-west marked this pull request as ready for review May 3, 2024 12:59
@matt-west
matt-west requested a review from a team May 3, 2024 12:59

@sejas sejas left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Awesome!, Thanks for creating this PR. It looks great!

vJFHyT.mp4

@wojtekn wojtekn left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Works as expected.

@wojtekn
wojtekn merged commit f1417e2 into trunk May 6, 2024
@wojtekn
wojtekn deleted the fix/overview-actions-layout branch May 6, 2024 08:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

3 participants