Sidecar: Make header consistently 100% width so the X button is visible (#95982)

Make a wrapper overflow so that header can stay 100%
This commit is contained in:
Andrej Ocenas 2024-11-07 11:33:07 +01:00 committed by GitHub
parent df8b6e6862
commit bee29c14c6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -108,7 +108,7 @@ export function ExperimentalSplitPaneRouterWrapper(props: RouterWrapperProps) {
<LocationServiceProvider service={memoryLocationService}>
<CompatRouter>
<GlobalStyles />
<div className={styles.secondAppWrapper}>
<div className={styles.secondAppChrome}>
<div className={styles.secondAppToolbar}>
<IconButton
size={'lg'}
@ -118,7 +118,9 @@ export function ExperimentalSplitPaneRouterWrapper(props: RouterWrapperProps) {
onClick={() => closeApp(activePluginId)}
/>
</div>
<AppRootPage pluginId={activePluginId} />
<div className={styles.secondAppWrapper}>
<AppRootPage pluginId={activePluginId} />
</div>
</div>
</CompatRouter>
</LocationServiceProvider>
@ -132,10 +134,11 @@ export function ExperimentalSplitPaneRouterWrapper(props: RouterWrapperProps) {
const getStyles = (theme: GrafanaTheme2, headerHeight: number | undefined) => {
return {
secondAppWrapper: css({
label: 'secondAppWrapper',
secondAppChrome: css({
label: 'secondAppChrome',
display: 'flex',
height: '100%',
width: '100%',
paddingTop: headerHeight || 0,
flexGrow: 1,
flexDirection: 'column',
@ -147,6 +150,12 @@ const getStyles = (theme: GrafanaTheme2, headerHeight: number | undefined) => {
justifyContent: 'flex-end',
}),
secondAppWrapper: css({
label: 'secondAppWrapper',
overflow: 'auto',
flex: '1',
}),
// This is basically the same as grafana-app class. This means the 2 additional wrapper divs that are in between
// grafana-app div and the main app component don't actually change anything in the layout.
dummyWrapper: css({