Skip to content

Commit 6a6f167

Browse files
chihsuanchihsuan
committed
fix: keep widget-dashboard story settings drawer on-screen in Storybook
1 parent 4d25aa4 commit 6a6f167

2 files changed

Lines changed: 31 additions & 15 deletions

File tree

‎projects/packages/premium-analytics/changelog/fix-widget-dashboard-story-settings-drawer‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Significance: patch
2+
Type: fixed
3+
4+
Keep the widget-dashboard Storybook story's settings drawer on-screen when the dashboard is wider than the preview canvas.

‎projects/packages/premium-analytics/widgets/stories/widget-dashboard-with-widget.tsx‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -171,21 +171,33 @@ export function WidgetDashboardWithWidget( {
171171
return (
172172
<GlobalErrorProvider>
173173
<HostRootFontSize hostEnvironment={ hostEnvironment }>
174-
<div style={ { width: dashboardWidth, maxWidth: '100%' } }>
175-
<WidgetDashboard
176-
layout={ layout }
177-
onLayoutChange={ setLayout }
178-
widgetTypes={ [ storyWidgetType ] }
179-
resolveWidgetModule={ resolveWidgetModule }
180-
gridSettings={ { model: 'grid', rowHeight } }
181-
editMode={ currentEditMode }
182-
onEditChange={ setCurrentEditMode }
183-
>
184-
<Page title={ pageTitle } actions={ <WidgetDashboard.Actions /> } hasPadding>
185-
<WidgetDashboard.NoWidgetsState />
186-
<WidgetDashboard.Widgets />
187-
</Page>
188-
</WidgetDashboard>
174+
{ /*
175+
* Outer box fills the canvas and owns horizontal overflow; the inner
176+
* box holds the simulated `dashboardWidth`. The host widget-settings
177+
* drawer is portaled to <body> and positioned `fixed; right: 0`, so a
178+
* body wider than the visible canvas (which a fixed `dashboardWidth`
179+
* wider than the Storybook preview would cause) pushes the drawer
180+
* off-screen. Containing the overflow here keeps the document at canvas
181+
* width so the drawer stays anchored to the visible viewport edge; the
182+
* wide layout remains inspectable by scrolling the box.
183+
*/ }
184+
<div style={ { width: '100%', overflowX: 'auto' } }>
185+
<div style={ { width: dashboardWidth } }>
186+
<WidgetDashboard
187+
layout={ layout }
188+
onLayoutChange={ setLayout }
189+
widgetTypes={ [ storyWidgetType ] }
190+
resolveWidgetModule={ resolveWidgetModule }
191+
gridSettings={ { model: 'grid', rowHeight } }
192+
editMode={ currentEditMode }
193+
onEditChange={ setCurrentEditMode }
194+
>
195+
<Page title={ pageTitle } actions={ <WidgetDashboard.Actions /> } hasPadding>
196+
<WidgetDashboard.NoWidgetsState />
197+
<WidgetDashboard.Widgets />
198+
</Page>
199+
</WidgetDashboard>
200+
</div>
189201
</div>
190202
</HostRootFontSize>
191203
</GlobalErrorProvider>

0 commit comments

Comments
 (0)