diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts index 4c3a5254b72..a104cccca86 100644 --- a/packages/grafana-ui/src/components/Table/styles.ts +++ b/packages/grafana-ui/src/components/Table/styles.ts @@ -1,6 +1,7 @@ import { css } from 'emotion'; import { GrafanaTheme } from '@grafana/data'; import { stylesFactory, styleMixins } from '../../themes'; +import { getScrollbarWidth } from '../../utils'; export interface TableStyles { cellHeight: number; @@ -31,6 +32,7 @@ export const getTableStyles = stylesFactory( const bodyFontSize = 14; const cellHeight = padding * 2 + bodyFontSize * lineHeight; const rowHoverBg = styleMixins.hoverColor(theme.colors.bg1, theme); + const scollbarWidth = getScrollbarWidth(); return { theme, @@ -53,7 +55,7 @@ export const getTableStyles = stylesFactory( position: relative; `, headerCell: css` - padding: ${padding}px 10px; + padding: ${padding}px; cursor: pointer; overflow: hidden; white-space: nowrap; @@ -82,13 +84,17 @@ export const getTableStyles = stylesFactory( &:last-child { border-right: none; + + > div { + padding-right: ${scollbarWidth + padding}px; + } } `, tableCellLink: css` text-decoration: underline; `, tableCell: css` - padding: ${padding}px 10px; + padding: ${padding}px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; diff --git a/packages/grafana-ui/src/utils/index.ts b/packages/grafana-ui/src/utils/index.ts index 972f8765bb8..09fdfdd85c7 100644 --- a/packages/grafana-ui/src/utils/index.ts +++ b/packages/grafana-ui/src/utils/index.ts @@ -3,6 +3,7 @@ export * from './validate'; export * from './slate'; export * from './dataLinks'; export * from './tags'; +export * from './scrollbar'; export * from './measureText'; export { default as ansicolor } from './ansicolor'; diff --git a/public/app/core/utils/scrollbar.ts b/packages/grafana-ui/src/utils/scrollbar.ts similarity index 70% rename from public/app/core/utils/scrollbar.ts rename to packages/grafana-ui/src/utils/scrollbar.ts index 932ec2fc641..adffdf8c8ba 100644 --- a/public/app/core/utils/scrollbar.ts +++ b/packages/grafana-ui/src/utils/scrollbar.ts @@ -1,8 +1,8 @@ -// Slightly modified, but without dependancies: +// Slightly modified, but without dependancies: // https://raw.githubusercontent.com/malte-wessel/react-custom-scrollbars/master/src/utils/getScrollbarWidth.js let scrollbarWidth: number | null = null; -export default function getScrollbarWidth() { +export function getScrollbarWidth() { if (scrollbarWidth !== null) { return scrollbarWidth; } @@ -31,11 +31,3 @@ export default function getScrollbarWidth() { } return scrollbarWidth || 0; } - -const hasNoOverlayScrollbars = getScrollbarWidth() > 0; - -export const addClassIfNoOverlayScrollbar = (classname: string, htmlElement: HTMLElement = document.body) => { - if (hasNoOverlayScrollbars) { - htmlElement.classList.add(classname); - } -}; diff --git a/public/app/app.ts b/public/app/app.ts index ff90fde339b..2b21fad06e7 100644 --- a/public/app/app.ts +++ b/public/app/app.ts @@ -35,7 +35,6 @@ import { setTimeZoneResolver, } from '@grafana/data'; import appEvents from 'app/core/app_events'; -import { addClassIfNoOverlayScrollbar } from 'app/core/utils/scrollbar'; import { checkBrowserCompatibility } from 'app/core/utils/browser'; import { importPluginModule } from 'app/features/plugins/plugin_loader'; import { angularModules, coreModule } from 'app/core/core_module'; @@ -47,7 +46,7 @@ import { reportPerformance } from './core/services/echo/EchoSrv'; import { PerformanceBackend } from './core/services/echo/backends/PerformanceBackend'; import 'app/routes/GrafanaCtrl'; import 'app/features/all'; -import { getStandardFieldConfigs, getStandardOptionEditors } from '@grafana/ui'; +import { getStandardFieldConfigs, getStandardOptionEditors, getScrollbarWidth } from '@grafana/ui'; import { getDefaultVariableAdapters, variableAdapters } from './features/variables/adapters'; import { initDevFeatures } from './dev'; import { getStandardTransformers } from 'app/core/utils/standardTransformers'; @@ -75,7 +74,6 @@ export class GrafanaApp { preBootModules: any[] | null; constructor() { - addClassIfNoOverlayScrollbar('no-overlay-scrollbar'); this.preBootModules = []; this.registerFunctions = {}; this.ngModuleDependencies = []; @@ -94,6 +92,7 @@ export class GrafanaApp { init() { const app = angular.module('grafana', []); + addClassIfNoOverlayScrollbar(); setLocale(config.bootData.user.locale); setTimeZoneResolver(() => config.bootData.user.timeZone); @@ -216,4 +215,10 @@ export class GrafanaApp { } } +function addClassIfNoOverlayScrollbar() { + if (getScrollbarWidth() > 0) { + document.body.classList.add('no-overlay-scrollbar'); + } +} + export default new GrafanaApp();