IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/app/routes/RoutesWrapper.tsx
View File

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