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}>
<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({