chore: viewport icons #31069
chore: viewport icons #31069
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This PR enhances the viewport selection UI in the Heatmaps feature with a more polished interface for selecting different device widths.
- Added
setWidthOverrideaction infrontend/src/scenes/heatmaps/heatmapsBrowserLogic.tsbut usessetIframeWidthreducer to update state, creating potential confusion - Replaced custom viewport chooser with
LemonSegmentedButtoncomponent inHeatmapsBrowser.tsxfor a more polished UI - Added device-specific icons (phone, tablet, laptop) with pixel width labels for better visual representation
- Added styling improvements including border styling to the iframe container and an id attribute for better identification
- Centralized width override state management in heatmapsBrowserLogic instead of component-level state
2 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile
| @@ -86,6 +86,7 @@ export const heatmapsBrowserLogic = kea<heatmapsBrowserLogicType>([ | |||
| stopTrackingLoading: true, | |||
| setReplayIframeData: (replayIframeData: ReplayIframeData | null) => ({ replayIframeData }), | |||
| setReplayIframeDataURL: (url: string | null) => ({ url }), | |||
| setWidthOverride: (width: number | null) => ({ width }), | |||
There was a problem hiding this comment.
logic: The action setWidthOverride is defined here but it's not used in any reducer case. Instead, the widthOverride state is updated by the setIframeWidth action.
📸 UI snapshots have been updated3 snapshot changes in total. 0 added, 3 modified, 0 deleted:
Triggered by this commit. |
📸 UI snapshots have been updated1 snapshot changes in total. 0 added, 1 modified, 0 deleted:
Triggered by this commit. |
There was a problem hiding this comment.
looks like it's unhappy in darkmode
There was a problem hiding this comment.
yep, fixed already
| value={widthOverride ? widthOverride : undefined} | ||
| options={[ | ||
| { | ||
| value: 320, |
There was a problem hiding this comment.
let's put a data-attr on these options so we can track when they're clicked (in a way i didn't with the previous version)
There was a problem hiding this comment.
Good point! Added
…posthog into chore/heatmaps/viewport
📸 UI snapshots have been updated1 snapshot changes in total. 0 added, 1 modified, 0 deleted:
Triggered by this commit. |
|
Size Change: +203 kB (+1.54%) Total Size: 13.4 MB
|
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Make viewport in Heatmap a bit nicer
Before
After
